Google Web Fonts for your WordPress Site

Ever wondered how some WordPress websites get to display lovely fonts? Take a look at our post to discover how to add Google Web Fonts to your website.

16 May, 2011

google web fonts

Have you discovered Google Web Fonts yet?

This is a library of fonts, suitable for use on your website, that are available under an open-source licence and stored on and accessed from google web servers. So they are fonts you don’t need to pay for!

The possibilities for your website are great. There is a wide range of fonts available, and they are easy to install.

Google Web Fonts Previewer for Chrome

I have installed the font previewer for Chrome, which enables me to quickly and easily test out how each of my web pages will look with a number of different web fonts. Once I have decided on a font, the previewer then provides the code needed to slip into your website. Once the code is added to your site, that’s it – your new web font will be live on your site!

The website you are looking at right now is using the Amaranth font. I’m going to be trying some others out on my other websites.

Adding Web Fonts to WordPress

To get the font installed in your WordPress site, just edit your header.php file and insert the code into the <head>…</head> section of the script (or preferably into your child theme if you have one, just so that it isn’t overwritten the next time you upgrade your theme). Many WordPress themes also allow for new fonts to be installed, and many themes allow website owners to swap fonts with them directly – look for a list of selectable fonts in your theme settings/options. Don’t forget to back it up first though – just in case 🙂

If you want to use different fonts for different elements of your site (for example if you want headings in one font and the main text in another, or a special font to display your testimonials in a hand-written style), then you’ll probably want to action that through your CSS. Again, try to avoid editing your main style.css file directly. The best way to add new styles would be through the WordPress customizer, or by adding the styles to the custom.css file in your child theme.

Let me know what you think. I can help out if you get stuck.


Submit a Comment

Your email address will not be published. Required fields are marked *

You may also like…

How do canonical links work in wordpress?

How do canonical links work in wordpress?

Canonical links are used to indicate the preferred URL of a webpage that has multiple versions or duplicates of the same content. This article explains canonical links in depth.

Share This
Martin Jarvis

Martin Jarvis

I typically reply within an hour

We're here Monday - Friday during UK working hours. Drop us an email and we'll get back to you.

Martin Jarvis
Hi. It's Martin here. How can I help you?
Start Chat with: