Community Forums › Forums › Archived Forums › General Discussion › Outreach theme – Google fonts
Tagged: google fonts, outreach
- This topic has 4 replies, 2 voices, and was last updated 10 years, 2 months ago by
Paul.
-
AuthorPosts
-
March 12, 2013 at 5:29 pm #25750
Paul
MemberSo 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,
PaulMarch 12, 2013 at 9:10 pm #25772Brad Dalton
ParticipantLine 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.
March 13, 2013 at 7:34 am #25831Paul
MemberOK, 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,
PaulMarch 13, 2013 at 7:47 am #25835Brad Dalton
ParticipantYou 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 ); }
March 13, 2013 at 3:20 pm #26031Paul
MemberThank 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 -
AuthorPosts
- The topic ‘Outreach theme – Google fonts’ is closed to new replies.