We use cookies to enhance your experience on the site

Web Fonts - Fonts Worthy of a Pharaoh

Hieroglyphs in Ancient Egypt had their unique style. Similarly, your website can use custom fonts thanks to Web Fonts. Default system fonts are limited, but with Google Fonts and the

@font-face

rule, you can use thousands of different typefaces.

Google Fonts - Font Library

Google Fonts is a free library of over 1500 fonts. To use a font from Google Fonts:

Method 1: Link in HTML (simplest)

1<head>
2  <!-- Add link to Google Fonts -->
3  <link rel="preconnect" href="https://fonts.googleapis.com">
4  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
5  <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&display=swap"
6        rel="stylesheet">
7</head>

1/* Use the font in CSS */
2h1 {
3  font-family: 'Cinzel', serif;
4  font-weight: 700;
5}

Method 2: @import in CSS

1/* At the beginning of the CSS file */
2@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&display=swap');
3
4body {
5  font-family: 'Cinzel', serif;
6}

@font-face - Custom Fonts

If you have your own font, use the

@font-face

rule:

1@font-face {
2  font-family: 'EgyptianFont';
3  src: url('/fonts/egyptian.woff2') format('woff2'),
4       url('/fonts/egyptian.woff') format('woff');
5  font-weight: 400;
6  font-style: normal;
7  font-display: swap;
8}
9
10h1 {
11  font-family: 'EgyptianFont', serif;
12}

Font Formats:

WOFF2 - best compression, supported by modern browsers
WOFF - broader support, slightly larger size
TTF/OTF - traditional formats, no web compression

font-display: swap

The

font-display

property controls what happens while the font is loading:

1@font-face {
2  font-family: 'MyFont';
3  src: url('/fonts/font.woff2') format('woff2');
4  /* swap: show text with system font, replace after loading */
5  font-display: swap;
6}

swap - immediately display text with system font, swap after loading
block - hide text until font is loaded (max 3s)
fallback - short block (100ms), then swap
optional - if font does not load quickly, use system font

Preconnect and Preload - Speeding Up Loading

1<head>
2  <!-- Preconnect - establish connection to server earlier -->
3  <link rel="preconnect" href="https://fonts.googleapis.com">
4  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
5
6  <!-- Preload - start downloading font as soon as possible -->
7  <link rel="preload" as="font" type="font/woff2"
8        href="/fonts/egyptian.woff2" crossorigin>
9</head>

Font Stack

Always define fallback fonts in case the main font does not load:

1body {
2  /* Order: preferred -> fallback -> generic */
3  font-family: 'Cinzel', 'Georgia', 'Times New Roman', serif;
4}

General rule: always end the font stack with one of the five generic families:

serif

sans-serif

monospace

cursive

, or

fantasy

. This ensures the browser always has a fallback font to use.

Web Font Optimization

Web fonts can significantly impact page performance. Here are some optimization tips:

1. Load Only Needed Weights

1/* BAD - loading all weights */
2@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800;900&display=swap');
3
4/* GOOD - loading only those you use */
5@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&display=swap');

2. Load Only Needed Characters (Subsetting)

If the page is only in English, you do not need to load Chinese or Arabic characters:

1<!-- Load only Latin characters -->
2<link href="https://fonts.googleapis.com/css2?family=Cinzel&subset=latin&display=swap"
3      rel="stylesheet">

3. Use Variable Fonts

Modern variable fonts allow having all weights in a single file:

1@font-face {
2  font-family: 'CinzelVariable';
3  src: url('/fonts/cinzel-variable.woff2') format('woff2');
4  font-weight: 100 900; /* Weight range */
5  font-display: swap;
6}
7
8h1 {
9  font-family: 'CinzelVariable', serif;
10  font-weight: 650; /* Any value from the range! */
11}

Typography - A Few Additional Properties

1p {
2  /* Letter spacing - like hieroglyphs in equal intervals */
3  letter-spacing: 0.05em;
4
5  /* Word spacing */
6  word-spacing: 0.1em;
7
8  /* Line height - text readability */
9  line-height: 1.6;
10
11  /* First line indent */
12  text-indent: 2em;
13}

Just as hieroglyphs in ancient Egypt had their unique, recognizable style, a well-chosen web font gives your page character and professionalism.

Go to CodeWorlds→