Earlier last week, I shared a tutorial with you on how to use custom fonts on your website to get the desired result on your webpages. Regarding that, one of the readers emailed me asking to share a tutorial on how to use Google fonts in your website design. I thought of sharing this tutorial with everyone, and hence this post. Before I get into the steps to follow, let me tell you what are Google fonts.
Google fonts is a collection of various fonts that you can use for free in your websites, and the fonts are hosted on the powerful, high-speed, and always available Google servers. You can simply link a specific CSS stylesheet on your webpage, or import it into your existing CSS file, and then specify the font for the elements you wish to specify. It’s as simple as that.
You might be interested in these posts as well. Have a look.
- Using Custom Fonts in your Website using CSS
- Difference Between CSS Class and ID : I bet you did not know this
- Change the default CSS Selection colour
Using Google Fonts on your Website
In order to use Google fonts on your website, there are three ways in which you can do that, and frankly speaking, it makes no difference generally whichever way you wish to use.
- Import the CSS stylesheet for the font inside your main CSS file
- Externally link that CSS file to your HTML content
- Externally link that CSS file to your HTML via JavaScript
But before you do any of the above mentioned things, you need to browse for the font that you like the most, and then import the specific styling for that font. Let’s get started on that procedure now.
1. Head over to the Google Fonts directory by clicking here.
2. Next, browse for the font that you want to use. If you want to use only one single font, click on “Quick Use“, but if you want to use more than one font, click on “Add to Collection“.
3. When you are done browsing the fonts, go ahead and click on Use in the Collections tab at the bottom of the screen, if you added any fonts to the collection.
4. Now, the rest of the procedure is common for collections and single use fonts. On the page that appears on your screen, you will need to select the variants of the font that you want to use. Choose the variants that you want to use, so that you don’t impact your website loading time.
5. Next, choose the character sets you want, based on the language that you want to use this font in. Again make sure to check the ones that you want only so that you don’t impact the loading time of your website.
6. Now, you need to decide which way you want to implement it on your website.
- If you decide on importing the stylesheet via the CSS of your website, copy the code from the “@import” tab from the page, and paste it into your existing stylesheet. It is advisable to put that code at the beginning of your CSS file.
- If you decide to go with externally linking the CSS file, copy the code from the “Standard” tab on the page, and including it on your webpage, just before closing the head tag.
- Lastly, if you decide to go with the JavaScript way, copy the code from the “JavaScript” tab and put it on your website just before closing the head tag, or at times you can also experiment by placing it just before closing the body tag as well.
7. The last thing to do is to apply the font that you selected to the specific element on your webpage. To do this, copy the font-family code that Google fonts give you, and put it in your CSS file, respective to that element. For example, if you want a font for all headings, the code would be something like this.
h1,h2,h3,h4,h5,h6{
font-family: 'Open Sans', sans-serif;
}
That’s it. This is how you can include Google fonts in your website, or webpage and easily use them without any trouble. I would be sharing another tutorial s0on, using which you can create your own fonts to be used on the web. Keep looking around at Slash Coding to find that article very soon. Don’t forget to subscribe to Slash Coding for latest post updates via RSS Feeds, Facebook, Google+ or Twitter.
