Typography
CSS Fonts
The CSS font properties define the font family, boldness, size, and the style of a text.
CSS Font Families
In CSS, there are two types of font family names:
- generic family - a group of font famillies with a similar look (like "Serif" or "Monospace")
- font family - a specific font family (like "Times New Roman" or "Arial")
Font Family
The font family of a text is set with the
font-family property.
The font-family property should hold several 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.
Google Fonts
If you do not want to use any of the standard fonts in HTML, you can use the Google Fonts API to add hundreds of other fonts to your page.
Just add a stylesheet link and refer to a font family of your choice:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
font-family: "Sofia";
font-size: 22px;
}
</style>
</head>
<body>
<h1>Sofia Font</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Adipisci, ex!</p>
</body>
</html>
CSS @font-face rule
The CSS @font-face rule allows external fonts or font
files to be imported directly into stylesheets.The location of the
font file must be specified in the CSS rule so that the files can be
loaded from that location. This rule also allows locally hosted fonts
to be added using a relative file path instead of a web URL.
@font-face {
font-family: 'MyParagraphFont';
src: url('fonts/Roboto.woff2') format('woff2'),
url('fonts/Roboto.woff') format('woff'),
url('fonts/Roboto.ttf') format('truetype');
}
Once the @font-face at-rule is defined, you can use the
font in your stylesheet!
p {
font-family: 'MyParagraphFont', sans-serif;
}
CSS Fallback Fonts
The CSS font-family property can have multiple fonts
declared in order of preference. In this case the fonts following the
initial font are known as the fallback fonts. If the initial value of
the property font-family fails to load to the webpage,
the fallback fonts will be used.
/* Here `Arial` is the fallback font for <p> tags */
p {
font-family: "Helvetica", "Arial";
}
The CSS line-height property
The CSS line-height property declares the vertical
spacing between lines of text. It accepts both unitless numbers as a
ratio (eg. 2) and numbers specified by unit as values (eg. 12px) but
it does not accept negative numbers. A unitless number is an absolute
value that will compute the line height as a ratio to the font size
and a unit number can be any valid CSS unit (eg. pixels, percents,
ems, rems, etc.). To set the line-height of the elements
to 10px, the given CSS declaration can be used.
p {
line-height: 10px;
}
CSS font-style property
The CSS font-style property determines the font style in
which text will appear. It accepts italic as a value to set the font
style to italic.
.text {
font-style: italic;
}
CSS font-weight Property
The CSS font-weight property declares how thick or thin
should be the characters of a text. Numerical values can be used with
this property to set the thickness of the text. 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 given example, all the
elements will appear in a bolder font.
/* Sets the text as bolder. */
p {
font-weight: 700;
}