If your APG vNext forum is using web fonts (e.g., Google Fonts), you can improve their rendering quality on modern displays by adding CSS anti-aliasing rules.
Adding Anti-Aliasing via CSS
Open your active theme's main CSS file (found in App_Themes/YourTheme/) and add the following to the body or font-specific selectors:
body, .forum-content {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
Explanation
-webkit-font-smoothing: antialiased— enables sub-pixel antialiasing on WebKit browsers (Chrome, Safari on macOS).-moz-osx-font-smoothing: grayscale— enables grayscale antialiasing in Firefox on macOS.text-rendering: optimizeLegibility— enables OpenType font features including kerning, improving readability especially at smaller font sizes.
High-DPI (Retina) Displays
On Retina and high-DPI displays, fonts generally render sharply without antialiasing. Use a media query to limit antialiasing to standard-resolution screens:
@media (-webkit-max-device-pixel-ratio: 1) {
body { -webkit-font-smoothing: antialiased; }
}
For more theme customization tips, see the Tutorials section.
Applying Anti-Aliasing for Web Fonts in APG vNext
Font rendering quality in a browser-based forum like APG vNext depends on the operating system's font rendering engine and a handful of CSS properties that hint to the browser how to anti-alias text. Getting this right is especially important for the forum's post content area, where members read long blocks of text — poor anti-aliasing causes eye strain and perceived unprofessionalism.
CSS Font Smoothing Properties
There are two non-standard but widely supported CSS properties that control font anti-aliasing:
/* APG vNext skin — apply to body and post content */
body,
.apg-post-body,
.apg-thread-title {
/* macOS / iOS */
-webkit-font-smoothing: antialiased;
/* Firefox on macOS */
-moz-osx-font-smoothing: grayscale;
/* Windows ClearType hint (limited effect) */
text-rendering: optimizeLegibility;
}antialiased uses greyscale anti-aliasing (thinner, crisper on Retina displays). auto (the default) uses subpixel anti-aliasing (slightly bolder on non-Retina). For dark-theme APG vNext skins, antialiased generally produces better results.
Web Font Loading and Anti-Aliasing Interaction
APG vNext loads web fonts (typically Google Fonts or a self-hosted font stack). The anti-aliasing hint only applies after the font is loaded. During the loading phase, the browser renders fallback system fonts, which may use different anti-aliasing settings. This causes a visual flash (FOUT — Flash of Unstyled Text). Mitigate it with font-display: swap and a well-matched fallback:
@font-face {
font-family: 'Inter';
src: url('/assets/fonts/inter-v13-latin-regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap; /* show fallback, swap when loaded */
}
body {
/* Size-adjusted fallback reduces layout shift during swap */
font-family: 'Inter', 'Arial', system-ui, sans-serif;
}Variable Font Optimisation
APG vNext 5.x supports variable fonts for the admin panel and skin typography. Variable fonts reduce HTTP requests (one file covers all weights) and provide smoother weight transitions:
@font-face {
font-family: 'Inter Variable';
src: url('/assets/fonts/inter-variable.woff2') format('woff2-variations');
font-weight: 100 900;
font-display: swap;
}Testing Font Rendering
Cross-Platform Checklist
- Windows + Chrome: ClearType active — check for overly bold text at small sizes
- macOS + Safari: Native Quartz rendering — verify
antialiasedlooks crisp on Retina - Android + Chrome: Freetype rendering — test at 375px viewport
- Linux + Firefox: Freetype + fontconfig — check that
-moz-osx-font-smoothingapplies
Performance: Self-Hosting Fonts vs. Google Fonts CDN
APG vNext skin templates that use Google Fonts load them from Google's CDN, which requires a DNS lookup and TLS handshake to fonts.googleapis.com and fonts.gstatic.com before the font can be downloaded. This adds 50–200ms of latency on first load. Self-hosting fonts eliminates this by serving the font files from your own domain alongside other forum assets.
Steps to Self-Host a Google Font
- Visit google-webfonts-helper (or download directly from Google Fonts) to get WOFF2 files
- Upload to your APG vNext server:
/assets/fonts/inter-v13-latin-regular.woff2 - Replace the Google Fonts
<link>in your skin's header template with a@font-facedeclaration:
/* Replace this (Google CDN): */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');
/* With this (self-hosted): */
@font-face {
font-family: 'Inter';
src: url('/assets/fonts/inter-v13-latin-400.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inter';
src: url('/assets/fonts/inter-v13-latin-600.woff2') format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
}Preloading Critical Fonts
For the primary body font used throughout APG vNext forum pages, add a preload hint in the <head> to start downloading it as early as possible:
<!-- APG vNext skin header template: add before other stylesheets -->
<link rel="preload"
href="/assets/fonts/inter-v13-latin-400.woff2"
as="font"
type="font/woff2"
crossorigin="anonymous">This instructs the browser to begin downloading the font immediately on page parse, before it encounters the @font-face declaration in the CSS. In practice, this reduces FOUT (Flash of Unstyled Text) significantly because the font is ready by the time CSS parsing is complete.
Measuring Font Rendering Impact
Use Lighthouse or WebPageTest to measure font-related performance. Key metrics to watch:
- FCP (First Contentful Paint): should be under 1.8s — delayed by render-blocking font loads
- CLS (Cumulative Layout Shift): caused by font swaps that change text block height — mitigated by size-adjusted fallbacks
- LCP (Largest Contentful Paint): if the LCP element is a text block, font load time directly affects LCP
Related Resources
Looking for more help? Browse the support forum or check the Knowledge Base.