How to Effectively Embed and Use Google Fonts on a Website

How to Effectively Embed and Use Google Fonts on a Website

Launched in 2010, Google Fonts is one of the biggest and most popular font library today, it not only full-fills the font needs of the industry but also provide immense growth opportunities for the font designers.

Google fonts provides download and embed options for making the use of font-families. It’s very easy to download and install the fonts on a system, but embedding them on a website can be tough for some people especially the ones without code knowledge.

It’s very simple. Just follow the steps below –

Step 1: Go to Google Fonts

When you will land on Google Fonts, you will be able to see the fonts very well arranged in a Grid, and also categorized by names.

Step 2: Click on Any Font You Want to Select

It will take you to the font’s itself specific page, where the font will further be divided into the multiple styles (Like Thin, Light, Regular, Bold, Black, etc.), one style on one line, you will also find a + select style button on each line.

Step 3: Select A Style

Step 4: Click on the Embed Tab

Step 5: Copy the values of Link Property

Step 6: Open the Index or Header File of Your Website (or Theme)

Step 7: Paste the Values Before </head> and it’s done!

Now after the completion of the 7th step, you will find the google font successfully embedded on your website. Now to start using it you will have to style the HTML elements through CSS. See an example below:-

h2{font-family: ‘Noto Sans’, sans-serif;}


Share This: