Designers love Google fonts because they are free and beautiful resources.
Still, a big deal of whether you can or cannot apply Google fonts depends on your website. In the WordPress case, you can always work on the CSS code to enable most of them, but there are quicker ways to resolve this issue.
The simplest course of action is to use the appropriate plugin, and benefit from the generous and free font library Google has to offer on their website. You can access the fonts manually (CSS coding), or skip modifying back-end files and use the above-mentioned plugin.
Embedding the fonts yourself won’t be as difficult as you think, as it was first introduced by CSS 2 in early 1998, and has modified significantly the @font-face rule. Thanks to this procedure, designers can download the PostScripts or True Types they like, and display them directly on their computers.
Back in the days, the only browser to support Google Fonts was Internet Explorer 4, as font developers feared their work would be pirated, and charged expensive licenses. Not even nowadays did CSS3 solve piracy problems, but at least it made it possible to use fonts on all browsers. A notable difference is the quality of the resolution, which is an additional reason to consider font embedding.
Thanks to Google, the WordPress user community has tons of web fonts to use in the recent years. All of these fonts are available for free, as long as you know how to implement them. In case you’re not familiar with them, check the library and try to understand the font types and families, and choose the one that has the most suitable characteristics.
These are the categories available:
- Serif
- Sans-Serif
- Display
- Handwriting
- Monospace
These are the characteristics to consider:
- Thickness
- Width
- Slant
You can also reduce the options by choosing a particular script, especially if you’re interested in modifying styling or using the site for translation purposes. These are your options:
- Cyrillic
- Cyrillic Extended
- Devanagari
- Greek
- Greek Extended
- Khmer
- Latin
- Latin Extended
- Vietnamese
Integrating Google Fonts on your WordPress websites – options
First option: Installing Plugins
The number of seamless font-integration plugins is just outrageous, as this is the simplest Google Font adoption method so far. All it takes is to install them, activate them, and all fonts will be available to you in a matter of seconds.
Still, plugins are not almighty – integrating them will be a piece of cake, but what may turn out tricky is choosing more than one font for different text portions. The plugin cannot recognize that unless you’ve done some customization work with CSS or HTML.
WP Google Fonts. This is one of the simplest, yet most efficient plugins you can use to benefit from all Google fonts for your website. A modest dose of CSS styling will do for adapting any font to any theme or stylesheet, and this can be performed directly from the website’s admin area and with few clicks only. We perceive it to be the universal ‘one size suits all’ plugin for the purpose.
Easy Google Fonts. The popular plugin is specifically designed for novice WordPress users because it doesn’t require a coding touch to make live fonts work on your website. You get to choose fonts the same as with other plugins, but they will already be optimized, color-ready, and styled for preview. For additional fitting and customization, use the WordPress Customize area.
Second option: Code modification
Those among you who have some website building experience shouldn’t find it too hard to implement few stylesheets here and there.
In fact, all instructions for embedding stylesheets and iterating fonts can easily be found on Google.
The ideal start is by choosing the font you like and browsing Google Font’s library to see whether it contains it. If you don’t have an idea, pick one you like, and use the ‘Quick Use’ button to be redirected to a page where you can add this font, and read some instructions on how to do it.
Usually, Google suggests three tabs for the purpose, the first one being the simplest, standardized one, while the other two include coding skills. For the second, you’d need @import CSS knowledge, while the third requires advanced JavaScript skills.
The CSS method goes like this: It would be enough to simply open the theme’s style.css file, copy the font’s code, and paste it into the file.
@import url(http://fonts.googleapis.com/css?family=Lora);
@import url(http://fonts.googleapis.com/css?family=Oswald);You can also combine multiple font requests into one.
@import url(http://fonts.googleapis.com/css?family=Lora|Oswald);The standard method beats the rest with simplicity because it uses a link importing method instead of coding. The URL of your website will be enough to add all the fonts you want or combine those with a single | character. Add the following code to the head section of your theme, and it will be enough. The plugin may also require you to alter the content of the header.php file, where you should paste the same code before the main stylesheet.
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lora|Oswald" media="screen">
<link rel="stylesheet" type="text/css" href="YOUR THEME STYLESHEET" media="screen">The point here is to send a font request as soon as possible, so that you can start using it on dot. According to what Google’s Web Fonts Blog says, adding a script tag in front of the front face declaration would indicate to Internet Explorer that a download process is going on, and it would stop the browser from rendering whatever before that process is completed.
Once the font is there, you can put it in action from the CSS file, including it like this:
h1 {font-family: 'Oswald', Helvetica, Arial, serif;}Have in mind that not every theme is to be subdued to alteration, especially a child one or a framework. The reason is that frequent modifications can affect the way it displays in some occasions. These themes, however, are packed with filters and hooks you could use to add the fonts in the right way.
In most of the cases, you won’t be adding fonts to your theme for the first time, so create a child version to prevent losing valuable information the next time you make alterations. A consequence you should also avoid is losing the fonts you’ve installed during the next update of your WordPress settings.
How to ‘enqueue’ Google Fonts in a safe way
As we already explained, plugins are not your only choice for laying hands on all amazing Google Web Fonts. You can access those also by enqueuing them inside the functions.php file of your theme, or choose a plugin intended for the purpose.
function wpb_add_google_fonts() {
wp_enqueue_style( 'wpb-google-fonts', 'http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300', false );
}
add_action( 'wp_enqueue_scripts', 'wpb_add_google_fonts' );At the end, make sure you’ve inserted your own link instead of the font’s one.
Using JavaScript to load the fonts
This method is slightly more complicated, as there is a special code you should copy in the Google font usage instructions section, located in your JavaScript tab. The code should be pasted into the header.php file, placed right below the tag.
CSS3’s can also be used for the purpose due to their @font-face rule, but doing it you’ll be expected to upload each file to the server. The enqueue script makes this easier for you, because it establishes an immediate connection between the site and the external scripts, and saves you both time and space.
You may want to think about it if you don’t own the script, because it will increase the load of your external site’s server. Google, nevertheless, encourages users to do it.
Using the themes
Sometimes, you will come across themes that do have Google Fonts embedded, or accept them automatically. In such case, there will be no need to download plugins or to make CSS and PHP coding experience, in particular with the Themefuse themes.
Whatever your choice is, you should know Google Fonts are among your best options to improve users’ experience and add flare to your website. They are not compulsory, but still, represent Google’s best resource to lend a hand to the ones in need.
Even the default fonts offered by the browser will work, but they won’t help you make a ‘styling revolution’ and keep the site cohesive to inspire a ‘wow’ effect.