Articles in this section

See more

Installing a custom font with Google Fonts

  • Updated

Installing a font from Google Fonts is super easy in Semplice. We recommend using Google (or any other font hosting service) to host your site's fonts instead self-hosting your fonts, since their servers can load the fonts faster. 

Follow these steps to add your Google font to Semplice.

 

Step 1: Getting the Embed Code

First, create a kit in Google Fonts that includes all the fonts you want to use on your site. 

Now in Google Fonts, click the fly-out box at the bottom of the screen to pull up your font kit embed code area. Copy the embed code for your font kit.

Note: if you plan on using multiple font weights, you will need to click the 'Customize' tab in the embed code options area and select your weights.

 

adding-google-fonts.gif

 

Step 2: Adding the Font Resource to Semplice

In Semplice, navigate to Customize > Webfonts. On on the left side of the page, click + Add Resource.

 

webfont-resource.gif

 

Paste in the embed code you grabbed from Google, and give your font resource a name.

 

adding-google-embed.gif

 

Step 3: Adding the Webfont

Now that we've added the font resource, we need to create our webfonts. Because we selected two font weights in this example, we need to add two individual webfonts for each weight.

 

adding-the-webfont.gif 

  1. To create your webfont, click the 'Add Webfont' button.
  2. In the 'Display Name' options, add the name of the font and weight. 
  3. Under 'System Name', give the name of the font that Google specifies in the CSS while viewing the embed options. For example, if we were adding 'Poppins Bold' we would simply write the system name as 'Poppins' since this is what Google specifies the system name as.


    system-name.png

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.

And you're done!

 

Troubleshooting

Why are my Google Fonts 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 as 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 href="https://fonts.googleapis.com/css?family=Poppins:400,400i,700" 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