By /

CSS Google Font

Using CSS Google Fonts is a straightforward way to enhance the typography of your website. Here’s how you can do it:

  • Purpose:

    • To embed and apply custom fonts from Google’s font library to your website, enhancing typography and visual appeal.

  • Values:

    • Font Family Name: The specific font name (e.g., ‘Roboto’, ‘Open Sans’).
    • Font Weights: Numerical values or keywords representing font thickness (e.g., 400 for regular, 700 for bold).
    • Font Styles: ‘normal’, ‘italic’, ‘oblique’.
    • Font Display: ‘swap’, ‘block’, ‘fallback’, ‘optional’, ‘auto’.

Example:

/* Embed the font via @import or <link> in HTML <head> */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
p {
   font-family: 'Roboto', sans-serif; /* Apply Roboto, fallback to sans-serif */
   font-weight: 400; /* Regular weight */
   font-size: 16px;
   line-height: 1.5;
}
h1 {
   font-family: 'Roboto', sans-serif;
   font-weight: 700; /* Bold weight */
}

Explanation:

This CSS snippet first imports the “Roboto” font with regular (400) and bold (700) weights. Then, it applies the “Roboto” font to all <p> elements with a regular weight, specific font size, and line height. It also applies the “Roboto” font with a bold weight to all <h1> elements. If “Roboto” fails to load, the browser will use a generic sans-serif font as a fallback.

Scroll to Top