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

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:

@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.