How to add multiple Google fonts with CSS HTML
Google Fonts is a popular web font service that allows you to easily add custom fonts to your website. To add multiple Google Fonts to your HTML document using CSS.
To add multiple Google Fonts to your HTML document using CSS, you can follow these steps:
- Go to the Google Fonts website.
- Browse or search for the fonts you want to use and select them. You can select multiple fonts by clicking the "+" button next to each font.
- Click on get started button at the bottom right corner of the page to open the font selection panel.
-
In the font selection panel, you will see a section called "Embed".
Here, you can choose between two options: `` or `@import`.
- If you choose ``, copy the provided `` tag.
- If you choose `@import`, copy the provided `@import` rule.
-
Paste the link tag into the
<head>section of your HTML document or the `@import` rule into your CSS file. - Use the font-family in your CSS styles.
Example of using multiple Google Fonts in CSS:
If you selected three fonts named "Font1", "Font2", and "Font3", your
HTML `
```css
body {
font-family: 'Font1', sans-serif;
}
h1 {
font-family: 'Font2', serif;
}
p {
font-family: 'Font3', monospace;
}
```
Remember to replace "Font1", "Font2", and "Font3" with the actual names of the fonts you selected from Google Fonts.
Watch video tutorial for more detail: How to add multiple Google fonts with CSS HTML in Khmer.
Boost your HTML skills: 🚀 HTML Tutorials in Khmer (with Video)
Free Khmer Ebook Download (PDF): Database | Microsoft Access | Python Programming