Font is a particular size, weight and style of a typeface. Each font was a matched set of type, one piece (called a “sort”) for each glyph, and a typeface consisting of a range of fonts that shared an overall design. In modern usage, with the advent of digital typography, font is frequently synonymous with “typeface“, although the two terms do not necessarily mean the same thing.

There are diverse ways to change your website or blog font but I’ll be explaining based on Google Fonts because it’s easy, free and has over 800 fonts available.

Google Fonts is designed to provide a platform for users to discover fonts and is used extensively. Google Fonts (previously called Google Web Fonts) is an interactive directory of free hosted application programming interfaces for web fonts. It was launched in 2010, revamped in 2011. Many of the fonts are released under the SIL Open Font License while some are released under the Apache License both are free software licenses. The fonts are also served by Monotype’s SkyFonts and by Adobe’s Edge Web Fonts and Typekit services.

READ:  3 Ultimate Guides To Review Your Blog / Website Professionally

Google font has lots of great fonts, example of the commonly used ones Lato, Raleway, and Lobster. But since I’m a great fan of Maven Pro, Exo, etc, I’ll be explaining using either of them.

To set  Custom Fonts on your website or blog, follow the below steps carefully:

  1. Navigate to Google Fonts by clicking here.
  2. Find the font you’ll like to use then click on the font, it should appear as below. :How To Enable Custom Fonts On Your Website or BlogSince I choose Exo earlier, I used the search feature
  3. Click the “+” button and this should appear:How To Enable Custom Fonts On Your Website or BlogFor the nerds, the CSS gurus, you know what’s next to do here but if you’re not, please proceed to Step 4.
  4. Then add the code to your site’s header e.g <link href=”https://fonts.googleapis.com/css?family=Exo” rel=”stylesheet”/> should be placed before the closing the head tag so that it’ll be faster while loading.
READ:  10 Reasons To Use Hostgator

Please avoid using the @import rule because it’ll make your website as slow as anything because it will create a temporary copy of the CSS to your website and hence increasing the page requests, size, etc unless you’re using a CDN network.

However, you may decide to create a new style for it or place under an already existing style you’re using for your website. E.g

<style type='text/css'>
@font-face {
  font-family: 'Exo';
  font-style: normal;
  font-weight: 400;
  src: local('Exo Regular'), local('Exo-Regular'), 
url(https://fonts.gstatic.com/s/exo/v4/kA_pX0U45Eb7PbHijV1x2w.woff2)
 format('woff2');
}
</style>

5. Complete Step 4 and click save.

6. Now this is the most important step because here is where we change any already font to the one you just created. If you’re trying to use it for a specific section of your website.

READ:  Best Metrics Tool For Blogspot Bloggers

E.g Website Header, text style, etc you can declare it this way font-family: ‘Exo’, sans-serif; or font-family: “Exo”,Helvetica,Arial,sans-serif; but if you trying to use it on the whole of your blog, just find the .body section in your website CSS.

If you’ve issues with step 6, use Inspect Element features on your web browser to break everything down and preview how it’ll look after a successful editing.

Doesn’t matter if you’re new to this or not, you just need to believe you can do this yourself  but if you think you can’t, contact me I’ll surely attend your queries.

Love this? Share with your your friends and comment :).

 

Summary
How To Set Custom Fonts On Your Website
Article Name
How To Set Custom Fonts On Your Website
Author

LEAVE A REPLY

Please enter your comment!
Please enter your name here