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, 1 month ago.

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

    Paul
    Participant
    Post count: 43

    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: 7467

    Line 197 of your child themes style.css file contains the CSS for your sites title:

    #title {
    	font-family: 'Lato', sans-serif;
    	font-size: 48px;
    	font-weight: normal;
    	line-height: 1;
    	margin: 35px 0 0;;
    	text-transform: uppercase;
    }
    

    Change the font family from Lato to Gabriela.

    Google fonts are loaded in your child themes functions.php file starting at line 17:

    /** 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 
        );
    }
    

    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.


    WordPress Developer & Consultant
    Brad Dalton400+ StudioPress Tutorials & 1200+ Code snippets

    #25831

    Paul
    Participant
    Post count: 43

    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: 7467

    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:

    /** 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
        );
    }
    

    WordPress Developer & Consultant
    Brad Dalton400+ StudioPress Tutorials & 1200+ Code snippets

    #26031

    Paul
    Participant
    Post count: 43

    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.