Google Fonts is a free online library of hundreds of web fonts that you can use in your CSS stylesheets. Here’s how you can add Google Fonts to your website:
- Go to the Google Fonts website at fonts.google.com.
- Browse or search for the font that you want to use.
- Select the font(s) that you want to use by clicking the “plus” icon next to each one.
- Click the “selected” icon at the bottom of the page to view your selected fonts.
- Choose the styles and character sets that you want to include.
- Copy the code provided in the “Embed” section of the page.
- Paste the code into the
<head>section of your HTML document. - Add the font to your CSS stylesheet using the
font-familyproperty.
Here’s an example of how to use Google Fonts in your CSS stylesheet:
/* Add the Google Font to your stylesheet */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
/* Use the Google Font in your styles */
body {
font-family: 'Open Sans', sans-serif;
}In this example, the @import rule is used to import the font from the Google Fonts website, and the font-family property is used to apply the font to the body element.