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 HostingLatest Posts
Truth be told, it’s difficult for a web application that doesn’t have some kind of identification, even if you don’t see it as a security measure in and of itself. The Internet is a kind of lawless land, and even on free services like Google’s, authentication ensures that abuses will...
MongoDB is a document-oriented NoSQL database, which was born in 2007 in California as a service to be used within a larger project, but which soon became an independent and open-source product. It stores documents in JSON, a format based on JavaScript and simpler than XML, but still with good...
Although data persistence is almost always a fundamental element of applications, Node.js has no native integration with databases. Everything is delegated to third-party libraries to be included manually, in addition to the standard APIs. Although MongoDB and other non-relational databases are the most common choice with Node because if you...
Related Posts
Comments
Comments are closed here.