There is a lot of buzz going on these days with web design and custom fonts – and more than likely you’ve seen some typography that you’d die to have on your site. Some of these are paid fonts, which you might want not want to spend money on.
Google Comes to the Rescue
Google Web Fonts lets you browse all the fonts available via the Google Web Fonts API. All fonts in the directory are available for use on your website under an open source license and are served by Google servers.
And they are free. That’s great news, right?
Well yes it is – especially if you’re running the Genesis Framework on your website or blog. With a few simple steps, you can select any of the Google web fonts and implement them into your design.
How to Implement Google Web Fonts
The first thing you need to do is to identify which font you’d like to use. You can do so by visiting the Google Web Fonts page, and browsing by various criteria.
As soon as you find a font you like, click the “Quick Use” link and you’ll be taken to the font page. Toward the bottom, you’ll see the Developer’s Guide section – click on the link that says “@import” which will display this:
[css]@import url(https://fonts.googleapis.com/css?family=Droid+Serif);[/css]
Adding to Your Child Theme’s Style Sheet
The first thing you need to do is add the following code to the top of your style sheet. You’ll want to do it immediately after the style sheet header (which has info such as Theme Name, Version, etc.)
[css]/* Import Fonts
———————————————————— */
@import url(https://fonts.googleapis.com/css?family=Droid+Serif);[/css]
Make sure the code is placed above any of the child theme’s CSS definitions.
The last step is defining the font in places you want to use it. For example, if you want to use the Droid Serif font in the navigation, you would add it to your font stack below like you see below:
[css]#nav {
font-family: ‘Droid Serif’, serif;
}[/css]
It’s that simple – using Google Web Fonts with your Genesis theme is that easy. Just follow the steps mentioned above, and you can add some wonderful typography to your website or blog.