Celebrating 7 Years! Get up to $30 off GeneratePress Premium!

[Resolved] How to use Google fonts

Home Forums Support [Resolved] How to use Google fonts

Home Forums Support How to use Google fonts

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #593669
    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.

    GP Premium 1.6.2
    #593790
    David
    Staff
    Customer Support

    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

    #593990
    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

    #593998
    David
    Staff
    Customer Support

    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.

    #594200
    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>

    #594213
    David
    Staff
    Customer Support

    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>

    #594238
    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.

    #594248
    David
    Staff
    Customer Support

    Looks like this on my browser:

    Abril Fatface

    #594353
    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.

    #594394
    David
    Staff
    Customer Support

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

    #594709
    Stewart

    Nope, just goes sans-serif

    #594746
    David
    Staff
    Customer Support

    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/

    #594747
    Stewart

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

    Stu

    #594752
    David
    Staff
    Customer Support

    Ha ha not enough obviously. Have a good night

Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.