CSS Tutorial
CSS - Introduction CSS - How CSS works? CSS - Syntax CSS - Colors CSS - Backgrounds CSS - Borders CSS - Margins CSS - Padding CSS - Height/Width CSS - Box Model CSS - Text CSS - Fonts CSS - Icons CSS - Cursor CSS - Outline CSS - Links CSS - Lists CSS - Tables CSS - Display CSS - Overflow CSS - Position CSS - Float CSS - Align CSS - Opacity CSS - Combinator CSS - Pseudo Classes CSS - Pseudo Elements CSS - Attribute Selector CSS - Buttons CSS - Pagination CSS - Navigation Bar CSS - Dropdowns CSS - Specificity CSS - Transition
CSS Advanced
CSS - Rounded Corners CSS - Border Image CSS - Background CSS - Gradients CSS - Shadow CSS - Text Effects CSS - 2D Transform CSS - 3D Transform CSS - Animation CSS - Object-fit CSS - Box Sizing CSS - Filters CSS - Style Images CSS - Variables CSS - Media Queries CSS - Flexbox Layout CSS - Grid Layout
CSS Responsive
RWD - Introduction RWD - Grid View RWD - Media Queries RWD - Images
CSS References
CSS - Reference CSS - Selectors CSS - Functions CSS - Units CSS - Animatable CSS - Entities

CSS Fonts

CSS font properties allows you to set various styles for fonts likes font family, size and boldness, variant, etc... of a text.

She stared through the window at the stars.
She stared through the window at the stars.
She stared through the window at the stars.

We have the following properties for styling fonts of the text content:


Font Family

The font-family property specifies the font for an element. This property can hold several comma-separated font names as a "fallback" system. If the browser does not support the first font, it tries the next font, and so on.

Start with the font you want, and end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available.

Note: If the name of a font family is more than one word, it must be in quotation marks, like: "Helvetica Neue".

Run code

The following is an example of using the "Tangerine" font from Google Fonts:

Run code

Font Style

The font-style property specifies whether a font should be styled with a normal, italic, or oblique.

Run code

Font Size

The font-size property sets the size of the text.

Run code

Font Weight

The font-weight property specifies the weight (or boldness) of the font.

Run code

Font Variant

The font-variant property specifies whether or not a text should be displayed in a small-caps font.

In a small-caps font, all lowercase letters are converted to uppercase letters. However, the converted uppercase letters appears in a smaller font size than the original uppercase letters in the text.

Run code

Responsive Font Size

CSS viewport units: vw, vh, vmin and vmax were specially created to allow lengths to be relative to the viewport size.

The text size can be set with a vw unit, which means the "viewport width".

That way the text size will follow the size of the browser window:

Run Code

To learn more about relative units, visit: CSS Measurement Units.

You could also use media queries to change the font size of an element on specific screen sizes:

Run Code

To learn more about media queries, visit: CSS Media Queries.


CSS Font properties

Property Description
font-family Specifies the font family for an element
font-size Specifies the size of the font
font-style Specifies whether a font should be styled with a normal, italic, or oblique
font-weight Specifies the weight (or boldness) of the font
font-variant Specifies whether or not a text should be displayed in a small-caps font