CSS How to Import Google Fonts

What are Google Fonts?

Google Fonts is a library of over 1000+ free, open-source fonts. You can use these fonts on your website to make your website’s text look great.

How to Import Google Fonts

Visit the Google Fonts website (fonts.google.com) and browse or search for the font you want to use.
Click the “+” button next to the font you want to add to your collection.
Once you have added all the fonts you want to use, click the “Use” button in the bottom right corner of the screen.
Select the styles and character sets you want to use, and copy the code provided in the “Embed” tab.
Paste the code into the head section of your HTML file, or into a separate CSS file.
In your CSS code, specify the font family for the elements you want to use the Google Font for. For Example:

body {
  font-family: 'Sofia', sans-serif;
}

Here, we have specified the font family to be “Sofia”, which is one of the fonts available in the Google Fonts library. If the user’s browser does not support this font, it will fall back to the default sans-serif font.

In an example below let’s write a code to use a font named “Sofia” from google fonts.

Example

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
  font-family: "Sofia", sans-serif;
}
</style>
</head>
<body>
<h1>Sofia Font</h1>
<p>Some text heerti veetsc bvvvc.</p>
<p>542799531</p>
</body>
</html>

Copy the Code and Run it Here

Similarly, you can import any other google font that you love.

Previous

Next