CSS fonts allows to customize font style of webpages using various font related properties. In this tutorial we will understand the font styling in CSS.
What is CSS Font?
In CSS, the font property is used to style and adjust type of text used in webpage.
You can define fonts and customize their appearance by setting properties like font-family, font-size, font-weight and font-style. You can also use the shorthand property font to manipulate all the font style.
Types of CSS Fonts
- Monospace Fonts: The font in which every letter have equal width.
- Serif Fonts: Have small stroke at the edge of each letter.
- San-Serif Fonts: Clean fonts with out any strokes.
- Fantasy Fonts: Decorative fancy fonts.
- Cursive Fonts: The font that resembles human handwriting.
Popular CSS Fonts
Here is a table with some popular font and their generic font-family.
| Generic Font Family | Examples of Font Names |
|---|---|
| Serif | Times New Roman Georgia Garamond |
| Sans-serif | Arial Verdana Helvetica |
| Monospace | Courier New Lucida Console Monaco |
| Cursive | Brush Script MT Lucida Handwriting |
| Fantasy | Copperplate Papyrus |
Setting Text Fonts
The font-family property is used to specify font name for a text content.
Example
In this example, we have used the font-family property to set the font of the paragraph element.
<html><head><style>p { font-family: Lucida Handwriting, Cursive; } </style></head><body><p > This is a font that written in Lucida Handwriting. THis is a font that looks like human handwriting. </p></body></html></pre>Setting Text Font Size
To set the font size of the text, we use font-size property. You can use its values such as small, medium, and, large to get a variety of font sizes of the text.
Example
In this example, we have used the font-size property with its different values to set the size of the text.
<!DOCTYPE html><html lang="en"><head><title>Font Size Example</title><style>.small { font-size: small; }.medium { font-size: medium; }.larger { font-size: larger; }.px { font-size: 18px; }.percent { font-size: 120%; } </style></head><body><h2>CSS Font-Size Examples</h2><p class="small">This text has a 'small' font size.</p><p class="medium">This text has a 'medium' font size.</p><p class="larger">This text has a 'larger' font size.</p><p class="px">This text has a font size of 18px.</p><p class="percent">This text has a font size of 25%.</p></body></html></pre>Setting Font Weight
You can use the font-weight property to set the boldness of the text.
Example
In this example, we have used the font-weight property to set the boldness of the text. The valid numeric value is from 100-900 for number class.
<!DOCTYPE html><html lang="en"><head><title>CSS font-weight Property Example</title><style>.normal { font-weight: normal; }.bold { font-weight: bold; }.lighter { font-weight: lighter; }.number { font-weight: 600; } </style></head><body><h2>CSS font-weight Property</h2><p class="normal">This text has a 'normal' font-weight.</p><p class="bold">This text has a 'bold' font-weight.</p><p class="lighter">This text has a 'lighter' font-weight.</p><p class="number">This text has a font-weight of 600.</p></body></html></pre>Setting Font Style
To set the style of the written text, we use the font-style property. The text can be set to normal, italic or oblique.
Example
In this example, we have used font-style property to set the style of the written text.
<!DOCTYPE html><html lang="en"><head><title>CSS font-style Property Example</title><style>.normal { font-style: normal; }.italic { font-style: italic; }.oblique { font-style: oblique; } </style></head><body><h2>CSS font-style Property</h2><p class="normal">It has 'normal' font-style.</p><p class="italic">It has 'italic' font-style.</p><p class="oblique">It has 'oblique' font-style.</p></body></html></pre>CSS Font Shorthand Property
You can use the font shorthand property to modify size, weight, and style of texts.
Example
In this example, we have used the font shorthand property to set font style, weight, size and family.
<html><head><style>.font-example { /* in-order: font style, weight, size, family */ font: italic bold 20px Arial, sans-serif; } </style></head><body><p class="font-example"> This is an example of text with an adjusted font style, weight, and size using the font shorthand property. </p></body></html></pre>CSS Font Related Properties
The following table lists all the CSS properties related to font:
Property Description Example font-family Specifies the font for an element. Try It font-size Specifies the size of the font. Try It font-weight Specifies the boldness of the font. Try It font-style Specifies the style of the font (normal, italic, oblique). Try It font-variant Specifies whether or not a text should be displayed in a small-caps font. Try It line-height Specifies the line height. Try It
Leave a Reply