[Twenty Twelve] Google Fonts

  • Resolved markhem

    (@markhem)


    11 years, 4 months ago

    I have read the threads in the forum on Google fonts in the twenty twelve theme. There are a number of explanations with various outcomes; threads that jump, threads that end suddenly, mis-information, and conflicting methods. All of which are appreciated, but I’m a little confused.

    Can someone please explain the basic process of how to change the Google fonts? I’d like to use Google fonts to do it because I want to learn this method.

    I want to use only two fonts;
    Font_A for all my headers
    Font_B for all other text.

    I have a child theme on my localhost. I am able to work in the functions.php file, and do the styling in the style.css.

    Thank You.

Viewing 7 replies - 1 through 7 (of 7 total)

  • Do not edit the theme itself. First create a child theme for your changes.

    Joel Williams

    (@joelwills)

    Automattic Happiness Engineer

    The way I would do it is in your child theme style.css add the imports for the fonts you want to use. Say you wanted to use Rationale and Underdog, at the top of the CSS enter

    @import url(https://fonts.googleapis.com/css?family=Rationale|Underdog);

    Then use them:

    body.custom-font-enabled {
font-family: 'Rationale', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
font-family: 'Underdog', cursive;
}

    You may need to do h1, h2 etc individually if you want to control the sizes. Also depending on how specific the CSS is in this theme you may need to target other selectors.

    Thread Starter markhem

    (@markhem)

    @esmi
    Thank you.

    @joel
    Thanks Joel for your explanation. I take it this gets around the need to dequeue Open Sans?

    Joel Williams

    (@joelwills)

    Automattic Happiness Engineer

    Yes, well it overrides it. You might want to dequeue it anyway as you’re loading a font you’re not using so there will be some speed benefit to not loading it, but you don’t have to.

    Thread Starter markhem

    (@markhem)

    Okay. thanks. I did it and it worked, as you knew it would.

    By the way, 'Underdog', cursive; is a very cool font.

    Joel Williams

    (@joelwills)

    Automattic Happiness Engineer

    Great!

    I just chose that font at random, but glad you like it ??

    Thread Starter markhem

    (@markhem)

    In case anyone is interested I found this article that outlines the speicific text selectors to target in css.

    Changing fonts for twenty twelve theme

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘[Twenty Twelve] Google Fonts’ is closed to new replies.