Outreach theme – Google fonts

[Paul]

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?

---

Grace and Peace,
Paul

[Brad Dalton]

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.

---

2700 Genesis Tutorials

[Paul]

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?

---

Grace and Peace,
Paul

[Brad Dalton]

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

---

2700 Genesis Tutorials

[Paul]

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.

---

Grace and Peace,
Paul

[Author]

Posts