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 No | Generic Font Family | Font Names | Try It |
|---|---|---|---|
| 1 | Serif | Times New Roman | Try It |
| Georgia | Try It | ||
| Garamond | Try It | ||
| 2 | Sans-serif | Arial | Try It |
| Verdana | Try It | ||
| Helvetica | Try It | ||
| 3 | Monospace | Courier New | Try It |
| Lucida Console | Try It | ||
| Monaco | Try It | ||
| 4 | Cursive | Brush Script MT | Try It |
| Lucida Handwriting | Try It | ||
| 5 | Fantasy | Copperplate | Try It |
| Papyrus | Try 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
- font-family
- font-style
- font-size
- font-weight
- 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
The Ultimate CSS Tutorial for Beginners and Experts | Ebhor
Reference