[Resolved] How to use Google fonts

[Stewart]

Is there a step-by-step guide to using Google fonts? I can’t find anything helpful in your documentation– and yes I’ve read it. I need something a newbie can understand.

[David]

Hi Stewart, what information do you feel you are missing?

By default GP loads the top 200 google fonts, all of which are accessible in the Customiser > Typography.
We have articles on now to load the entire list (or reduce the number loaded) as well as an article on loading fonts locally, so their is no request made of the Google API when loading them.

Let me know

[Stewart]

Hi David

I’d like to know how to specify a Google font for a single bit of text, not all the H1 or H2 styles. For example, I have a small headline within a div and I’d like to use a particular Google font with that bit of text and nowhere else. I can’t find anything in the documentation that tells me how to do that. The Customiser->typography control isn’t specific enough.

Stu

[David]

Hi Stewart,

the simplest method is to use one of the smaller headings, H4, H5 or H6 and use that tag.
If you want to style the text directly then we can do this with some CSS if you’re interested.

[Stewart]

I know CSS but don’t know how to specify a particular font. Can you just give me a code sample? For example this doesn’t work.

<span style=”font-family: ‘Abril Fatface’, cursive;”>This is a bit of text in Abril Fatface</span>

[David]

Hi Stewart, have you copied that mark-up from somewhere as there’s a possibility the inverted commas are wrong. Try copying and pasting this:

<span style="font-family: 'Abril Fatface', cursive;">This is a bit of text in Abril Fatface</span>

[Stewart]

This comes out looking like Zapf Chancery, not Abril Fatface.

You can see it here: http://livemusichalifax.ca/test-of-google-font/

If I select Abril Fatface through the Customize->Typography tool it works fine.

[David]

Looks like this on my browser:

[Stewart]

Nope. Just that Zapf Chancery look, on two computers and three browsers. But it does work with the customiztion tool, so the fonts must be properly installed.

[David]

Sounds like it’s defaulting to the system cursive font. Remove the cursive fall back, and let us know

[Stewart]

Nope, just goes sans-serif

[David]

Hi Stewart, apologies – having one of those days, for the font to load as an inline style it has to either have been installed locally or being called by the customiser. For example if you set the font in one of the headings within the customiser then this font will be fetched and the inline style will work.

If you don’t load it via the customiser then you need to add the fonts locally in a child theme. This document covers that function:

https://docs.generatepress.com/article/adding-local-fonts/

[Stewart]

OK– thanks for your help with this– don’t you ever sleep?

Stu

[David]

Ha ha not enough obviously. Have a good night

[Author]

Posts