WordPress – adding Google Fonts

There are tons of ways to add and reference custom fonts in WordPress.  Unfortunately not every available option is recommended.  In the worse case scenario you can break your theme.  In equally unsettling circumstances you can find your fonts are no longer available because of a theme update.

So, how should you declare Google fonts so you can safely use them in your WordPress Theme.

The way I’m doing it is to declare and load them in the themes functions.php file.
Depending on whether or not you’re working with protected Child-Themes you should be able to easily locate and update this file.

In the instance below I have referenced two Google fonts, Raleway and Open Sans.
Then I load them when initiating the theme.

function google_fonts() {function google_fonts() {
$query_args = array( ‘family’ => ‘Raleway:400,600,700|Open+Sans’,
‘subset’ => ‘latin,latin-ext’ );

wp_register_style( ‘google_fonts’, add_query_arg( $query_args, “//fonts.googleapis.com/css” ), array(), null );            }            

add_action(‘wp_enqueue_scripts’, ‘google_fonts’)

Having loaded them, they can be used within your css files.
ie.   p{font-family: ‘raleway’; font-weight:600;}

Adwords (1)

Branding (13)

CMS (3)

CSS (6)

Graphic Design (6)

Javascript (1)

PHP (3)

SEO (5)

tech support (5)

Web Design (10)

Web Development (10)

Wordpress (17)

Wordpress plugins (3)