11 Jul CSS Fonts

Under this section, we will see how to work with the font on our website. CSS Fonts have amazing properties such as changing the font family, making font italic or bold, font size, etc.

CSS font-style Property (Set Font Style)

Let’s first start with the font-style property under CSS Fonts. Set three values for font style i.e. normal, italic, and oblique.

Font Normal Style

Here, you can see we have set the normal style, so it looks like the normal basic style of content. The following is an example:

Here’s the output,

Font Oblique Style

Here, you can see we have set the oblique style. It looks like italic, but it isn’t. Have a look,

Here’s the output,

Font Italic Style

Here, you can see we have set the italic style:

Here’s the output,

CSS font-family property (Set Font Family)

Well, if you do not like the default font, then set the CSS fonts with font-family property. In CSS, you can add a specific font family such as Arial, or you can add a group of font families.

Set more than one font family in a comma-separated list, for example

Let’s see how to work with font family,

CSS font-weight Property (Set Font Weight)

With the HTML font-weight property, you can set the weight of the font. Specify normal font as well as bold font or values like 500, 800, 900, which means how much bold weight you want for your font.

Let’s see an example to implement the font-weight property:

Here’s the output,

In the above figure and code, you can see we set the font weight to bold, normal, and lighter to see the difference.

CSS font-size Property (Set Font Size)

Here, we will learn how to set the font size for our website using the font-size property. Set the size in px or %. Additionally, here are the other values, which can be used accordingly for your website design: xx-small, x-small, small, medium, large, x-large, xx-large, etc.

Let’s work around some examples,

Here’s the output,

In the above figure and code, we worked around varied font sizes to learn about the difference. Firstly, we went for font size, and then we saw medium, smaller, and x-large font sizes.

em Font Size

Above, we learned about font sizes in px. Now, we will learn how to set font size using the em unit. Nowadays, many developers and designers use em.

Note: 1 em is equal to 16px.

Let’s say you want a font of 18px, so you can easily calculate it like the following,

So, you need to set the font-size to 1.125em, with the above calculations. Here’s the complete code,

Here’s the output,

CSS font-variant Property (Set Font Variant)

Use the font-variant property to set the variant. With variant, you can give values like normal and small-caps for normal font and font in small caps respectively.

Here’s the output,

In this lesson, we learned how to change the font family, font size, font style, etc.