Adding a Google Font to Customizr

Hi,

Today I am going to show you how to simply use a Google Font in Customizr without any plugin, and guess what : I takes 5 mins. This will be done in 3 simple steps :

1 Grab the Google Font

2 Edit your functions.php file

3 Edit the style.css

1 – Grab the Google Font

Visit the Google Font library here and select the font you want. In this example I will choose the beautiful Raleway font.

Just type Raleway in the search filed and see it showing up. Then click on the quick use icon (see below) :

Once you are in the quick use screen, then scroll down until you see the “Add this code to your website” section and copy the line of code.

2 – Edit the functions.php file

Open your functions.php file (of your child theme) and add  the following code where you will paste the line of code you just grabbed from the Google Font website (change the font if needed of course) :

2-1 Method one (recommended)

This techniques uses the wp_enqueue_scripts action hook, which is the best and safest way to include stylesheets or javascripts in WordPress. As a good practice, I would rather recommend to include your Google font like this.

add_action( 'wp_enqueue_scripts', 'my_google_font' );
function my_google_font() {
	wp_enqueue_style( $handle = 'my-google-font', $src = 'http://fonts.googleapis.com/css?family=Raleway', $deps = array(), $ver = null, $media = null );
}

2-2 Alternative Method

add_action ( 'wp_head' , 'my_google_font');
function my_google_font() {
	?>
	<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
	<?php
}

3 – Edit the style.css file

Open the style.css file and add the font to the selector you want. In this example, I will set the Raleway font as the default body font.

body {
font-family: 'Raleway', sans-serif;
}

Save and close.

Done!