23rd February, 2018 | Blog |
How To Add Google Fonts To WordPress
Using Wordpress? Get our lightening fast Wordpress Optimised Hosting.
Get Wordpress HostingHow Do I Add Google Fonts To My Website?
There are a number of WordPress themes available that include built-in options for altering Google Fonts. If your theme is one of these, simply head to the 'Customizer' and click on the 'Typography' tab. Here you will be able to edit all the main font types as well as weight and line spacing. If your theme does not offer built-in editing options for Google Fonts then don't worry, there are 2 other ways you can add them to your site and they are.Adding Google Fonts Using A WordPress Plugin
One of the best plugins for easily adding Google Fonts to your site is a free plugin called Easy Google Fonts. A simple and easy way to add custom Google Fonts to any WordPress theme, this plugin requires no coding at all. It integrates with the WordPress Customizer so you can preview Google Fonts on your site in real-time and offers the added bonus of being compatible with any WordPress theme. It also allows you to create custom theme specific font controls in the admin settings area to control particular CSS selectors. Once created, these custom font controls are instantly available in the customizer with no coding required. Another great plugin for customizing fonts on your site is the Yellow Pencil Live CSS editor plugin. The benefit of this plugin is that it not only lets you alter the fonts of your website via an easy click-and-edit method, but you can also customize all of your WordPress theme’s colours, font sizes, font weights, paddings and margins. If you are developing WordPress themes and want to customize your site fonts without the use of a plugin then there's one more way you can add them to your website.Manually Loading Google Fonts In WordPress
Step 1: Selecting Your Custom Google Font
If you head over to the main page at “Google Web Fonts” and click on any font a little pop-up will appear so that you can then customize the font and view the correct URL for the font CSS. If you are creating a simple HTML site or you are editing your personal custom WordPress theme all you need to do to load the custom font on your website is copy and paste the stylesheet link to the custom font which is hosted on google into your <head> tag (located in header.php in WordPress). That said, the preferred way of adding the Google font to your WordPress theme (this is very important when creating themes for distribution) is to make use of the WordPress wp enqueue scripts action hook.
Step 2: Enqueue Your Google Font
As mentioned earlier you can easily drop the code from Google into your header.php file, however, it’s best to enqueue the script via the action hook as noted previously. This allows for easier child theme modifications and also prevents conflicts with 3rd party plugins. To start, paste the following code into your functions.php file (if this file doesn’t exist, create a new one in your theme’s folder and make sure the code below is pasted within PHP tags.function myprefix_enqueue_google_fonts() {
wp_enqueue_style( 'roboto', 'https://fonts.googleapis.com/css?family=Roboto' );
}
add_action( 'wp_enqueue_scripts', 'myprefix_enqueue_google_fonts' );body { font-family: "Roboto"; }
Finishing Up
And that's all there is to manually loading Google Fonts to your website! With these methods you'll be able to utilise all 800+ fonts available to you, meaning you can customize and personalise your site right down to the tiniest detail.
Some final tips are:- Make sure your header class hierarchy is balanced and that header tags reduce in relative size.
- Half the battle of good site design and typography is to be consistent with your font choices. That includes font sizes, weights and spacing.
- Be selective, take your time and test as many fonts as you can until you find the perfect one for your website.
Using Wordpress? Get our lightening fast Wordpress Optimised Hosting.
Get Wordpress Hosting
Related Posts
Comments
Comments are closed here.