📜  html css add Avenir light font - CSS (1)

📅  最后修改于: 2023-12-03 15:15:33.368000             🧑  作者: Mango

HTML CSS Add Avenir Light Font - CSS

As a programmer, you may want to add custom fonts to your website to create a unique look and feel. Avenir Light is a popular font choice due to its elegant and modern style.

Fortunately, adding Avenir Light or any other Google font to your HTML CSS is easy. Here's how:

Include Google Font API

To use Google Fonts, you need to include Google Font API in the head section of your HTML document. Use the following link to include the Google Font API:

<link href="https://fonts.googleapis.com/css2?family=Avenir+Light&display=swap" rel="stylesheet">

Here, we're using the font family name "Avenir Light" and the display=swap property to prevent text reflow during loading.

CSS Declaration

Once the Google Font API is included, you can use the font in your CSS declarations. For example:

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

This will set the font family of the entire HTML document body to 'Avenir Light'.

Conclusion

Adding Avenir Light or any other font to your HTML CSS is a quick and easy way to improve the look and feel of your website. By following these simple steps, you can customize your website's font to match your desired style.

# HTML CSS Add Avenir Light Font - CSS

As a programmer, you may want to add custom fonts to your website to create a unique look and feel. Avenir Light is a popular font choice due to its elegant and modern style.

Fortunately, adding Avenir Light or any other Google font to your HTML CSS is easy. Here's how:

## Include Google Font API

To use Google Fonts, you need to include Google Font API in the `head` section of your HTML document. Use the following link to include the Google Font API:

```

Here, we're using the font family name "Avenir Light" and the display=swap property to prevent text reflow during loading.

CSS Declaration

Once the Google Font API is included, you can use the font in your CSS declarations. For example:

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

This will set the font family of the entire HTML document body to 'Avenir Light'.

Conclusion

Adding Avenir Light or any other font to your HTML CSS is a quick and easy way to improve the look and feel of your website. By following these simple steps, you can customize your website's font to match your desired style.