How to use Google Fonts in CSS?

Google fonts in CSS: In this tutorial, we will learn about Google fonts and how to use Google Fonts in CSS. Learn with the help of examples. By Shahnail Khan Last updated : July 12, 2023

Google Fonts in CSS

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:

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:

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 Examples »

Which characters are valid in CSS class names/selectors?

What does the '+' (plus sign) CSS selector mean?