Shopping Cart

Get Amazing Offers on Scripts

Get UX Support

How to use google fonts in your website

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

Your email address will not be published.

Free Worldwide shipping

On all orders above $50

Easy 30 days returns

30 days money back guarantee

International Warranty

Offered in the country of usage

100% Secure Checkout

PayPal / MasterCard / Visa