ADVERTISEMENT
ADVERTISEMENT

How to use Google Fonts in CSS?

Learn about the Google fonts and how to use Google Fonts in CSS?
Submitted by Shahnail Khan, on April 22, 2022

Typography is one of the most important aspects of web design. The text on our webpage makes our website stand out. With the help of CSS, we can change the font style, font size and color of the text. Though there are a lot of standard fonts in HTML, we sometimes need Google fonts for elegant design. We can paste the URL of the desired google font inside the <link> tag to use on our website.

We need to specify font- family along with the fallback font also.

Example 1:

<!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.0">
      <title>Google Font </title>
   </head>
   
   <link href="https://fonts.googleapis.com/css2?family=My+Soul&display=swap" rel="stylesheet">
   
   <style>
      body{
      font-family: 'My Soul', sans-serif;
      font-size: xx-large;
      color: blueviolet;
      } 
   </style>
   
   <body>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Atque, facere! 
   </body>
</html>

Output:

Example | Use Google Fonts in CSS

Here, we have used font named "My Soul" from Google fonts. A generic font name, namely, sans-seif is used.

Example 2:

<!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.0">
      <title>Google Font </title>
   </head>
   
   <link href="https://fonts.googleapis.com/css2?family=
      Architects+Daughter&family=My+Soul&family=Square+Peg&display=swap" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css2?family=Architects+Daughter&family=
      Ballet&family=My+Soul&family=Square+Peg&display=swap" rel="stylesheet">
	  
   <style>
      body{
      background-color: yellow;
      border: 2px solid black;
      }
      h1{
      font-family: 'Square Peg', serif;}
      span{
      font-family: 'Ballet', cursive;   
      font-size: 50px;
      } 
   </style>
   
   <body>
      <h1>Welcome to IncludeHelp</h1>
      <span>IncludeHelp can make you an expert in programming </span>
   </body>
</html>

Output:

Example | Use Google Fonts in CSS (2)

Here, we have used 2 font names: Square Peg and Ballet. The "Square Peg" and "Ballet" Google Fonts are used for the <h1> and <span> respectively. The generic font names are serif and cursive.

CSS Tutorial & Examples »


ADVERTISEMENT
ADVERTISEMENT


Comments and Discussions!



ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT

Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates

© https://www.includehelp.com some rights reserved.