How to use google fonts in your website

0
114
views
google fonts

Today, I am going to show you, How to use google fonts on your websites. Fonts are playing the main role when it comes to User Experience. In this tutorial. I am going to show you,  how google fonts work and how you can easily integrate into your HTML, CSS Or  Reactjs websites.

what is the difference without google fonts and with google fonts?

1.Without Google fonts
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Welcome to Tutorialslides.com </title>
  </head>
  <body>

    <h1>Hi welcome to Tutorialslides.com</h1>


  </body>
</html>
Output
without google fonts
without google fonts
2.With Google fonts
<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Welcome to Tutorialslides.com </title>

      <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">

      <style>
         h1 {
         font-family: 'Roboto', sans-serif;
         }
      </style>

   </head>
   <body>

      <h1>Hi welcome to Tutorialslides.com</h1>

   </body>
</html>
Output
with google fonts
with google fonts

How to integrate single font from google fonts step by step tutorial?

Step 1

Go to https://fonts.google.com

google fonts website
Google fonts website
Step 2

Select a Google font, Here I am selecting Roboto Font.

select a google font
select a google font
Step 3

Select a Google font, Here I am selecting Roboto Font.step-4

Step 4

Click Family selected tab.

step 5

Step 5

Now copy the code and paste it on your HTML and CSS code Like given below.

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Welcome to Tutorialslides.com </title>
      <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
      <style>
         h1 {
         font-family: 'Roboto', sans-serif;
         }
      </style>
   </head>
   <body>
      <h1>Hi welcome to Tutorialslides.com</h1>
   </body>
</html>

 

Want to add Multiple Google Fonts on your website?

Just simply select multiple fonts like this.select-font

select-font-7

 

 

LEAVE A REPLY

Please enter your comment!
Please enter your name here