Tech Junkie Blog - Real World Tutorials, Happy Coding!: CSS: Using Google Fonts

Thursday, September 19, 2019

CSS: Using Google Fonts

In this post we are going to use Google Fonts in our HTML markup, using Google Fonts is really easy to do.  All you have to do is go to then select the fonts that you would like to use.  Let's we want to use the Manjari, then All we have to do is click on the + sign next to the font.

After you click on the + sign a pop-up with the instruction to use the font appears.  You can either link to the font or use the @import tag

Here is the link example

Basically you put the link code in the <head> tag and use the font like any other font-family.
And the same thing with the import tag.  Except you do it in the <style> tag

Here is an example of the code to use the Manjari Google Fonts code in an HTML page.

        Google Fonts
    <link href="" rel="stylesheet">
        h1 {font-family: 'Manjari', sans-serif;}
        <h1>This is an example of<br/> Manjari Google Fonts</h1>

Note:  You can customize the font further by selecting the "Customize" tab on the Google Fonts website

Your embed code will change according to your customization

Previous: CSS: text-transform

1 comment:

  1. I am really impressed the way you have written the blog Thank you so much for sharing the valueable post, I appreciate your hard work.Keep blogging.
    Angular JS Training in Electronic City
    Angular JS 2&4 Training in Electronic City


Search This Blog