February 13, 2020 0

Embed Google font in static website

Embed Google font in static website


Hi, my name is Bibek and in this session
I’m going to show you how to add Google font in your static HTML and CSS website.
Here I have got a very basic page with title and content. Using Google font I
want to add serif font for title and sans serif font for content. Now let’s open
Google font in your browser. You can type fonts.google.com Then you can see a list of many
available fonts here. If you know any font name that you want to use then you
can simply search here like Roboto or open sans or so on. Or if you want to
search by category type, then you can click on categories and select any one
of them. Here I want to add serif font for my title so I will uncheck
everything and select only serif font type. You can also search fonts based on
language you select over here or any font properties like number of style,
thickness or you can also sort it out by different options like trending now, most
popular, newest and so on. Currently all these results are showing based on serif font type. I will select any one for title. I will use this robot slab so I
will click on this little plus icon. Now you can see that this font is
already stored over here. We will customize this shortly after we select
sans-serif font for our content so let’s do it in a similar way. This time I will choose this open sans
font so I will again click on this small plus icon. Now you can see two fonts are
stored at the moment. Let’s customise it by clicking on this customise tab, then
you can select different font weight for different font families. For open sans
I’m happy to use regular font weight so I won’t make any changes here but for
Roboto slab I want to use bold instead of regular so let’s change it now. Once
you are happy with customisation you can click on this embed tab, then copy this link and paste it inside
yourtag in your index.html Now these fonts are available to use in
your CSS so let’s use them and look at the preview. This is for the heading and this is for the content. Great!! If you ever want to customise
it then go back to google font, click on this customize tab again and then you
can make some changes like I want to use light font weight instead of the regular.
Once you are happy, click on this embed tab again and copy this link and replace it
over here. Now you can look at your preview. Here you go. This is the end of this
session. Feel free to comment below if you got any questions. Also please don’t
forget to like and subscribe to my channel to get more tutorials in the
future. Thank you.

Leave a Reply

Your email address will not be published. Required fields are marked *

© Copyright 2019. Amrab Angladeshi. Designed by Space-Themes.com.