Preload only Inter latin; drop Lora and cyrillic font preloads

[feruzm]

Closes #1600

Every page preloaded four woff2 files (~126 KB, priority High): Inter latin + cyrillic and Lora latin + cyrillic. WebPageTest traces on the entry route show six of the seven render-blocking stylesheets finishing by ~380 ms while the last one contends with the font preloads on the same connection until ~650 ms, and the parser resumes only then.

Changes in apps/web/src/app/layout.tsx:

• Inter: subsets: ["latin"], so only the latin file is preloaded. The generated @font-face rules keep every subset through unicode-range, so cyrillic text still upgrades to the webfont once it loads.
• Lora: preload: false and latin subset. Lora only styles entry/publish serif text; painting it with the metric-adjusted fallback first is acceptable.

Verified on a production build:

• rendered head carries 1 font preload instead of 4
• built CSS keeps cyrillic @font-face blocks (unicode-range U+0400..) for both families
• size-adjusted fallback faces unchanged, so no CLS change is expected

Lab A/B against the deployed build follows after merge.

Summary by CodeRabbit

• Performance Improvements
  • Optimized font loading by limiting Inter and Lora to the Latin character set.
  • Disabled preloading for Lora while preserving its available weights and display behavior.

[qodo-code-review]

ⓘ Your Qodo trial ends soon. Ask your workspace admin to set up billing to keep reviews running after the trial. Manage billing

[qodo-free-for-open-source-projects]

PR Summary by Qodo

Reduce Next.js font preloads to Inter latin; disable Lora + cyrillic preloads

✨ Enhancement ⚙️ Configuration changes 🕐 10-20 Minutes

AI Description

• Limit Inter preloading to the latin subset to reduce high-priority requests.
• Disable Lora preloading and rely on swap/fallback for below-the-fold serif text.
• Preserve cyrillic coverage via existing unicode-range @font-face rules.

Diagram

graph TD
  A["apps/web/src/app/layout.tsx"] --> B["next/font config"] --> C["Head font preloads"] --> D["Browser network"] --> E["Render-blocking CSS"]
  B --> F["Font loads via CSS (no preload)"]

Loading

High-Level Assessment

The following are alternative approaches to this PR:

1. Disable all font preloads (Inter + Lora)

• ➕ Maximizes freedom for render-blocking CSS to load first on the critical connection
• ➕ Simplifies preload behavior (no subset/preload tuning)
• ➖ Higher chance of FOUT for primary UI font (Inter)
• ➖ Potentially slower font swap for above-the-fold content

2. Route-level font loading (move Lora to only pages that need it)

• ➕ Avoids shipping Lora font-face rules to routes that never render serif text
• ➕ Can further reduce CSS/face processing on entry routes
• ➖ More structural work (layout splits), higher maintenance complexity
• ➖ Risk of regressions in typography on nested routes

Recommendation: Current approach is the best tradeoff: keep Inter’s above-the-fold experience by preloading only the latin subset, and drop Lora/cyrillic preloads to reduce high-priority request contention with render-blocking stylesheets. The alternatives either increase FOUT risk (no preloads at all) or require larger routing/layout refactors for marginal gains.

Files changed (1) +14 / -3

Enhancement (1) +14 / -3

layout.tsxTune Inter/Lora next/font options to reduce preload contention +14/-3

Tune Inter/Lora next/font options to reduce preload contention

• Adds rationale comments and updates Inter to preload only the latin subset. Updates Lora to use only the latin subset and disables preloading entirely while keeping display: swap for fallback-first rendering.

apps/web/src/app/layout.tsx

[qodo-free-for-open-source-projects]

Code Review by Qodo

🐞 Bugs (0) 📘 Rule violations (0) 📎 Requirement gaps (1) 🎨 UX issues (0) 🔗 Cross-repo conflicts (0) 📜 Skill insights (0)

1. Cyrillic font faces removed 📎 Requirement gap ≡ Correctness

Description

Both font configurations now request only the Latin subset, so Next/font will not generate Cyrillic
@font-face rules that can upgrade fallback text. Cyrillic characters therefore remain on the
fallback font, contrary to the requirement that removing Cyrillic preloads preserve Cyrillic
rendering.

Code

apps/web/src/app/layout.tsx[R74-75]

