Master the art of lightning-fast font loading without sacrificing visual stability—because your users shouldn’t have to choose between beautiful typography and smooth performance.
You’ve spent hours perfecting your typography. The custom fonts look stunning, the hierarchy is flawless, and your design team is thrilled. Then you run a Lighthouse audit and watch your Core Web Vitals scores plummet. Cumulative Layout Shift (CLS) warnings flood in. Users complain about text jumping around as fonts load. Your beautiful typography has become a performance nightmare.
This scenario plays out on countless websites every day. Traditional font optimization advice often creates new problems while solving old ones. Set font-display: swap and you eliminate invisible text but introduce jarring layout shifts. Preload every font file and you’ll slow down your initial page load. Use generic fallbacks and watch your carefully crafted design collapse into Times New Roman chaos.
The truth is, effective font performance optimization requires a nuanced approach that goes beyond one-size-fits-all solutions. It demands understanding the intricate relationship between font loading strategies, browser behavior, and user experience. The strategies that actually work are those that eliminate CLS while maintaining fast loading times and preserving your design integrity.
Modern browsers provide powerful tools for controlling font loading behavior, but using them effectively requires understanding when and how to apply each technique. Font subsetting can dramatically reduce file sizes without compromising functionality. Strategic preloading can improve perceived performance when done correctly. Pixel-perfect fallback matching can eliminate layout shift entirely. The key is knowing how to orchestrate these techniques together.
In this deep dive, we’ll explore the proven strategies that deliver measurable improvements in both font performance and CLS scores. These aren’t theoretical concepts—they’re battle-tested techniques used by performance-focused teams at companies like Google and documented extensively in the Web Performance Working Group specifications. You’ll learn not just what to do, but when and why to do it, with practical code examples you can implement immediately.
Table of Contents
Smart Font Subsetting: Cutting File Sizes Without Cutting Corners
Font subsetting is the practice of creating smaller font files that contain only the characters your website actually uses. A typical font file contains thousands of glyphs covering multiple languages, special characters, and symbols you’ll never display. By creating custom subsets, you can reduce font file sizes by 70-90% while maintaining full design fidelity.
Unicode Range Subsetting
Unicode range subsetting involves splitting fonts based on character sets. Instead of loading one massive font file, you load smaller files optimized for specific content types. This approach works particularly well for sites serving multiple languages or those with distinct content sections.
/* Latin characters only */
@font-face {
font-family: 'CustomFont';
src: url('custom-font-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Extended Latin for European languages */
@font-face {
font-family: 'CustomFont';
src: url('custom-font-latin-ext.woff2') format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}The browser automatically downloads only the font files needed for the characters present on the page. If your page contains only basic Latin text, the extended character sets remain unloaded, saving bandwidth and improving performance.
Glyphset Optimization
For maximum efficiency, analyze your actual content to determine exactly which characters you need. Tools like glyphanger can scan your website and generate precise character lists.
# Scan your site and create optimized subsets
npx glyphanger --whitelist --spider --spider-limit=10 https://yoursite.com
npx glyphanger --formats=woff2 --subset=your-font.ttf --whitelist="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789.,!?'"This approach is particularly powerful for headlines and display fonts where you have complete control over the content. Marketing sites often achieve 85-95% file size reductions by subsetting headline fonts to contain only the letters used in their key messaging.
Progressive Loading Strategies
Implement progressive font loading by prioritizing essential characters and loading decorative elements later. Start with a minimal subset containing the most common characters, then progressively enhance with additional glyphs as needed.
/* Critical subset with most common characters */
@font-face {
font-family: 'ProgressiveFont';
src: url('font-critical.woff2') format('woff2');
unicode-range: U+0020-007E; /* Basic ASCII */
font-display: block;
}
/* Extended characters loaded after critical content */
@font-face {
font-family: 'ProgressiveFont';
src: url('font-extended.woff2') format('woff2');
unicode-range: U+00A0-00FF; /* Latin-1 Supplement */
font-display: swap;
}Implementation with Modern Tools
Modern build tools make subsetting seamless. Subfont can automatically analyze your HTML and CSS to generate optimal subsets during your build process.
// subfont configuration
const subfont = require('subfont');
subfont({
inputFiles: ['dist/**/*.html'],
inPlace: true,
formats: ['woff2', 'woff'],
subsetPerPage: false
})
.then(() => console.log('Fonts optimized'));The performance impact of proper subsetting is substantial. Shopify reduced their font loading time by 50% by implementing comprehensive subsetting strategies across their platform. Their approach combined unicode-range declarations with automated subsetting tools to achieve optimal file sizes while maintaining design consistency.
Mastering font-display: Beyond the Swap Strategy
The font-display property controls how browsers handle font loading, but choosing the right value requires understanding your content hierarchy and user experience priorities. While font-display: swap has become the default recommendation, it’s not always the optimal choice for every situation.
Understanding Font Display Values
Each font-display value creates a different user experience during font loading:
block: Hide text for up to 3 seconds while loading the font, then swap. Best for critical branding elements where consistency matters more than immediate readability.swap: Show fallback text immediately, swap to custom font when loaded. Good for body text where readability is paramount.fallback: Brief block period (100ms), then fallback text, with a 3-second swap period. Balanced approach for most use cases.optional: Show fallback text immediately, only swap to custom font if it loads quickly (typically 100ms). Prioritizes performance over typography.
Strategic Font Display Choices
Different content types warrant different strategies. Headlines and branding elements often justify font-display: block to maintain visual consistency, while body text should prioritize immediate readability with font-display: swap or font-display: fallback.
/* Branding: Block briefly to maintain consistency */
@font-face {
font-family: 'BrandFont';
src: url('brand-font.woff2') format('woff2');
font-display: block;
}
/* Headlines: Fallback provides good balance */
@font-face {
font-family: 'HeadlineFont';
src: url('headline-font.woff2') format('woff2');
font-display: fallback;
}
/* Body text: Swap ensures immediate readability */
@font-face {
font-family: 'BodyFont';
src: url('body-font.woff2') format('woff2');
font-display: swap;
}
/* UI elements: Optional prioritizes performance */
@font-face {
font-family: 'UIFont';
src: url('ui-font.woff2') format('woff2');
font-display: optional;
}Performance-First Approaches
For users on slow connections or low-powered devices, font-display: optional ensures the fastest possible experience. This strategy works particularly well for progressive enhancement scenarios where custom fonts are nice-to-have rather than essential.
@media (prefers-reduced-data: reduce) {
@font-face {
font-family: 'CustomFont';
src: url('custom-font.woff2') format('woff2');
font-display: optional; /* Respect user's data preferences */
}
}Conditional Font Loading
Combine font-display strategies with network-aware loading to adapt behavior based on connection quality. The Network Information API allows you to adjust font loading strategies dynamically.
// Adapt font-display based on connection speed
if ('connection' in navigator) {
const connection = navigator.connection;
if (connection.effectiveType === 'slow-2g' || connection.effectiveType === '2g') {
// Use optional display for slow connections
document.documentElement.style.setProperty('--font-display', 'optional');
} else {
// Use swap for faster connections
document.documentElement.style.setProperty('--font-display', 'swap');
}
}@font-face {
font-family: 'AdaptiveFont';
src: url('adaptive-font.woff2') format('woff2');
font-display: var(--font-display, fallback);
}The key to effective font-display usage is testing with real users on real devices. BBC found that using font-display: optional for their news articles improved reading experience on mobile devices, even though it meant some users never saw their custom fonts. The performance improvement was worth the trade-off in visual consistency.
Understanding your audience’s device capabilities and network conditions should drive your font-display choices. Analytics data showing high percentages of mobile users or users from regions with slower internet connections should influence your strategy toward performance-first approaches. Conversely, audiences primarily using high-speed connections might tolerate brief blocking periods for better typography consistency.
Strategic Font Preloading: Quality Over Quantity
Font preloading can dramatically improve perceived performance when implemented correctly, but aggressive preloading often backfires by delaying other critical resources. The key is preloading selectively—focusing only on fonts that provide the highest impact for initial page rendering.
The Preloading Paradox
Every preloaded resource competes for bandwidth during the critical initial page load. Preloading too many fonts can actually slow down your First Contentful Paint (FCP) and Largest Contentful Paint (LCP) scores. The goal is to identify the minimum set of fonts that provide maximum visual impact.
<!-- Preload only the most critical font -->
<link rel="preload" href="/fonts/headline-font.woff2" as="font" type="font/woff2" crossorigin>
<!-- Don't preload every font variation -->
<!-- <link rel="preload" href="/fonts/body-regular.woff2" as="font" type="font/woff2" crossorigin> -->
<!-- <link rel="preload" href="/fonts/body-bold.woff2" as="font" type="font/woff2" crossorigin> -->
<!-- <link rel="preload" href="/fonts/body-italic.woff2" as="font" type="font/woff2" crossorigin> -->Critical Path Analysis
Identify fonts that are essential for above-the-fold content rendering. These typically include brand fonts used in headers or navigation, and primary fonts used for hero text. Body text fonts often don’t need preloading since they’re discovered early in CSS parsing anyway.
/* High-priority: Brand font in header (preload candidate) */
.site-header {
font-family: 'BrandFont', system-ui;
}
/* High-priority: Hero headline (preload candidate) */
.hero-title {
font-family: 'DisplayFont', serif;
}
/* Lower priority: Body text (discovered naturally) */
.content {
font-family: 'BodyFont', system-ui;
}
/* Low priority: Footer text (don't preload) */
.footer {
font-family: 'UIFont', sans-serif;
}Prioritization with Fetch Priority
Use the fetchpriority attribute to ensure your most important fonts load before less critical resources. This is particularly useful when you need to preload multiple fonts.
<!-- Critical brand font loads first -->
<link rel="preload" href="/fonts/brand-font.woff2" as="font" type="font/woff2" crossorigin fetchpriority="high">
<!-- Secondary font can wait -->
<link rel="preload" href="/fonts/display-font.woff2" as="font" type="font/woff2" crossorigin fetchpriority="low">Conditional Preloading
Implement smart preloading that adapts to user context and device capabilities. This prevents slow connections from being overwhelmed by font preloads.
// Conditional font preloading based on connection speed
function preloadFonts() {
if ('connection' in navigator) {
const connection = navigator.connection;
// Only preload on fast connections
if (connection.effectiveType === '4g' && !connection.saveData) {
const fontLink = document.createElement('link');
fontLink.rel = 'preload';
fontLink.as = 'font';
fontLink.type = 'font/woff2';
fontLink.crossOrigin = 'anonymous';
fontLink.href = '/fonts/premium-font.woff2';
document.head.appendChild(fontLink);
}
}
}
// Run after critical resources have loaded
if (document.readyState === 'complete') {
preloadFonts();
} else {
window.addEventListener('load', preloadFonts);
}Monitoring Preload Effectiveness
Use Resource Timing API to validate that your preloaded fonts are actually being used effectively. Unused preloads waste bandwidth and delay other resources.
// Check if preloaded fonts are being used
function auditFontPreloads() {
const preloadedFonts = document.querySelectorAll('link[rel="preload"][as="font"]');
const resourceEntries = performance.getEntriesByType('resource');
preloadedFonts.forEach(link => {
const fontURL = new URL(link.href).pathname;
const resourceEntry = resourceEntries.find(entry => entry.name.includes(fontURL));
if (resourceEntry) {
console.log(`Font ${fontURL}:`, {
preloadTime: resourceEntry.responseEnd,
used: resourceEntry.transferSize > 0
});
}
});
}
// Run audit after page load
window.addEventListener('load', () => {
setTimeout(auditFontPreloads, 1000);
});Service Worker Font Caching
Combine preloading with service worker caching for optimal repeat visit performance. Cache preloaded fonts immediately to ensure they’re available for subsequent page loads.
// Service worker font caching strategy
self.addEventListener('fetch', event => {
if (event.request.destination === 'font') {
event.respondWith(
caches.open('fonts-v1').then(cache => {
return cache.match(event.request).then(response => {
if (response) {
return response;
}
return fetch(event.request).then(fetchResponse => {
cache.put(event.request, fetchResponse.clone());
return fetchResponse;
});
});
})
);
}
});The most successful preloading strategies focus on impact rather than coverage. Smashing Magazine improved their font loading performance by preloading only their headline font while allowing body text fonts to load naturally. This selective approach reduced their LCP by 200ms while maintaining excellent typography across their entire site.
Fallback Font Matching: Eliminating Layout Shift at the Source
Cumulative Layout Shift occurs when fallback fonts have different dimensions than your custom fonts. The solution isn’t faster loading—it’s creating fallback fonts that match your custom fonts so precisely that users can’t tell when the swap happens.
Understanding Layout Shift Mechanics
CLS happens because fonts have different metrics: x-height, cap-height, ascender, descender, and advance width. When browsers swap from a fallback font to your custom font, these dimensional differences cause text to reflow, creating the jarring visual jump users experience.
/* Before: Mismatched fallback causes layout shift */
.headline {
font-family: 'CustomDisplay', Georgia;
/* Georgia and CustomDisplay have very different metrics */
}
/* After: Matched fallback eliminates layout shift */
.headline {
font-family: 'CustomDisplay', 'CustomDisplay-fallback';
}
@font-face {
font-family: 'CustomDisplay-fallback';
src: local('Georgia');
ascent-override: 85%;
descent-override: 22%;
line-gap-override: 0%;
size-adjust: 107%;
}CSS Font Metric Overrides
Modern CSS provides font descriptor properties that let you adjust system fonts to match your custom fonts exactly. These properties work by modifying the font’s internal metrics without changing the actual font files.
/* Match Helvetica to custom font metrics */
@font-face {
font-family: 'CustomFont-fallback';
src: local('Arial'), local('Helvetica');
ascent-override: 90%;
descent-override: 25%;
line-gap-override: 0%;
size-adjust: 95%;
}
/* Use the matched fallback */
.content {
font-family: 'CustomFont', 'CustomFont-fallback', sans-serif;
}The size-adjust property scales the entire font, while ascent-override, descent-override, and line-gap-override adjust specific vertical metrics. Getting these values right requires measurement and testing, but the payoff is zero layout shift during font swaps.
Automated Fallback Generation
Tools like Fontpie can automatically generate fallback font CSS with correct metrics. This eliminates the guesswork and ensures pixel-perfect matching.
# Generate fallback font metrics automatically
npx fontpie ./fonts/custom-font.woff2 --fallbacks Arial --output ./css/This generates CSS that looks like:
@font-face {
font-family: "custom-font-fallback";
src: local("Arial");
ascent-override: 87.5%;
descent-override: 21.25%;
line-gap-override: 0%;
size-adjust: 108.26%;
}Manual Metric Calculation
For precise control, measure your fonts manually using tools like FontForge or online font analyzers. The goal is matching the cap-height and x-height ratios between your custom font and fallback font.
// Helper function to calculate size-adjust ratio
function calculateSizeAdjust(customFont, fallbackFont) {
const customRatio = customFont.xHeight / customFont.unitsPerEm;
const fallbackRatio = fallbackFont.xHeight / fallbackFont.unitsPerEm;
return (customRatio / fallbackRatio) * 100;
}
// Example measurements
const interMetrics = { xHeight: 1118, unitsPerEm: 2048 };
const arialMetrics = { xHeight: 1062, unitsPerEm: 2048 };
const sizeAdjust = calculateSizeAdjust(interMetrics, arialMetrics);
// Result: ~105.3%Cross-Platform Consistency
Different operating systems ship with different versions of system fonts, which can have slightly different metrics. Create robust fallback chains that work across Windows, macOS, and Linux.
/* Robust cross-platform fallback */
@font-face {
font-family: 'CustomFont-fallback';
src: local('Segoe UI'), /* Windows */
local('San Francisco'), /* macOS */
local('Ubuntu'), /* Linux */
local('Arial'); /* Universal fallback */
size-adjust: 94%;
ascent-override: 87%;
descent-override: 23%;
}Testing Fallback Effectiveness
Validate your fallback matching by temporarily blocking your custom fonts and comparing layouts. Use browser dev tools to disable network requests for font files.
// Test fallback accuracy by blocking custom fonts
function testFallbacks() {
const fontLinks = document.querySelectorAll('link[rel="preload"][as="font"]');
fontLinks.forEach(link => {
link.href = 'data:text/plain,'; // Block the font
});
// Take screenshot, then reload with fonts enabled
setTimeout(() => window.location.reload(), 2000);
}
// Add to browser console for testing
// testFallbacks();Performance Impact Measurement
Successful fallback matching should eliminate layout shift entirely while maintaining fast font loading. Monitor your CLS scores before and after implementing matched fallbacks.
// Measure CLS improvement
const observer = new PerformanceObserver(list => {
for (const entry of list.getEntries()) {
if (entry.entryType === 'layout-shift' && !entry.hadRecentInput) {
console.log('Layout shift:', entry.value);
}
}
});
observer.observe({ entryTypes: ['layout-shift'] });Perfect fallback matching requires iteration and testing, but the results are worth the effort. CSS-Tricks documented their font optimization process and achieved zero CLS scores by implementing precise fallback font matching across their entire site. Their approach combined automated tools with manual fine-tuning to create fallbacks that were visually indistinguishable from the custom fonts during the loading process.
The goal is making font swaps so seamless that users never notice them happening. When done correctly, matched fallbacks provide the best of both worlds: immediate text rendering with zero layout shift once custom fonts load.
Integration and Testing: Orchestrating Font Performance Strategies
The most effective font optimization comes from combining multiple strategies into a cohesive system. Smart subsetting, strategic preloading, optimized font-display values, and matched fallbacks work together to create fast, stable typography that enhances rather than hinders user experience.
Comprehensive Implementation Strategy
A complete font optimization system addresses every stage of the font loading lifecycle. Start with subset analysis to minimize file sizes, then implement preloading for critical fonts, configure appropriate font-display values for different content types, and create matched fallbacks to eliminate layout shift.
<!DOCTYPE html>
<html>
<head>
<!-- Preload critical fonts only -->
<link rel="preload" href="/fonts/brand-latin.woff2" as="font" type="font/woff2" crossorigin>
<style>
/* Brand font with matched fallback */
@font-face {
font-family: 'Brand-fallback';
src: local('Arial Black'), local('Arial-BoldMT');
size-adjust: 92%;
ascent-override: 88%;
descent-override: 24%;
}
@font-face {
font-family: 'BrandFont';
src: url('/fonts/brand-latin.woff2') format('woff2');
font-display: block;
unicode-range: U+0000-00FF;
}
/* Body font with progressive loading */
@font-face {
font-family: 'Body-fallback';
src: local('system-ui'), local('Segoe UI'), local('Arial');
size-adjust: 100.5%;
}
@font-face {
font-family: 'BodyFont';
src: url('/fonts/body-latin.woff2') format('woff2');
font-display: swap;
unicode-range: U+0000-00FF;
}
.brand-heading {
font-family: 'BrandFont', 'Brand-fallback', sans-serif;
}
.content {
font-family: 'BodyFont', 'Body-fallback', system-ui;
}
</style>
</head>
</html>Performance Monitoring Setup
Implement comprehensive monitoring to track the effectiveness of your font optimization strategies. Monitor both loading performance and layout stability metrics.
// Font performance monitoring
class FontPerformanceMonitor {
constructor() {
this.metrics = {
fontLoadTimes: new Map(),
clsScore: 0,
fcp: 0,
lcp: 0
};
this.initializeObservers();
}
initializeObservers() {
// Monitor font loading
if ('fonts' in document) {
document.fonts.ready.then(() => {
console.log('All fonts loaded');
this.trackFontLoadTimes();
});
}
// Monitor layout shifts
const clsObserver = new PerformanceObserver(list => {
for (const entry of list.getEntries()) {
if (!entry.hadRecentInput) {
this.metrics.clsScore += entry.value;
}
}
});
clsObserver.observe({ entryTypes: ['layout-shift'] });
// Monitor Core Web Vitals
const perfObserver = new PerformanceObserver(list => {
for (const entry of list.getEntries()) {
if (entry.entryType === 'paint' && entry.name === 'first-contentful-paint') {
this.metrics.fcp = entry.startTime;
}
if (entry.entryType === 'largest-contentful-paint') {
this.metrics.lcp = entry.startTime;
}
}
});
perfObserver.observe({ entryTypes: ['paint', 'largest-contentful-paint'] });
}
trackFontLoadTimes() {
const resourceEntries = performance.getEntriesByType('resource');
resourceEntries
.filter(entry => entry.initiatorType === 'link' && entry.name.includes('font'))
.forEach(entry => {
const fontName = entry.name.split('/').pop();
this.metrics.fontLoadTimes.set(fontName, entry.responseEnd);
});
}
report() {
return {
clsScore: this.metrics.clsScore,
fontLoadTimes: Object.fromEntries(this.metrics.fontLoadTimes),
coreWebVitals: {
fcp: this.metrics.fcp,
lcp: this.metrics.lcp,
cls: this.metrics.clsScore
}
};
}
}
// Initialize monitoring
const fontMonitor = new FontPerformanceMonitor();
// Report metrics after page load
window.addEventListener('load', () => {
setTimeout(() => {
console.log('Font Performance Report:', fontMonitor.report());
}, 3000);
});A/B Testing Font Strategies
Test different font optimization approaches with real users to validate performance improvements. Focus on metrics that matter to your specific use case and audience.
// A/B test font loading strategies
function initializeFontExperiment() {
const variant = Math.random() < 0.5 ? 'optimized' : 'baseline';
if (variant === 'optimized') {
// Load optimized font strategy
loadOptimizedFonts();
gtag('event', 'font_experiment', {
'variant': 'optimized',
'event_category': 'performance'
});
} else {
// Load baseline font strategy
loadBaselineFonts();
gtag('event', 'font_experiment', {
'variant': 'baseline',
'event_category': 'performance'
});
}
}
function loadOptimizedFonts() {
// Implement full optimization stack
const preloadLink = document.createElement('link');
preloadLink.rel = 'preload';
preloadLink.as = 'font';
preloadLink.href = '/fonts/optimized-font.woff2';
preloadLink.crossOrigin = 'anonymous';
document.head.appendChild(preloadLink);
}Common Implementation Pitfalls
Avoid these frequent mistakes that can undermine your font optimization efforts:
Over-preloading: Preloading too many fonts delays critical resources. Limit preloads to 1-2 truly essential fonts.
Incorrect crossorigin attributes: Font preloads require crossorigin even for same-origin requests due to CORS requirements.
Mismatched unicode-range declarations: Ensure your subset files actually contain the characters specified in unicode-range declarations.
Ignoring font-variation-settings: Variable fonts require different optimization strategies than static fonts.
<!-- Common mistake: Missing crossorigin -->
<!-- <link rel="preload" href="/font.woff2" as="font" type="font/woff2"> -->
<!-- Correct: Include crossorigin for fonts -->
<link rel="preload" href="/font.woff2" as="font" type="font/woff2" crossorigin>Fallback font cascading issues: Test fallback fonts across different operating systems to ensure consistent rendering.
Inadequate testing on slow connections: Use Chrome DevTools Network throttling to test font loading on 3G and slower connections.
Continuous Optimization Process
Font optimization isn’t a one-time implementation—it requires ongoing monitoring and refinement. Set up automated alerts for performance regressions and regularly audit your font loading strategies.
// Automated performance regression detection
function checkFontPerformanceRegression() {
const currentCLS = fontMonitor.report().clsScore;
const baseline = 0.1; // Your target CLS threshold
if (currentCLS > baseline) {
// Send alert to monitoring system
fetch('/api/performance-alert', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
metric: 'CLS',
value: currentCLS,
threshold: baseline,
url: window.location.href,
timestamp: Date.now()
})
});
}
}
// Run performance checks periodically
setInterval(checkFontPerformanceRegression, 30000);The most successful font optimization implementations combine technical excellence with user-focused metrics. Medium’s engineering team documented their font optimization journey, showing how they reduced CLS by 95% while maintaining fast loading times across their global audience. Their approach emphasized continuous measurement and iterative improvement rather than one-time optimization.
Remember that font performance optimization is ultimately about user experience. The best technical implementation means nothing if it doesn’t translate to measurable improvements in user engagement, reading completion rates, and overall site satisfaction. Monitor both technical metrics and user behavior to ensure your optimization efforts are truly effective.