CSS fonts

CSS fonts

Fonts are an important element in any design, and CSS is no different. Choosing the right font can make a big difference to the readability and overall appearance of a website. Fortunately, CSS offers many options for working with fonts.

Default fonts

When it comes to fonts, it's important to remember that not all users will have the same fonts installed on their computers. To ensure your site's text is readable by everyone, it's important to include standard fonts in your stylesheet. The default fonts are those that come pre-installed on most operating systems, such as Arial, Times New Roman, and Verdana.

To use default fonts on your site, just specify the font name in your stylesheet:

body {
    font-family: Arial, sans-serif;
}

In this example, the Arial font will be used if it is installed on the user's computer. Otherwise, the browser will use the operating system's default sans-serif font.

Custom fonts

If you want to use a non-default font, you can use custom fonts on your site. There are two ways to do this: by embedding the font on your website or using a hosted font.

Embedding font

To embed a font on your website, you will need to download the font and add it to your website folder. Next, you'll need to specify the font in your stylesheet using the @font-face rule:

@font-face {
    font-family: 'MyFont';
    src: url('mysource.ttf');
}

In this example, the font MyFont will be embedded in the site and may be referred to by the name 'MyFont' in your stylesheet.

Using a hosted font

If you don't want to embed the font on your website, you can also use a hosted font. There are many font hosting services available such as Google Fonts and Adobe Fonts.

To use a hosted font, simply add the link to the font in your stylesheet:

In this example, the Roboto font will be hosted by Google Fonts and can be referenced in your stylesheet.

Specifying fonts

Once you have your fonts available, it's time to specify them in your stylesheet. There are several CSS properties you can use to specify fonts:

font-family

The font-family property specifies the font that will be used for the text. You can specify multiple fonts to ensure the text is readable on different operating systems:

body {
    font-family: Arial, sans-serif;
}

font-size

The font-size property specifies the font size in pixels, emems, or percentage:

h1 {
    fontsize: 36px;
}

font-weight

The font-weight property specifies the weight of the font. Common values ​​are normal and bold:

h1 {
    font-weight: bold;
}

font-style

The font-style property specifies the font style. Common values ​​are normal and italic:

in {
    font-style: italic;
}

text-transform

The text-transform property specifies how the text should be transformed. Common values ​​are uppercase, lowercase, and capitalize:

h1 {
    text-transform: uppercase;
}

Conclusion

In summary, fonts are an important element in any design and in CSS there are many options for working with them. It's important to remember to include default fonts on your site to ensure the text is readable for all users. If you want to use a custom font, you can either embed it on your website or use a hosted font. And finally, there are several CSS properties you can use to specify the font, including font-family, font-size, font-weight, font-style, and text-transform.

Next page of the Free Ebook:

11CSS text styling

4 minutes