SSF-O - Single Standard for Fonts (Local, Google Fonts)

12/30/25

2 min.

Definitions

The SSF-O standard defines requirements for the semantics, accessibility, and logic of fonts.

Structure and Semantics

Optimal Integration for Modern Frameworks (Next.js, Nuxt, Gatsby)

In modern development environments, it is recommended to use built-in tools for automatic font optimization.

Using the built-in solution in NextJS ensures automatic correction of layout shift (CLS), local font loading, and the addition of display=swap.

import { Inter } from 'next/font/google';

const inter = Inter({
  weight: ['400', '500', '700'],
  subsets: ['cyrillic', 'latin'],
  variable: '--font-inter',
});

export { inter };

Usage in the Layout:

import { inter } from './fonts';

<html lang="ru" className={inter.variable}> 
  <body>{children}</body>
</html>

Usage in global.css:

body {
  font-family: var(--font-inter), sans-serif; 
}

Best Practices for Loading Fonts in "Pure" HTML/CSS/JS and CMS

On static websites or in CMS platforms, it's important to manage font loading yourself to ensure accessibility and proper display.

Local loading (@font-face) is the best approach:

Aspect	Description
Format	WOFF2 (best compression and support)
Location	`public/fonts/` or `assets/fonts/`
Critical CSS	`@font-face` must be at the beginning of the main CSS file
Fallback font	Ensures CLS mitigation

@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-Regular.woff2") format("woff2"); 
  font-weight: 400; 
  font-style: normal; 
  font-display: swap;
}

body {
  font-family: "Inter", sans-serif; 
}

Loading Google Fonts via <link>:

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">

Interactivity and Visual Feedback

CLS (Cumulative Layout Shift) is mitigated through local font loading and font-display: swap;, and don’t forget about fallback fonts, which ensure that text is displayed instantly until the primary font is fully loaded.

Suboptimal/Outdated Methods (Avoid)

Incorrect font loading can slow down the page and impair interaction.

Method	Example	Problem
`@import` in CSS	`@import url("…");`	Blocks parallel resource loading
Formats other than WOFF2	`.ttf`, `.eot`, `.svg`, `.woff`	Outdated, large files
Missing `font-display: swap;`	`@font-face { … }` without swap	FOIT - text is invisible until the font loads