How to use Google fonts in CSS
Google Fonts is a free and extensive library of fonts provided by Google. It allows web developers to easily embed custom fonts into their web pages. Bellow are some information about using Google Fonts in CSS.
To use Google Fonts in your CSS, follow these steps:
- Choose a Google Font:
- Visit the Google Fonts website (https://fonts.google.com/) and browse through the extensive collection of fonts available.
- Select the font(s) you want to use by clicking the “+ Select this style” button for each font. The selected fonts will be added to your collection.
- Obtain the Font Link:
- After selecting the desired fonts, click the black bar that appears at the bottom of the page to open the “Family Selected” tab.
- In the “Family Selected” tab, you will see a
<link>tag containing the font styles you have chosen. Copy this<link>tag to your clipboard.
- Add the Font Link to Your HTML File:
- In the
<head>section of your HTML file, paste the<link>tag you copied. This will link your web page to the selected Google Fonts, allowing you to use them in your CSS.
Example of adding Google Fonts to your HTML file:
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap">
</head>
<body>
<!-- Your content goes here -->
</body>
</html>- Use the Google Fonts in Your CSS:
- Now that you have linked the Google Fonts in your HTML file, you can use them in your CSS by specifying the font-family you want to apply to your elements.
Example of using Google Fonts in your CSS:
body {
font-family: 'Open Sans', sans-serif;
}
h1 {
font-family: 'Open Sans', sans-serif;
font-weight: 700; /* Specify font weight if different from default (400) */
}In this example, we linked the “Open Sans” font family from Google Fonts using the provided <link> tag. We then applied the “Open Sans” font to the body element and made the h1 element use the “Open Sans” font with a bold font weight (700).
Using Google Fonts in CSS is a straightforward way to access a wide variety of high-quality fonts for your web projects. Remember that the fonts will be downloaded from Google’s servers, so ensure your website has an internet connection for the fonts to display correctly.