Google has its own Font Directory in which hundreds of different fonts and fonts are available. However, these fonts cannot be used by default, but must be set in a special way. In this article you can read how you can set this up on your own WordPress website. Fortunately, it is not too difficult to set a custom font via WordPress. You only need a basic knowledge of html and css. With this diagram next to it, everything will probably be fine. In the example, the Tangerine font is used, but of course you are free to adjust this to any font you want.
Google Fonts step-by-step plan
Within two simple steps you can use Google Fonts on your website.
- Put the stylesheet of Google Fonts in the head tags
By implementing this code in the head tags, your website knows that you want to work with a separate font. For this you have to look in the code for the head tags of your website. These start with and end with . Via WordPress you can find it in the header.php.
Copy the following code in the head tags: As you can see, tangerine font has been chosen here. You can adjust it to whatever font you want. If you want to work with multiple fonts, you can indicate this by inserting ‘|’ between the desired fonts. This looks like this:<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="http://fonts.googleapis.com/css?family=Tangerine|Droid+Sans|Inconsolata" rel="stylesheet"> - Open your style.css
Your stylesheet is now in the head tags of your website, but must also be processed in the style.css file of your website.
You can choose to run your different headers in these fonts from the Google Font Directory, to give the titles just a little more emphasis. You can also work out your entire site in a special font. Note that this often does not improve the readability of your website and that visitors may click away faster. So if you want a separate font, but a nice experience for your visitors, it is better to only work out the headers or small pieces of text in a Google Font. Copy the code below into your style.css file:.post h2 {
font-family: "Tangerine", serif;
font-size: 48px;
}
It looks like this. If you also want to add a shadow effect, enter the following code:body {
font-family: "Tangerine", serif;
font-size: 48px;
text-shadow: 4px 4px 4px #aaa;
}
With shadow you get the following effect.
Enable Google Font Directory
So there are many different ways to make your website just a bit fresher and more unique by enabling the Google Font Directory. Make sure that you do not use too much unique text: then your website will quickly become unreadable. For just the titles or smaller pieces of text, a unique font can be a very nice addition to your website.
Check out our other Google related blog articles
