Adding a Google Font to Customizr

⚠️ Code snippets might not be compatible with the latest version of your theme. Always use a child theme to customize your theme, and test your code on a staging website before migrating to production.

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

 

 

Where to copy/paste the code? The best way to customize a theme in WordPress is to create a child theme. Everything you need to know about child theme creation in Customizr here

 

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) :

raleway-font-small

 

 

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!

Leave a Reply to elke Cancel reply

Your email address will not be published. Required fields are marked *

49 thoughts on “Adding a Google Font to Customizr”