Articles in this section

See more

Install Service font with Google Fonts

  • Updated

The main difference between self-hosted fonts and service is that you store your fonts using a third-party service. In this article, we will show how you can install and activate service fonts using Google Fonts service 🙂

 

Step 1: Get an Embed Code

On the main Google Font page, in the "Search Fonts" field write the name of the font that you would like to use and select that font by clicking on its name in the list.

gsf-search.gif

If you want to select one or multiple font weights, scroll down to the list of font weights, choose the desired weight and click the "➕" sign next to it.

gfs-weights.gif

After this is done, you can now grab the embed code. To do that, in the top right corner of the screen you will find the "View Selected Families" button. Click on it to see font details. There you will find the embed link that you will use to activate your font in Semplice. Please also check the font family name that Google uses, we will also need it when we will add font style later in the "Add Webfont".

gfs-embed-code.gif

 

Step 2: Adding the Font Resource

In the Semplice dashboard navigate to "Customize" > "Webfonts". On the left side of the screen, you will find "Resources" (this is the place where you add your fonts). Click the "Add Resource" button. In the pop-up you can select from the dropdown "Service", "Self Hosted via Upload", and "Self Hosted via CSS" options. Make sure to select "Service" so we can add a service font 😉

Now, write your font name and paste the embed code into the field.

gfs-add-embed.gif

 

Step 3: Adding the Webfont

Now when your resource is added we can add the font to the system so we can select it for our typography later. To do that, click the "Add Webfont" button. Now we will need to copy the font family that we saw in the Google font details under the embed link to the "System Name" field (make sure to copy it exactly as it is written):

gfs-ff-name.png

You can then write your font name and its weight into the "Display Name" field.

Important:  The "Display Name" is NOT the same as the "System Name", and does not need to match the system name Google Fonts specifies. However, the system name MUST MATCH what Google font specifies as the system name in order for the font to load correctly.

Finally, you can select your font-weight from the "Weight" dropdown.

gfs-add-font.gif

 

And with that your font installation is complete. You can repeat this process for as many fonts as you like, but don't go crazy about it 😜

 

Troubleshooting

Why is my Google Font not loading?

1. Make sure your system font name matches exactly what Google specifies - For example, if you selected the "Roboto Condensed" font, enter "Roboto Condensed" (with no quotes) as the system name under your Webfont settings.


2. Make sure you added a "Service" font - Under the font Resources area in Semplice, double check that you selected "Service" and pasted your code there (NOT under self-hosted).

Why are only certain weights working?

This can happen if you have not selected what font weights to include in your Google Fonts export code. For example, if you needed to load the Poppins font in 400, 400 italic, and 700 bold, your font export code should look like this:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">

Why are my fonts only working on my desktop device, but not on mobile or other devices?

This happens if the font is installed locally on your machine, but not actually loaded correctly in Semplice. The font is only showing on your desktop because the browser is detecting it's installed locally. Please follow the troubleshooting steps above to ensure your font is loaded correctly.

Related articles