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.

Tagged: ,

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #18230
    YogieAnamCara
    Customer

      Hello,

      I’m new to the Genesis Framework and the Aspire Pro Theme.

      I bought the Framework/Aspire Theme as I thought with a Framework I could do even more than I can do with a theme, but at the end I do have less options to customize my site than I had with the last theme I had in place. Anyway I still believe that I can do more for example I question

      How can I change the font to the Google Font Raleway?
      How can I change the font style for the Aspire Pro menu?

      Many thanks in advance for any help.

      #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;
        }
      Viewing 2 posts - 1 through 2 (of 2 total)
      • You must be logged in to reply to this topic.