const inter = Inter({
-  subsets: ["latin", "cyrillic"],
+  subsets: ["latin"],

Evidence

The changed configuration explicitly limits both fonts to latin, while the compliance rule
requires Cyrillic rendering to remain correct when Cyrillic preloads are removed.

Avoid unnecessary Cyrillic font preloading
apps/web/src/app/layout.tsx[74-75]
apps/web/src/app/layout.tsx[83-85]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
The Latin-only subset configuration removes the Cyrillic font faces instead of merely removing their preloads.
## Issue Context
Cyrillic text must still upgrade from the metric-adjusted fallback to the webfont, as required by PR Compliance ID 1.
## Fix Focus Areas
- apps/web/src/app/layout.tsx[74-75]
- apps/web/src/app/layout.tsx[83-85]

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

2. Cyrillic Inter faces removed ✗ Dismissed 🐞 Bug ≡ Correctness

Description

Setting Inter's subsets to only latin prevents Next Font from generating the Cyrillic
@font-face rules, so Cyrillic UI and post text permanently falls back to the system font instead
of upgrading to Inter. This contradicts the PR's stated goal of retaining Cyrillic faces while
eliminating only their preload.

Code

apps/web/src/app/layout.tsx[75]

+  subsets: ["latin"],

Relevance

●● Moderate

The claim conflicts with the PR’s production-build verification; no close precedent resolves this
font-specific behavior.

ⓘ Recommendations generated based on similar findings in past PRs

Evidence

The changed configuration explicitly requests only the Latin subset, while the repository supports
multiple Cyrillic locales and uses the variable as the global Inter family. The Lora usage path
demonstrates that preload: false can leave font faces available for on-demand loading, so the
defect is specific to removing Inter's Cyrillic subset rather than disabling preload.

apps/web/src/app/layout.tsx[68-78]
apps/web/src/app/layout.tsx[83-89]
apps/web/src/features/i18n/index.ts[47-65]
apps/web/src/app/(dynamicPages)/entry/[category]/[author]/[permlink]/_components/entry-page-main-info.tsx[29-29]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
The Inter configuration requests only the Latin subset, which removes the generated Cyrillic font faces rather than just preventing their preload. Supported Cyrillic locales therefore never receive Inter styling.
## Issue Context
The app supports Serbian, Ukrainian, Bulgarian, and Russian locales, and the layout applies Inter globally through `--font-inter`. The changed comment explicitly claims that all subsets remain available, but `subsets` controls which font-face subsets Next Font generates.
## Fix Focus Areas
- apps/web/src/app/layout.tsx[68-75]
- apps/web/src/features/i18n/index.ts[47-65]
Restore generation of the Cyrillic subset and use a configuration/build strategy that preloads only the Latin resource, or otherwise preserve the existing Cyrillic faces while removing only their preload hints.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

3. Font preload changes lack tests ✗ Dismissed 📘 Rule violation ▣ Testability

Description

The change modifies runtime font loading behavior by reducing Inter subsets and disabling Lora
preloading, but the PR adds no automated test covering the resulting head/preload behavior. This
violates the requirement that each new or modified functional code path be covered by a test in the
same change.

Code

apps/web/src/app/layout.tsx[R84-88]

+  subsets: ["latin"],
 weight: ["400", "700"],
 variable: "--font-lora",
-  display: "swap"
+  display: "swap",
+  preload: false

Relevance

●●● Strong

Recent repository precedent accepts regression tests for modified runtime behavior, including layout
and user-visible paths.

PR-#1620
PR-#1521

ⓘ Recommendations generated based on similar findings in past PRs

Evidence

The changed Inter and Lora options alter generated font preload behavior, and the supplied PR
diff contains only apps/web/src/app/layout.tsx with no added or updated test file.

Rule 2667972: Require tests for all new functional code paths
apps/web/src/app/layout.tsx[74-88]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
The font configuration changes preload behavior, but no automated test verifies the generated preload tags and subset configuration.
## Issue Context
Inter should preload only the latin subset, while Lora should not be preloaded. The test should assert the rendered head behavior or the framework font configuration output.
## Fix Focus Areas
- apps/web/src/app/layout.tsx[74-88]
- apps/web/src/specs/app/layout.spec.tsx[1-1]

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

Tip of the day

💡 Did you know, you can switch off images and animations for a plain-text comment

More tips ↗ | Customize Qodo ↗ | Qodo docs ↗

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: b06836ac-0b57-47ca-8b8d-8ed1839fd814

📥 Commits

Reviewing files that changed from the base of the PR and between 12bdc3e and a8078db.

📒 Files selected for processing (1)

• apps/web/src/app/layout.tsx

Included review availability: Your plan provides up to 1 included review per hour; 0 remain after this review.

---

📝 Walkthrough

Walkthrough

The root layout restricts Inter and Lora to Latin font subsets. Lora no longer preloads. Both fonts retain display: "swap" behavior.

Changes

Font loading

Layer / File(s)	Summary
Latin font subset configuration apps/web/src/app/layout.tsx	Inter no longer preloads the Cyrillic subset. Lora uses only the Latin subset and disables preloading. Both fonts retain swap behavior.

Estimated code review effort: 1 (Trivial) | ~2 minutes

Merge Risk: ⚪ Minimal · up to a8078

This localized change reduces font preloads while preserving Cyrillic webfont support and fallback metrics; no actionable merge-blocking risk remains after normal checks and review.

Poem

I’m a rabbit with fonts set light,
Latin loads swift and right.
Cyrillic waits in fallback air,
Lora skips preload with care.
Swap stays smooth through day and night.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the font preload changes in the pull request.
Linked Issues check	✅ Passed	The changes reduce font preloads, retain Cyrillic support, and remove Lora preloading as required by issue #1600.
Out of Scope Changes check	✅ Passed	The changes are limited to font subset and preload settings in the root layout and match issue #1600.
Docstring Coverage	✅ Passed	Docstring check was indeterminate for this PR — some files could not be analyzed in time. Not blocking.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch perf/font-preload-1600

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[qodo-code-review]

Code Review by Qodo

🐞 Bugs (0) 📘 Rule violations (0) 📜 Skill insights (0)

1. Cyrillic Inter faces removed ✗ Dismissed 🐞 Bug ≡ Correctness

Description

Setting Inter's subsets to only latin prevents Next Font from generating the Cyrillic
@font-face rules, so Cyrillic UI and post text permanently falls back to the system font instead
of upgrading to Inter. This contradicts the PR's stated goal of retaining Cyrillic faces while
eliminating only their preload.

Code

apps/web/src/app/layout.tsx[75]

+  subsets: ["latin"],

Relevance

●● Moderate

The claim conflicts with the PR’s production-build verification; no close precedent resolves this
font-specific behavior.

ⓘ Recommendations generated based on similar findings in past PRs

Evidence

The changed configuration explicitly requests only the Latin subset, while the repository supports
multiple Cyrillic locales and uses the variable as the global Inter family. The Lora usage path
demonstrates that preload: false can leave font faces available for on-demand loading, so the
defect is specific to removing Inter's Cyrillic subset rather than disabling preload.

apps/web/src/app/layout.tsx[68-78]
apps/web/src/app/layout.tsx[83-89]
apps/web/src/features/i18n/index.ts[47-65]
apps/web/src/app/(dynamicPages)/entry/[category]/[author]/[permlink]/_components/entry-page-main-info.tsx[29-29]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
The Inter configuration requests only the Latin subset, which removes the generated Cyrillic font faces rather than just preventing their preload. Supported Cyrillic locales therefore never receive Inter styling.

## Issue Context
The app supports Serbian, Ukrainian, Bulgarian, and Russian locales, and the layout applies Inter globally through `--font-inter`. The changed comment explicitly claims that all subsets remain available, but `subsets` controls which font-face subsets Next Font generates.

## Fix Focus Areas
- apps/web/src/app/layout.tsx[68-75]
- apps/web/src/features/i18n/index.ts[47-65]

Restore generation of the Cyrillic subset and use a configuration/build strategy that preloads only the Latin resource, or otherwise preserve the existing Cyrillic faces while removing only their preload hints.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

2. Font preload changes lack tests ✗ Dismissed 📘 Rule violation ▣ Testability

Description

The change modifies runtime font loading behavior by reducing Inter subsets and disabling Lora
preloading, but the PR adds no automated test covering the resulting head/preload behavior. This
violates the requirement that each new or modified functional code path be covered by a test in the
same change.

Code

apps/web/src/app/layout.tsx[R84-88]

+  subsets: ["latin"],
  weight: ["400", "700"],
  variable: "--font-lora",
-  display: "swap"
+  display: "swap",
+  preload: false

Relevance

●●● Strong

Recent repository precedent accepts regression tests for modified runtime behavior, including layout
and user-visible paths.

PR-#1620
PR-#1521

ⓘ Recommendations generated based on similar findings in past PRs

Evidence

The changed Inter and Lora options alter generated font preload behavior, and the supplied PR
diff contains only apps/web/src/app/layout.tsx with no added or updated test file.

Rule 2667972: Require tests for all new functional code paths
apps/web/src/app/layout.tsx[74-88]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
The font configuration changes preload behavior, but no automated test verifies the generated preload tags and subset configuration.

## Issue Context
Inter should preload only the latin subset, while Lora should not be preloaded. The test should assert the rendered head behavior or the framework font configuration output.

## Fix Focus Areas
- apps/web/src/app/layout.tsx[74-88]
- apps/web/src/specs/app/layout.spec.tsx[1-1]

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

Context sources

✅ Compliance rules (platform): 84 rules

✅ Skills: 6 invoked

  add-feature

  add-query

  add-sdk-mutation

  add-test

  code-review

  debug

Review mode: 🚀 Fast: This is a localized, single-file font-loading configuration change with contained performance impact and no security, API, schema, or concurrency risk.

Tip of the day

💡 Did you know, you can switch off images and animations for a plain-text comment

More tips ↗ | Customize Qodo ↗ | Qodo docs ↗