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.
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:
- Navigate to Google Fonts by clicking here.
- Find the font you’ll like to use then click on the font, it should appear as below. :Since I choose Exo earlier, I used the search feature
- Click the “+” button and this should appear:For the nerds, the CSS gurus, you know what’s next to do here but if you’re not, please proceed to Step 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.
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
<<span class="start-tag">style</span> <span class="attribute-name">type</span>='<a class="attribute-value">text/css</a>'>
src: local('Exo Regular'), local('Exo-Regular'),
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.
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 :).