Google fonts

Here is a brief guide on how to implement a Google font to your mono site!

Step 1: Find your desired font

First you'll need to start by finding the right font. Keep in mind that you might not want to add a 'crazy-looking' font as your body text. 'Crazy fonts' are best used for headlines and subheadlines. For your body text, you should to pick a font which is easy to read in a small font size.

Step 2: Select font

Browse around on Google Fonts and find your desired font. When you've found the right font, click on "Quick use".

Step 3: Select the styles and character sets you want

First you choose the styles you want to add to your site.

Some fonts might have more than one style, which will make it easier for you to use a regular looking font for body text while perhaps using a bold or even a very thin style for your headlines.


Secondly you choose the character sets you want.

You will need to find a character set which allows you to use special characters to your specific language.

Step 4: Embed the font into your page

Copy the HTML from the "3. Add this code to your website" field

And add the snippet to your "Global HTML Tags > Header Tag" on your mono page.

Remember to hit Save!

This can be found in the first section under:
Website > Site settings > Global HTML tags

Step 5: Integrate the font into your CSS

Nearly there! Now you need to integrate the font into your CSS and call the font on specific text types.

Copy the font-family from Google Fonts (Step 4).

Add this snippet to the Custom CSS field under site settings.

Remember to hit Save!

Add the font name to your CSS styles just as you'd do normally with any other font.

/* Custom font */
.contentArea .h1,
.contentArea .h2{
    font-family: 'Frijole', cursive;
Copy to clipboard


Now you're done and ready to rumble!

You can also add one font to headlines, another one to your body text and even one more to your preamble text. You just need to keep in mind that each font you enable is increasing the load time of your site.