Custom font @font-face rule

The @font-face rule allows developers to import custom fonts, breaking free from browser default font limitations. By defining font names, sources, and formats, unique fonts can be used on web pages, enhancing design flexibility and visual experience.

Basic Syntax of @font-face

The basic structure of the @font-face rule is as follows:

@font-face {
  font-family: 'MyCustomFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

Key property explanations:

• font-family: Defines the font family name (must be referenced when used)
• src: Specifies the font file path and format (multiple fallbacks allowed)
• font-weight: Sets font weight (400=normal, 700=bold)
• font-style: Defines italic style (normal/italic)
• font-display: Controls display behavior during font loading

Font Formats and Browser Support

Modern web pages commonly use four font formats:

Recommended WOFF2 + WOFF combination:

@font-face {
  font-family: 'ModernFont';
  src: url('modern.woff2') format('woff2'),
       url('modern.woff') format('woff');
}

Multiple Weights and Styles Definition

A complete font family requires defining different variants separately:

/* Regular */
@font-face {
  font-family: 'VariableFont';
  src: url('font-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

/* Bold */
@font-face {
  font-family: 'VariableFont';
  src: url('font-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}

/* Italic */
@font-face {
  font-family: 'VariableFont';
  src: url('font-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
}

Variable Fonts

A single file contains all variants, controlled via axis parameters:

@font-face {
  font-family: 'FlexFont';
  src: url('flexfont.woff2') format('woff2-variations');
  font-weight: 100 900; /* Weight range */
  font-stretch: 50% 200%; /* Width range */
}

.condensed {
  font-family: 'FlexFont';
  font-stretch: 75%;
  font-weight: 350;
}

Font Loading Optimization Strategies

font-display Property

@font-face {
  font-family: 'PriorityFont';
  src: url('priority.woff2') format('woff2');
  font-display: optional; /* Custom font may not display */
}

Possible values:

• auto: Browser default behavior
• block: Briefly blocks text rendering
• swap: Immediately uses fallback font, swaps after loading
• fallback: Short block period + short swap period
• optional: Decides based on network speed

Preloading Critical Fonts

<link rel="preload" href="critical.woff2" as="font" type="font/woff2" crossorigin>

Practical Application Examples

Multilingual Font Support

/* Chinese Source Han Sans */
@font-face {
  font-family: 'SourceHan';
  src: url('SourceHanSansSC-Regular.woff2') format('woff2');
  unicode-range: U+4E00-9FFF; /* Chinese character range */
}

/* English Roboto */
@font-face {
  font-family: 'SourceHan';
  src: url('Roboto-Regular.woff2') format('woff2');
  unicode-range: U+0000-007F; /* ASCII range */
}

body {
  font-family: 'SourceHan', sans-serif;
}

Icon Font Implementation

@font-face {
  font-family: 'IconFont';
  src: url('icons.woff2') format('woff2');
}

.icon::before {
  font-family: 'IconFont';
  content: '\e001'; /* Unicode private use area character */
}

Common Problem Solutions

Font Flickering Issue

@font-face {
  font-family: 'StableFont';
  src: url('stable.woff2') format('woff2');
  font-display: swap;
}

body {
  font-family: system-ui, -apple-system, 'StableFont', sans-serif;
}

Local Font Priority Strategy

@font-face {
  font-family: 'HybridFont';
  src: local('Helvetica Neue Bold'),
       local('Arial Bold'),
       url('fallback-bold.woff2') format('woff2');
  font-weight: 700;
}

Performance Monitoring and Debugging

Detect font loading via JavaScript:

document.fonts.load('1em MyFont').then(() => {
  console.log('Font loaded');
});

const fontCheck = new FontFaceObserver('MyFont');
fontCheck.load().then(() => {
  document.documentElement.classList.add('fonts-loaded');
});

Corresponding CSS control:

body {
  font-family: system-ui;
}

.fonts-loaded body {
  font-family: 'MyFont', sans-serif;
}

Advanced Font Feature Control

Enable OpenType features:

.text {
  font-feature-settings: 'liga' 1, 'kern' 1;
  font-variant-numeric: tabular-nums;
  font-kerning: normal;
}

Font Licensing and Legal Considerations

Legal font usage requires attention to:

1. Confirm Web Font license type
2. Commercial fonts require web usage licenses
3. Free fonts must comply with open-source licenses like SIL
4. Self-hosted fonts must adhere to license terms

Recommended resources:

• Google Fonts (automatically handles licensing)
• Adobe Fonts (requires subscription)
• Source Han fonts (Apache License)