If you have an Adobe Creative Cloud subscription, you can use any custom fonts offered by Adobe Fonts (formerly TypeKit) and easily integrate them into Semplice.
Creating your font kit in Adobe Fonts
You'll need to create a font kit to load your fonts into Semplice. To get started, you'll need to login to the Adobe Fonts page. You can then browse for the fonts that you want included with your Semplice site.
You can then hover over each font and click the <> icon (add fonts to web project) button. You'll then need to select an existing web project, or create a new one. You can then select the font weights you want to use with your site and click the save button.
Note: this font kit should ONLY contain the fonts and font weights that you intent on using your site. If you have too many fonts or font weights, it can add significant load times to your site.
Importing the fonts into Semplice
Once you've added the fonts to your project, you'll now see a popup with an embed code for your font kit. Copy this code. You can then navigate to Customize > Webfonts in Semplice and then under 'Add Resource' create a new font resource. Make sure the resource type is set to 'Service'. Paste your font kit embed from Adobe Fonts into the embed code area here.
Note: unlike with self-hosted fonts, you can use the same system name for each font weight with Adobe Fonts
Creating the webfonts
Once you've added the embed code as a new font resource, click 'Add Webfont'. From here, give your font a display name. Under system name, be sure to use the EXACT system name that Adobe specifies in the kit settings from adobe (the same area where you grabbed the embed code). The system name MUST match what Adobe specifies, otherwise the font will not load.
You should now see your font loaded in Semplice! It's really that simple. You can repeat these steps as needed for each separate font weight.
Troubleshooting
My Adobe Font does not load
If your font is not showing in the editor, you can try the following troubleshooting steps:
- Check to make sure your kit is still active and that your fonts (including all necessary weights) are in the kit inside of Adobe fonts
- Ensure you are using the SAME system name in your webfont settings as the one Adobe specifies in your Adobe Font kit settings. If they do not match, your font will not load.
- If you've checked all these steps, yet the font still does not load, it's possible your hosting service is blocking the connection from Adobe. In this case, you will need to contact your hosting provider to ensure the embed code script is not being blocked.