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 https://fonts.google.com/ 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.


<!DOCTYPE>
<html>
<head>
    <title>
        Google Fonts
    </title>
    <link href="https://fonts.googleapis.com/css?family=Manjari&display=swap" rel="stylesheet">
    <style>
        h1 {font-family: 'Manjari', sans-serif;}
    </style>
</head>
    <body>
        <br/>
        <h1>This is an example of<br/> Manjari Google Fonts</h1>
    </body>
</html>












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

No comments:

Post a Comment

Search This Blog