Categories
CSS Web development

CSS Fallback Fonts

CSS Fallback 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).

<!DOCTYPE html>
<html>
<head>
<style>
  
.fallback {
  font-family: Pacifico, Helvetica, Tahoma, Sans-Serif;
}

</style>
</head>
<body>

<p class="fallback">This is a paragraph.</p>

</body>
</html>

Output:

This is a paragraph.


Read also:

CSS @font-face Rule

CSS Fonts

Web Safe Fonts

Categories
CSS HTML Web development

CSS font-family Property

CSS font-family Property

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>

Output:

This is a paragraph, shown in the Courier font.

This is a paragraph, shown in the Arial font.


Enjoy coding!

Read also:

CSS @font-face Rule

CSS @import Rule

HTML Text Formatting And Styles

Categories
CSS Web development

CSS @font-face Rule

CSS @font-face Rule

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.


Browser Support for Font Formats:

Font FormatChromeFirefoxEdgeSafariOpera
TTF/OTF4.03.59.0*3.110.0
WOFF5.03.69.05.111.1
WOFF236.039.014.010.026.0
SVGNot supportedNot supportedNot supported3.2Not supported
EOTNot supportedNot supported6.0Not supportedNot supported

Enjoy coding!

Read also:

CSS @import Rule

HTML Text Formatting And Styles

CSS Styling Links

Categories
CSS Web development

CSS Fonts

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.

CSS fonts

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)
CSS 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). 

Example:

<!DOCTYPE html>
<html>
<head>
<style>
  
.fallback {
  font-family: Pacifico, Helvetica, Tahoma, Sans-Serif;
}

</style>
</head>
<body>

<p class="fallback">This is a paragraph.</p>

</body>
</html>

Output:

This is a paragraph.

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>

Output:

This is a paragraph.

This is a paragraph.

This is a paragraph.

This is a paragraph.

Enjoy coding!

Read also:

HTML Text Formatting And Styles

CSS @import Rule

CSS @font-face Rule