CSS Fonts: family list style size weight variant examples

CSS Fonts provide a way of styling text, styling the font is a whole category in itself.

CSS can alter the font family, size, boldness, and text style. Some of the CSS properties we’ll study here are:

  • font-family
  • font-style
  • font-size
  • font-weight
  • font-variant

CSS font-family

Font families have two types in CSS:

generic family: A look-wise group of fonts like Serif or Monospace
font-family: Specific families for a different type of fonts like Verdana and Times New Roman

The font-family property has what is called a ‘fallback’ system. As per this feature, if the browser does not support the

specified font, it tries the next possible font to render the text.

Thus, while giving the value to this property, we start with the specific font and then carry on to the end with the generic family so that the browser can choose from the available options.

CSS font family list

Sr NoGeneric Font FamilyFont NamesTry It
1SerifTimes New RomanTry It
GeorgiaTry It
GaramondTry It
2Sans-serifArialTry It
VerdanaTry It
HelveticaTry It
3MonospaceCourier NewTry It
Lucida ConsoleTry It
MonacoTry It
4CursiveBrush Script MTTry It
Lucida HandwritingTry It
5FantasyCopperplateTry It
PapyrusTry It

CSS change font Example

CSS font-style

It is mostly used to italicize the text.

We can provide three values here:
normal: No italics
italic: Renders in italics style
oblique: Somewhat similar to italics but not supported by all browsers

CSS font-size

The font-size can be of two types – Absolute and Relative.

Absolute size: The Absolute size is given when you know the physical size of the output. Since the physical size is given here, the size remains the same and unchangeable for all the browsers.

Relative Size: On the other hand, Relative size is more flexible as it is set as per the surrounding elements and also allows the user to change the size of the browser. Some permissible values are:

Pixel length: Given in px
em: It comes under the relative category. 1em is equal to the current size of the font. Since, the default font-size is 16px, we often consider 1em=16px and therefore we can calculate the relation as pixels/16=em.

Percentage: If you put the default font-size in the percentage you and rest in em everywhere else, your font size would work in all browsers.

VW: The ‘viewport-width’ value allows the font to follow the size of the browser. This resizing of the browser will automatically resize the font’

CSS font-weight

Basically, alters the boldness. The value can either be normal or bold.

CSS font style bold

font-weight: bold;

CSS font-variant

The font is rendered in small caps when all the characters are in upper caps and the first letter in each word is slightly larger than the subsequent ones.

This can be done using the font-variant property.

CSS Fonts

we can combine all properties in using CSS fonts

What are the font attributes in CSS

attributes are the additional data used with HTML tags. In CSS we call properties.

Font properties are

  1. font-family
  2. font-style
  3. font-size
  4. font-weight
  5. font-variant

Which CSS attribute would change an element’s font color to blue?

The CSS color property would change an element’s font color to blue color: blue;

How to change font color in CSS

Use CSS color property to change font color in CSS. color: red;

Read More

CSS Buttons

The Ultimate CSS Tutorial for Beginners and Experts | Ebhor