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

Friday, July 23, 2021

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

2 comments:

  1. City BookAugust 18, 2020 at 9:06 AM

    Thanks for posting this info. I just want to let you know that I just check out your site and I find it very interesting and informative. I can't wait to read lots of your posts.
    concerts in lahore

    ReplyDelete
  2. bogsspecialistMarch 17, 2021 at 7:20 AM

    I was more than happy to uncover this great site. I need to thank you for your time due to this fantastic read!!
    I definitely enjoyed every bit of it and I have you bookmarked to see new information on your blog.
    Classified WordPress Theme

    ReplyDelete

Subscribe to: Post Comments (Atom)

Search This Blog