Fonts
CSS Fonts are an essential part of any web page. They are used to make text legible and to create an overall design aesthetic. Fonts can be used to convey meaning, create a sense of hierarchy, and even add personality to a website.
Generic Font Families
- Serif fonts have a small stroke at the edges of each letter. They create a sense of formality and elegance.
- Sans-serif fonts have clean lines . They create a modern and minimalistic look.
- Monospace fonts : here all the letters have the same fixed width. They create a mechanical look.
- Cursive fonts imitate human handwriting.
- Fantasy fonts are decorative/playful fonts.
font-family
The font-family CSS property specifies a prioritized list of one or more font family names and/or generic family names for the selected element.
p {
font-family: Georgia, serif;
}Web Safe Fonts
Web safe CSS and HTML fonts are fonts that can adapt to any browser on any device.
- Arial (sans-serif)
- Arial Black (sans-serif)
- Verdana (sans-serif)
- Tahoma (sans-serif)
- Trebuchet MS (sans-serif)
- Impact (sans-serif)
- Times New Roman (serif)
- Didot (serif)
- Georgia (serif)
- American Typewriter (serif)
- Andalé Mono (monospace)
- Courier (monospace)
Font Fallbacks
Most computers have a small set of typefaces pre-installed. This small set includes serif fonts like Times New Roman and sans-serif fonts like Arial.These pre-installed fonts serve as fallback fonts.
html {
font-family: "Lucida Grande", Tahoma, Sans-Serif;
}Font Style
The font-style property allows you to make text appear italicized (sloped, or slanted).
p {
font-style: italic;
} /* italic | normal | oblique*/Font Size
The font-size CSS property sets the size of the font.(px,em,rem,small)
p {
font-size: 20px;
}Font Weight
The font-weight property sets how thick or thin characters in text should be displayed.
span {
font-weight: bold ;
} /* normal | bold | bolder | lighter | number*/Font Variant
The font-variant property enables you to select the small-caps font within a font family. This property is a shorthand for the following CSS properties:
- font-variant-alternates
- font-variant-caps
- font-variant-east-asian
- font-variant-ligatures
- font-variant-numeric
p {
font-variant: small-caps ;
}/* default is normal */Responsive Font Size
That is for sizing things in relation to the viewport. These can be useful for responsive design, that is, designing websites that look good across different screen sizes. and the text size can be set with a vw unit.
h1 {
font-size: 5.9vw;
} /* viewport width*/
h2 {
font-size: 3.0vh;
} /* viewport height*/
h3 {
font-size: 2vmin;
} /* whichever is smaller or vnax=whichever is larger*/
Google Fonts
This explains how to use the Google Fonts API to add fonts to your web pages. and just you have to do is add a special stylesheet link to your HTML.
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
</head>Multiple Google Fonts
To use multiple Google fonts, just separate the font names with a pipe character (|).
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine |Sofia|Trirong ">
</head>Styling Google Fonts
We can style Google Fonts as we like, with CSS.
body {
font-family: 'Tangerine', serif;
font-size: 52px;
}Enabling Font Effects
Google has also enabled different font effects that you can use. First, add effect=effectname to the Google API, then add a special class name to the element that is going to use the special effect. The class name always starts with font-effect- and ends with the effectname. Ex: class name:
- font-effect-neon
- font-effect-fire
- font-effect-outline
- font-effect-emboss
- font-effect-shadow-multiple , …
<h1 class="font-effect-outline">Outline Effect</h1>Font Pairing
Font Pair helps designers pair Google Fonts together.
p {
font-family: 'Times New Roman', Times, serif;
font-size: 55px;
}