Reply To: Change the font to a GoogleFont and change color etc.

Homepage Community Forums Aspire Theme Support Change the font to a GoogleFont and change color etc. Reply To: Change the font to a GoogleFont and change color etc.

#18232
Wes
Moderator

    There are a few ways you can do this, it just depends if you would rather manually add code (that’s how I prefer to do it), or use a plugin to change the fonts.

    If you want to use a plugin, you can do a Google search for Google Font plugins on WordPress.org, there should be plenty that will help.

    To do this the manual way, go here and grab the Google font code – https://www.google.com/fonts#UsePlace:use/Collection:Raleway

    Next take a look in your in your functions.php file and you’ll see something like this –

    wp_enqueue_style( 'google-fonts', '//fonts.googleapis.com/css?family=Open=Sans:300,400,600,700', array(), CHILD_THEME_VERSION );

    Replace that with the code that you chose from Google. If I were to use the Raleway font, the end result would look something like this –

    wp_enqueue_style( 'google-fonts', '//fonts.googleapis.com/css?family=Raleway:300,400,600)', array(), CHILD_THEME_VERSION );

    Then in your style.css file you can replace the font for the body around line 155 to Raleway like this –

    body {
    	background-color: #fff;
    	color: #333;
    	font-family: 'Raleway', sans-serif;
    	font-size: 20px;
    	font-size: 2.0rem;
    	font-weight: 300;
    	line-height: 1.625;
    	margin: 0;
    }

    You can also do the same for your headings on line 236 –

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
    	font-family: 'Raleway', sans-serif;
    	font-weight: 300;
    	line-height: 1.2;
    	margin: 0 0 20px;
    }

    More info here – http://my.studiopress.com/tutorials/load-google-fonts/

    If you want to change the font in the Menu, you can add your font-family to line 1277 in your style.css –

    .genesis-nav-menu a {
    	color: #fff;
    	display: block;
    	font-size: 13px;
    	font-weight: 300;
    	letter-spacing: 2px;
    	padding: 30px 15px;
    	text-transform: uppercase;
    }