✍️ Web Font Settings and Load Optimization Architecture in Blog Admin

This project provides an intuitive design editing tool within the admin panel to easily customize fonts, improving the visual appeal and readability of your blog.

Beyond simply applying font names, a specialized performance optimization engine runs behind the scenes to maintain top loading speeds and high performance scores (Lighthouse Performance) even in mobile or bandwidth-constrained environments.

This manual details how to configure fonts in the admin design editor and explains the underlying concepts of how fonts are optimized and served rapidly to your visitors.

📂 1. Detailed Font Settings in the Design Editor

In the admin design editor settings menu, you can finely tune font families, sizes, and weights to match your blog layout.

✍️ 1-1. Global Web Font Settings (Affects Entire Pages)

Manages the global fonts that bind as defaults across all text areas and the basic interface of the blog.

• Base Font Family (Font Family):
  • Specifies the main typeface for the entire blog.
  • How to enter: Enter the font name recognized by browsers. If left blank, the system default font Inter is inherited across the entire blog. (e.g., 'Noto Serif KR', serif or Pretendard)
• Add Google Web Fonts (Google Font Name):
  • Registers the English names of Google Fonts to apply to specific areas like the logo text or key widget titles.
  • How to enter: List multiple fonts separated by commas (,) or semicolons (;). (e.g., Noto Serif KR, Newsreader)
  • Integration effect: The custom font names entered here will automatically populate as select options in the header's logo font dropdown and other individual font family options.
• Base Font Size & Base Font Size (Mobile):
  • Defines the base font size for the desktop and mobile views respectively.
  • How to enter & Tips: It fully supports not only absolute units (px, e.g., 16px or 14px) but also relative units (rem, em) that dynamically scale according to the user's browser settings. (e.g., Desktop 1rem or 16px / Mobile 0.875rem or 14px)

🎨 1-2. Header and Logo Font Settings

Applies independent typography to the branding logo text displayed in the top navigation header.

• Font Family:
  • Selects the typeface for the logo text.
  • Choosing Inherit will follow the global base font. Custom fonts registered in the [Add Google Web Fonts] field will automatically appear in this dropdown for individual assignment.
• Font Size & Mobile Font Size:
  • Assigns distinct sizes for desktop and mobile views to ensure the logo text does not break layouts or lose legibility under different viewports. (e.g., Desktop 1.5rem / Mobile 1.2rem)
• Logo Weight:
  • Provides a dropdown menu with weights from 100 (thinnest) to 900 (boldest) in increments of 100 to customize the visual presence of the logo.
  • Caution: The actual rendered thickness depends on the selected font family's capabilities. If the web font does not support a specific weight (e.g., 100 or 900), the browser will render using the closest available weight. It is best to check the font's specifications beforehand.

🧩 1-3. Global Widget Style Settings

Adjusts the text styling of individual widget titles and contents assembled in the sidebars or footer areas.

• Global Widget Title Style: Configures the font family, size, weight, and color of the widget card headers.
• Global Widget Item Style: Sets the styling for the individual content items and links inside the widget card.
• Inheritance rule: If the font family field is left blank, it inherits the global font, maintaining layout consistency.

⚡ 2. Font Loading Performance Optimization and Mechanism

Font loading delays are a primary cause of low performance scores on websites. To prevent this, the engine features a built-in font acceleration pipeline optimized for serverless environments.

🛡️ 2-1. System Built-in Font Filtering

Fonts likely already installed on the visitor's device (e.g., Pretendard, Arial, system-ui) are filtered out on the server side. This prevents the blog server from making unnecessary requests to Google Font servers, saving bandwidth.

🔄 2-2. Blocking External Requests and Self-Proxying

If a visitor's browser connects directly to external Google Font URLs (fonts.googleapis.com and gstatic.com), DNS queries and SSL handshakes introduce several hundred milliseconds of rendering delay.

• Proxying Stylesheets: The blog requests the stylesheet (CSS) through its own internal API rather than calling external Google servers during page render.
• Rewriting Internal Paths: The engine analyzes the font download links (.woff2) inside the CSS and replaces all external URLs with internal domain proxy paths.
• Security Filters: The proxy API restricts access exclusively to official Google Font domain hosts to prevent malicious redirection or relaying of unverified code.

💾 2-3. Cloudflare Pages CDN and Local Browser Caching

All proxy-requested font definitions and font files (.woff2) are cached on Cloudflare's global edge servers (CDN) for 24 hours.

• It also responds with strong browser caching headers. When a user clicks a link to another post or returns next time, the font renders instantly in 0ms from the local device memory, eliminating flashes of unstyled text (FOUT) or layout shifts (CLS).

🚀 2-4. Pretendard Font Acceleration

When Pretendard, a typeface optimized for Korean readability, is set as the base font, the engine opens a dedicated bypass path to maximize rendering speed.

• Parallel Download: It loads the font files in parallel with other scripts through a high-speed global open-source CDN (jsDelivr), bypassing Google Font proxying.
• Rendering Optimization: This ensures the heavy Korean font package is retrieved as quickly as possible, avoiding delayed text display on initial page entry.

💡 3. Important Notes for Configuration

[!IMPORTANT]
💡 Key Guidelines When Modifying Admin Font Settings

1. Enter Exact Google Font Names:
   • The English font names entered in the Google Font Name field must match Google Font Library's official names exactly. Typos or incorrect spaces will cause the loader to fail, falling back to system generic fonts (Sans-serif).
2. Balance Desktop and Mobile Font Sizes:
   • Keeping the desktop font size on mobile views degrades mobile legibility. Ensure you configure a slightly smaller value (e.g., 2px less) for the mobile base size to maintain a responsive interface.