Adding Google Fonts To Your Mono Site Or Template

Here's how we recommend adding Google Fonts (that we don't have already) to your Mono site.

It is possible to add Google Fonts to your site or template, but because it involves custom CSS and HTML, we recommend that you use typefaces from our existing list if possible.


We try to maintain a list which covers many of the most commonly used typefaces, but you may find a situation where you need something custom.
Here's how we recommend implementing a custom Google Font with your Mono site.


Find the Google Font


First of all you will want to find the Google Font you wish to use (and make sure that we definitely don't have it already in our system!). You will need to make sure to consider what weights of type you require too, since when embedding typefaces, you may wish to embed a bold and italic version (or heavy, light and so on).


The trick here is to make sure your not loading too much in the way of additional typefaces, since they will affect your overall page speed (and in turn your SEO if Google thinks your page is loading particularly slow).


Let's take Baloo Bhaina as an example. I want to include this typeface, so I can grab the relevant HTML code from Google Fonts, and take note of the name of the font, as required for the CSS I'm going to write.


Google Fonts 01


Add the embed code to Global HTML


This code is best placed in the Global HTML Tags area under Settings in the editor.


Google Fonts 02


This means the font is now being imported on every page of your website. Now we need to use Custom CSS to define rules about what pieces of text should use this typeface.


Add custom CSS to target relevant text


Before we do this, you should be familiar with CSS.


You will also need to find the right selector for the content you wish to style. For example, if you want to target everything, you can use "body" but if you just need to target subtitles, you can use ".subtitle".


Remember: You should always consider adding a fall-back typeface to your CSS, so that if your custom type can't be loaded, there's something that still works, or the right default typeface is used.


In the example below you can see I'm inspecting the page with Chrome's DOM inspector, and can see that there's a CSS class of "spottext" on this particular title:


Google Fonts 03


In the examples below, I have used Baloo Bhaina in my custom CSS declaration (with "cursive" as a default fallback) and I'm targetting the "spottext" class:


Google Fonts 04


If you wish to target more than one thing with the same typeface in your CSS, you can add the selectors with a comma separating them.


Here i'm also targetting the "smallspottext" class (which is applied to the text below)


Google Fonts 05


Hopefully this helps you when working with a custom typeface from Google Fonts.


NOTE: "typeface" is the name for a family of "fonts" - a "font" is a particular weight of typeface, for example "bold", "italic" or "normal".

0 0
Feed