How To Use Google Fonts On Your Website

Google fonts is a service provided by Google that allows users to browse various types and styles of fonts. Users can use Google Fonts to beautify their websites, webpages. In this article I will show you how to use Google Fonts for your website or webpages:

To use Google Fonts you need first to visit the service page at https://fonts.google.com.

Main Page of Google Fonts

Then choose the font you like and would like to use for your website. Also, you can search for a specific font instead of browsing the available fonts. You simply just have to type in the key search in the search bar(input) and choose your font by clicking on the box that contains the font.

Then, you will be directed to this page where you can select the selected font options. Once you select your option, you will have to click on the icon the right corner of the page to view the selected fonts.

In this side bar you will have your code ready to be copied and paste in between your head tags, this code is the call of the stylesheet, specifically calling the your font. In this bar if you scroll down a little bit, also you will find the code of the style. Moreover, in this bar you will have the option to change the code structure that if you wish to call the font from the stylesheet (CSS File) instead of the html file or between the head tags. To do so, you will just need to select the option @import.

The final step is to paste the code to your webpage, so if you chose to put the code in the html file or between the head tags, it would like like this:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="">

    <!--Under this paste your code -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Gemunu+Libre&display=swap" rel="stylesheet">
  </head>
<body>

However, if you chose to paste the code in the css file, then you need to paste in the very top of the .css file.

In both ways you will have to specify the font in the “font-family” like this:

body {
   font-family: 'Gemunu Libre', sans-serif;
}
google fonts | how to | web

Leave a Comment

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

Shopping Cart