Outreach theme – Google fonts

Community Forums Forums General Discussion Outreach theme – Google fonts

This topic is: resolved

This topic contains 4 replies, has 2 voices, and was last updated by  Paul 1 year, 4 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #25750

    Paul
    Participant
    Post count: 55

    So far I have not figured out exactly how to use Google fonts. I do see where Outreach is using a Google font called ‘Lato’
    The site I am working on now would like to have the title of their site use the Gabriela font.

    What do I need to change in the style sheet to use this font just for the title?

    #25772

    braddalton
    Participant
    Post count: 8899

    Line 197 of your child themes style.css file contains the CSS for your sites title:
    [css]
    #title {
    font-family: ‘Lato’, sans-serif;
    font-size: 48px;
    font-weight: normal;
    line-height: 1;
    margin: 35px 0 0;;
    text-transform: uppercase;
    }
    [/css]

    Change the font family from Lato to Gabriela.

    Google fonts are loaded in your child themes functions.php file starting at line 17:
    [php]
    /** Load Google fonts */
    add_action( ‘wp_enqueue_scripts’, ‘outreach_load_google_fonts’ );
    function outreach_load_google_fonts() {
    wp_enqueue_style(
    ‘google-fonts’,
    ‘http://fonts.googleapis.com/css?family=Lato’,
    array(),
    PARENT_THEME_VERSION
    );
    }
    [/php]

    If its a Google font, add it here and then you can use it anywhere in your CSS there’s a font-family property.

    Otherwise if its a font supported by all browsers you don’t need to install it, just change the font-family value.

    If its a custom font, you’ll need to install it first before changing your CSS code.


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

    #25831

    Paul
    Participant
    Post count: 55

    OK, so now I have this in the CSS:

    #title {
    font-family: 'Gabriela', sans-serif;
    font-size: 46px;
    font-weight: normal;
    line-height: 1;
    margin-top: 35px;
    margin-right: auto;
    margin-bottom: 15px;
    margin-left: auto;
    text-transform: none;
    color: #a1f233;
    }

    And this in the function.php”
    /** Load Google fonts */
    add_action( 'wp_enqueue_scripts', 'outreach_load_google_fonts' );
    function outreach_load_google_fonts() {
    wp_enqueue_style(
    'google-fonts',
    'http://fonts.googleapis.com/css?family=Lato',
    'http://fonts.googleapis.com/css?family=Gabriela',
    array(),
    PARENT_THEME_VERSION
    );
    }

    But it didn’t seem to change anything. Is there a different way I am supposed to add a 2nd Google font?

    #25835

    braddalton
    Participant
    Post count: 8899

    You can add them to your child themes style.css file:

    @import url(http://fonts.googleapis.com/css?family=Gabriela|Lato);

    Or try this in your child themes functions.php file:
    [php]
    /** Load Google fonts */
    add_action( ‘wp_enqueue_scripts’, ‘outreach_load_google_fonts’ );
    function outreach_load_google_fonts() {
    wp_enqueue_style(
    ‘google-fonts’,
    ‘http://fonts.googleapis.com/css?family=Gabriela|Lato’,
    array(),
    PARENT_THEME_VERSION
    );
    }
    [/php]


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

    #26031

    Paul
    Participant
    Post count: 55

    Thank you braddalton! Used the functions and putting the fonts together on same line did the trick. I figured I was doing it wrong by adding another line in.

Viewing 5 posts - 1 through 5 (of 5 total)

The topic ‘Outreach theme – Google fonts’ is closed to new replies.