CSS Fonts

CSS Fonts

Under this section, we will see how to work with font on our website. CSS Fonts has quite awesome 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 font-style under CSS Fonts. You can 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.

Here’s the output,

CSS Fonts normal styling

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,

CSS Fonts oblique styling

Font Italic Style

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

Here’s the output,

CSS Fonts italic styling

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 family

CSS font-weight Property (Set Font Weight)

With the HTML font-weight property, you can set the weight of font. You can 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,

Here’s the output,

CSS Font Weight property

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 font size for our website using 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,

CSS Font Size property

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 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 size em unit

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,

CSS Font Variant property

In this lesson, we learned how to changefont family, making font italic or bold, font size, etc.

CSS Text Properties
CSS Links
Studyopedia Editorial Staff
Studyopedia Editorial Staff
[email protected]

We work to create free tutorials for all.

No Comments

Post A Comment