Web based School

Chapter 05, Learn how to style your text and use custom fonts

In this Chapter, we’ll learn about typography, and how to arrange text on a page, and how to style fonts with CSS.

font-weight
/* how thick or thin should be the characters of a text. */ p { font-weight: 200; } To set how thick or thin should be the characters of a text we use the CSS font-weight property declares. The numeric scale range of this property is from 100 to 900 and accepts only multiples of 100. The default value is normal while the default numerical value is 400. Any value less than 400 will have text appear lighter than the default while any numerical value greater than the 400 will appear bolder. In the above example, all the <p> elements will appear in a thin font.

font-style
.text { font-style: italic; } To determine the font style we use the CSS font-style property, the value is set to 'italic'.

line-height
p { line-height: 14px; } To determine the vertical spacing between lines of text we use the CSS line-height property. CSS line-height property accepts both unitless numbers as a ratio and numbers specified by unit as values (16px). In the above example, the line-height of the <p> elements is set to 14px.

Fallback Fonts
/* Verdana is the fallback font for <p> tags */ p { font-family: "Arial", "Verdana"; } The CSS font-family property supports multiple fonts declared in order. So iIf the first value fails to load, the fallback fonts will be used.

@font-face
@font-face { font-family: 'Calibri'; src: url('/fonts/Calibri-Regular.ttf') format('truetype'); } The CSS @font-face rule allows external font files to be imported directly into stylesheets using a relative file path ('/fonts/Calibri-Regular.ttf').