CSS Font
By Tony 8.2.2024
A website is really boring without some font. Content is the core of all websites, especially text. To make text easier to read, more pleasing to look at, or pop out, you can use CSS font to style their sizes, styles, font library, and more.
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
font-weight: bold;
font-style: italic;
font-variant: small-caps;
These are the most common and useful CSS properties for styling fonts and text on your page. The font-family property sets the actual font of the text. It can be the serif, sans-serif, or monospace famamilies. You can also set other fonts if you import them. The font-size property sets the size of the text according to each letter's height. The font-weight property sets the bolding of the text. It can also be number values from 100 to 900. The font-style property sets whether or not you want the text to be italicized or obliqued. The font-variant property is a little advanced, in which it sets the different variants of the font. The rule font-variant: small-caps; sets all the non-caps letters to caps, except smaller in size. Here's an example of all the font properties:
In the above example, we set the <p> tag's font (font-family) to Arial, Helvetica, sans-serif. We also used the font-size property to make the size 20px. We used the font-weight and font-style properties to make the text bolded and italicized. We used the font-variant property to make all lowercase letters caps, but smaller. Feel free to change up the values of these rules to explore the wide variety of styling options CSS font really gives you. Have fun styling text!