Tag Archives: Web based fonts

Using Custom fonts in Website / Google Webfonts

How to embed custom fonts in your website?

Hey guys! Few days ago, I found this wonderful website which lets you embed custom/non-standard fonts into your website and hence make your website more professional and attractive. I found it very awesome because of its ease of use and doesn’t require almost none programming needs.

Well, I am sharing it with you all so that you also get benefited. It is really very simple, open source and 100% working

Google Webfonts Logo

Step 1. Go to Google Web fonts website https://www.google.com/webfonts

Google Webfonts Landing Page

Click ‘Start choosing fonts’ button and you are presented to the page as shown in the next image:

Google Webfonts Homepage

Step 2: Browse and select the font which you want to use in your website.

Google Webfonts Select Font

Step 3: Click ‘Quick Use’ link.

It will take you to a new page like shown below.

Google Webfonts Page Load estimation

Step 4: If there are variants of the font, it will be listed and you can select which one(s) you want to use.

Google Webfonts Choose font type

When you scroll down on the same page, you’ll see its implementation method. I recommend you to use the ‘standard’ one as it is simple and less time consuming.

Google Webfonts Implementation code

Step 5: Next you can see how to use it in your CSS.

Google Webfonts Implementation in CSS

That’s all. I hope you enjoyed this and learnt something new.

Disclaimer: Google, Google Webfonts and Related Google Logos or screenshots belong to their respective owners. We are using them for educational purpose only and not any commercial use.

Download as PDF