The CSS font-kerning property controls the usage of the kerning information stored in a font.
Syntax:
font-kerning: auto|normal|none;
auto (default) – the browser specifies whether font-kerning will be applied or not.
normal – defines that font-kerning is applied.
none – defines that font-kerning is not applied.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.example-1 {font-kerning: auto;}
.example-2 {font-kerning: normal;}
.example-3 {font-kerning: none;}
</style>
</head>
<body>
<p class="example-1">“The author of ‘THE OLD MAN AND THE SEA’ is E. Hemingway.”</p>
<p class="example-2">“The author of ‘THE OLD MAN AND THE SEA’ is E. Hemingway.”</p>
<p class="example-3">“The author of ‘THE OLD MAN AND THE SEA’ is E. Hemingway.”</p>
</body>
</html>
Output:
“The author of ‘THE OLD MAN AND THE SEA’ is E. Hemingway.”
“The author of ‘THE OLD MAN AND THE SEA’ is E. Hemingway.”
“The author of ‘THE OLD MAN AND THE SEA’ is E. Hemingway.”
Some fonts provide additional faces: condensed faces (narrower) and expanded faces (wider). The CSS font-stretch property let the user make text narrower or wider.
The CSS font-stretch property has no effect if the chosen font does not offer condensed or expanded faces.
The font used in the tutorial: Encode Sans (source: Google Fonts).
Nowadays, most websites, these days, use custom web fonts. Unfortunately, not all browsers support custom fonts (different browsers support different font formats). Therefore, it is very important to always use fallback fonts.
To create the fallback fonts start with the font you want, and end with the generic family, to let the browser a pick similar font in the generic family if no other fonts are available.
Example:
The browser will try to use the font you defined first (Pacifico, in the example below), but if it doesn’t have that font available, it will keep going down that list (second Helvetica, or third choice Tahoma).
The CSS font-family property defines the font for an element.
The CSS font-family property can hold several font names as a “fallback” system. If the browser does not support the first font, it tries to fit the next font.
Note: Each value should be separated by a comma.
Syntax:
font-family: family-name|generic-family;
family-name – font family names (like “times”, “courier”, “arial”, etc.). generic-family – generic family names (like “serif”, “sans-serif”, “cursive”, “fantasy”, “monospace”).
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.one {
font-family: "Courier New", Courier, monospace;
}
.two {
font-family: Arial, Tahoma, sans-serif;
}
</style>
</head>
<body>
<p class="one">This is a paragraph, shown in the Courier font.</p>
<p class="two">This is a paragraph, shown in the Arial font.</p>
</body>
</html>
The CSS @font-face rule allows web designers to use custom fonts.
The custom font can be loaded from a locally-installed font on the user’s computer or a remote server.
Syntax:
@font-face {
font-properties
}
font-family – (required) specifies the name of the font.
src– (required) specifies the URL(s) where the font is downloaded from.
font-stretch (normal/ condensed/ ultra-condensed/ extra-condensed/ semi-condensed/ expanded/ semi-expanded/extra-expanded/ ultra-expanded) – (optional) specifies how the font should be stretched (the default value is “normal”).
font-style (normal/ italic/ oblique) – (optional) specifies how the font should be styled (the default value is “normal”).
font-weight (normal/ bold/ 100/ 200/ 300/ 400/ 500/ 600/ 700/ 800/ 900)- (optional) specifies the boldness of the font. (the default value is “normal”).
unicode-range – (optional) specifies the range of unicode characters the font supports (the default value is “U+0-10FFFF”).
Example1:
Using the CSS @font-face rule you need first specify a name for the font (e.g. Pacifico), and then point to the font file (src):
<!DOCTYPE html>
<html>
<head>
<style>
@font-face {
font-family: Pacifico;
src: url(https://lenadesign.org/wp-content/uploads/2021/11/Pacifico-Regular.ttf);
}
p {
font-family: Pacifico;
}
</style>
</head>
<body>
<p>With the CSS @face-font rule, you can use custom fonts on the website.</p>
</body>
</html>
Output:
With the CSS @face-font rule, you can use custom fonts on the website.
Example2:
<!DOCTYPE html>
<html>
<head>
<style>
@font-face {
font-family: amatic;
src: url(https://lenadesign.org/wp-content/uploads/2021/11/AmaticSC-Regular.ttf);
}
p {
font-family: amatic;
font-size:30px;
}
</style>
</head>
<body>
<p>With the CSS @face-font rule, you can use custom fonts on the website.</p>
</body>
</html>
Output:
With the CSS @face-font rule, you can use custom fonts on the website.
Using a font that is easy to read is very important. It is also important to choose the correct text size and colour for the font.
In CSS, there are two types of font-family names (Generic family,Font family):
Generic family – a group of font families with a similar look.
In CSS there are five generic font families:
Serif (fonts have small lines at the ends of some characters)
Sans-serif (where “sans” means without, these fonts do not have the lines at the ends of the characters)
Monospace (all monospace characers have the same width)
Cursive (fonts imitate human handwriting)
Fantasy (decorative fonts)
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.p1 {
font-family: "Times New Roman", Times, serif;
}
.p2 {
font-family: Arial, Helvetica, sans-serif;
}
.p3 {
font-family: 'Courier New', monospace;
}
.p4 {
font-family: 'Brush Script MT', cursive;
}
.p5 {
font-family: Impact, fantasy;
}
</style>
</head>
<body>
<p class="p1">This is a paragraph, shown in the Times New Roman font (serif).</p>
<p class="p2">This is a paragraph, shown in the Arial font (sans-serif).</p>
<p class="p3">This is a paragraph, shown in the 'Courier New' font (monospace).</p>
<p class="p4">This is a paragraph, shown in the 'Brush Script MT' font (cursive).</p>
<p class="p5">This is a paragraph, shown in the Impact font (fantasy).</p>
</body>
</html>
Output:
This is a paragraph, shown in the Times New Roman font (serif).
This is a paragraph, shown in the Arial font (sans-serif).
This is a paragraph, shown in the ‘Courier New’ font (monospace).
This is a paragraph, shown in the ‘Brush Script MT’ font (cursive).
This is a paragraph, shown in the Impact font (fantasy).
Font family- a specific font family (like “Times New Roman” or “Arial”)
The font family of the text is set with the font-family property. Start with the font you want, and end with the generic family, to let the browser a pick similar font in the generic family, if no other fonts are available (read also: Fallback Fonts).
The font-style property is mostly used to define italic text. This property has three values.
Normal – the text is shown normally.
Italic – the text is shown in italics.
Oblique – the text is “leaning” (oblique is similar to italic but less supported).
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.normal {
font-style: normal;
}
.italic {
font-style: italic;
}
.oblique {
font-style: oblique;
}
</style>
</head>
<body>
<p class="normal">This is a paragraph in normal style.</p>
<p class="italic">This is a paragraph in italic style.</p>
<p class="oblique">This is a paragraph in oblique style.</p>
</body>
</html>
Output:
This is a paragraph in normal style.
This is a paragraph in italic style.
This is a paragraph in oblique style.
The font-size property sets the size of the text. Being able to manage text size is very important in web design. However, you shouldn’t use font size adjustments to make paragraphs look like headings and in the opposite way, headings look like paragraphs (always use proper HTML tags like <p> or <h1>. If you don’t define the font size, the default size for normal text, like paragraphs is 16px. Setting the text size with pixels gives you full control over the text size.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 14px;
}
</style>
</head>
<body>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Output:
This is heading 3
This is heading 4
This is a paragraph.
This is another paragraph.
The font-weight property defines the weight of the font.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.normal {
font-weight: normal;
}
.lighter {
font-weight: lighter;
}
.bold {
font-weight: bold;
}
.thicker {
font-weight: 900;
}
</style>
</head>
<body>
<p class="normal">This is a paragraph.</p>
<p class="lighter">This is a paragraph.</p>
<p class="bold">This is a paragraph.</p>
<p class="thicker">This is a paragraph.</p>
</body>
</html>
