256 Kilobytes

Typography is a huge part of web design and since it’s launch in 2010 Google fonts has become a huge tool in most designers arsenals handling everything effortlessly so you don’t have to.

Just as in other business areas if you release a product that's both free to users and very easy to use it’s popularity will explode. This article aims to look at both the positives and negatives of using Google fonts.

Positives

No licensing issues

Google Fonts is free to use, even for commercial applications. Unlike a lot of fonts where you lease them or other companies like Microsoft/Adobe own them you’re never going to run into licensing or copyright issues.

Very easy to install and embed in existing and new websites

Google Fonts is simple and easy to set up, to install a Google Font all you need to do is add the Google Font stylesheet to the head or use the @import feature inside your CSS. It’s as simple as copy and pasting.

You can customise the character sets to reduce loading times

If you’re worried about Google Fonts being bloated and slowing down you’re website with weights and character sets you’re not going to use, don’t. You can select just the parts you want very easily reducing file sizes and download times for your users.

Fonts are not stored on your server

If you’re running a large website with high traffic you might be worried about server strain from loading your fonts everytime someone visits your website. Over time this can seriously add up, fortunately all of this is handled by Google's servers as you’re just referencing font files from their storage and using their bandwidth.

Can help improve loading speed for your website

I’ve already touched on this slightly above, but it needs to be stressed. Running Google Fonts instead of embedding your own is probably going to be faster than loading these on your own. Google Fonts acts like a content delivery network for fonts as the font files come from Google and not your server. You also have the advantage of Google compressing these fonts and if your user has visited another website already running Google Fonts it’s likely the font files are already cached locally for them.

Typefaces can be downloaded for print

Google Fonts can all be downloaded and used for print applications like signage, flyers, business cards or whatever you’re making. If you’re using a particular font as part of your brand you’re not going to have issues when you want to continue your brand in the real world.

Negatives

The popularity of Google fonts means a lot of websites are using the same fonts

Google Fonts is very widely used and comes bundled in with a lot of themes and plugins on popular CMS themes. This means the popular Google Fonts such as Open Sans or Roboto are used everywhere. If you’re looking for a font to use in your brand Google Font might not have the variety needed to help you stand out.

Many typefaces are limited to certain weights or styles

Lots of the fonts only have certain weights available or are missing character sets like italic/bold/underlined. This again probably comes down to licensing issues, if you find a font you like but you’re restricted in these aspects you might want to search the internet and try and lease the font from other sources which give you all the options.

The quality of some typefaces isn’t great

Some of the typefaces look kind of poor, they render in low quality or have not been made very well. To understand why you have to keep in mind for Google to build this library of fonts and let people use them for free they had to own the rights to do this. Companies like Adobe and Microsoft own huge numbers of fonts and tend to buy the rights to anything that becomes popular. This leaves Google needing to either take what’s left or create their own. 

Limited choice in typefaces

There’s over 700 font choices as things stand on Google Fonts. This sounds like a lot but you have to keep in mind that a lot of them such as Press Start 2P and ZCOOL won’t work for 99% of uses. There’s a lot of quirky stuff available that just isn’t suitable for a lot of projects. If you’re looking for simple and “general use” fonts (for lack of a better term) you’re selection drops to around 100.

Only available when you’re online

You might be saying “hey idiot this is a web font service, why do you care about being offline”. You’re right, and wrong. If you work Agency side of even in house showing new versions of your work to clients or internal teams during meetings is pretty common. While 95% of meeting spaces have WiFi you’re going to have issues from time to time, meaning your font can’t load. So your shiny new beautiful design might look like crap when it will only render the fall back fonts in front of your clients.

Some Frequently Asked Questions

To download a Google Font head to the Google Fonts page, select the font you want to download.

Next you need to click the + button next to the fonts name:

how to download google font

This will add the font to your fonts panel which you can see by clicking on this dark grey box at the bottom of your window.

Google Fonts Panel

If you click on this box it will expand this window, and your download button can be found in the top right.

Where is the Google Font Download Button?

Google suggests using the font manager Skyfonts, this probably isn’t a bad idea.

How to use Google fonts in CSS?

For those that want to use Google Fonts on their website you have two options to add the necessary code. You can link to a stylesheet hosted by Google, or use @import in your existing CSS files if adding code to your head is not possible.

The process is very similar to above, pick your font and open the fonts panel. In this window you have will the “standard” and “@import” labels which generate the code you need to add depending on the method you want to pick.

How to use Google Fonts in CSS

Remember, if you go with the <link> method this needs to be added inside the <head> of your website. If you go with @Import add this to the top of your CSS files.

Once this is done you can use the CSS rules Google give you to apply the font to your elements.

Google Font CSS Rule

How to use Google fonts in WordPress?

If you’re looking to add Google Fonts to your WordPress website it’s a little harder but still not a problem. Before we go further you will want to look into setting up a WordPress child theme so you’re not overwriting code in any core theme files, which will be removed when you update.

You have two options, you can either add Google fonts through the CSS (just follow the step above) or add the Google stylesheet into the head with a simple WordPress function. 

Select the font you want to use and get the standard link code which can be found here.

Google Font Link Code

Next, head to your WordPress’ themes functions.php and add this block of code:

function add_font() {
    $font_script = <<<'EOD'
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">
EOD;
    echo $font_script;
}
add_action('wp_head', 'add_font');

Replace the Google <link> code above with your link code that Google generated and press save.

You can now use the font. If you’re running any caching on your website it’s probably best to clear it now before you continue development.

Can I self host Google fonts?

Yes! All Google fonts are licensed and grant permission to redistribute. Meaning if you want to download the fonts and serve them yourself, you can. Google Fonts also has a GitHub repository where you can pull their own code so you can compress and cache your fonts just like they do if you want to do such things.

Users Who Have Downloaded More RAM:
August R. Garcia (4 days ago)
🐏 ⨉ 1
Posted by Hash Brown 5 days ago

Edit History

• [2019-01-10 19:15 PST] Hash Brown (5 days ago)
🕓 Posted at 10 January, 2019 19:15 PM PST
Profile Photo - Default Hash Brown
🗎 13 🗨 162 🐏 26
Staff

Account created 1 month ago.
13 posts, 162 comments, and 26 RAMs.

Last active 14 hours ago:
Commented in thread Are those VPN ads completely full of shit, or an I retarded?

Post a New Comment

To leave a comment, login to your account or create an account.