Font memuat

TL;DR — sebuah custom web font adalah sebuah file browser memiliki untuk download sebelum ini dapat tampilkan Anda text di ini. Sementara ini menunggu, ini either hides text atau menampilkan sebuah backup font dan swaps kemudian — dan either pilihan dapat slow down atau visually jump Anda halaman. Anda control itu perilaku dengan satu CSS line (font-display), dan Anda dapat speed font up oleh preloading ini. jika Anda tidak perlu sebuah custom font, sebuah sistem font memiliki tidak ada apa pun untuk muat dan tidak ada apa pun untuk shift.

Apa font memuat adalah

Ketika Anda gunakan custom font — sebuah brand font, sebuah Google Font, apa pun itu tidak sudah pada pengunjung’s device — browser memiliki untuk go fetch itu font file sebelum ini dapat paint Anda text di ini. itu download takes time, dan browser memiliki untuk decide apa untuk tampilkan di meantime.

ini memiliki dua basic options, dan keduanya memiliki annoying names:

• FOIT (Flash dari Invisible Text): hide text until custom font arrives. halaman looks blank di mana text seharusnya menjadi, lalu ini pops di.
• FOUT (Flash dari Unstyled Text): tampilkan sebuah wajar backup font right away, lalu tukar untuk custom font setelah ini memuat. Anda see text immediately, tetapi ini dapat visibly “jump” (terjemahan) “jump” ketika tukar happens jika dua fonts tidak yang sama size.

mengapa ini penting untuk SEO

Neither dari itu adalah free. FOIT dapat delay ketika Anda main text muncul, yang hurts Largest Contentful Paint (LCP). FOUT dapat penyebab sebuah layout shift ketika font swaps di, yang hurts Cumulative Layout Shift (CLS). Keduanya LCP dan CLS adalah Core Web Vitals — nyata-pengguna metrics Google menggunakan sebagai bagian dari pengalaman halaman. So font memuat tidak hanya sebuah design detail; ini adalah sebuah SEO teknis lever.

sederhana memperbaiki

• gunakan sistem font jika Anda dapat. ada tidak ada apa pun untuk download, so ada Tidak delay dan Tidak shift. ini adalah paling reliable perbaiki, penuh berhenti.
• jika Anda perlu sebuah custom font, set font-display. menambahkan font-display: swap (atau optional) untuk Anda font tells browser tidak untuk leave text invisible sementara ini menunggu.
• Preload penting font. sebuah <link rel="preload"> tag tells browser untuk grab font early alih-alih stumbling pada ini kemudian.

ingin penuh versi — font-display nilai table, preload + optional combo, matching Anda fallback font’s metrics, dan Google vs. self-hosting? Switch untuk Advanced tab.

TL;DR — Custom web fonts adalah render-affecting external resources. mereka hit LCP ketika sebuah render-blocking font delays Anda largest text element, dan CLS ketika fallback-untuk-web-font tukar reflows layout. dua default behaviors — FOIT (invisible until dimuat) dan FOUT (fallback lalu tukar) — setiap fail differently. font-display adalah utama lever (swap jaminan FOUT; optional memberikan sebuah ~100ms window dan lalu commits, killing kemudian tukar). Preloading memperbaiki late font penemuan; preload + font-display: optional adalah combo Google’s own engineering singled out untuk eliminating layout jank. tetapi passing Lighthouse font-display periksa tidak perbaiki CLS — itu perlu sebuah metrically-cocok fallback (atau size-adjust/ascent-override overrides). None dari ini adalah sebuah direct peringkat factor; ini feeds CLS/LCP, yang adalah pengalaman halaman sinyal.

Mengapa fonts adalah sebuah special case

sebagian besar performa masalah adalah tentang bytes — sebuah image adalah too big, sebuah script blocks main utas. Fonts adalah worse daripada itu di satu spesifik cara: mereka’re sebuah external resource dan mereka perubahan metrics dari Anda text. So sebuah font dapat hurt Anda dua berbeda cara di setelah. ini dapat delay ketika text paints (sebuah LCP masalah), dan ini dapat perubahan size dan shape dari itu text setelah ini adalah sudah pada screen (sebuah CLS masalah).

dua default browser behaviors adalah worth naming karena seluruh topic hangs off them:

• FOIT (Flash dari Invisible Text): text di custom font adalah dirender invisible until font memuat atau sebuah timeout adalah hit — secara historis up untuk sebuah ~3-kedua block di sebagian besar browser.
• FOUT (Flash dari Unstyled Text): fallback font menampilkan immediately, lalu mendapatkan ditukar untuk web font setelah ini memuat.

FOIT feels “cleaner” (terjemahan) “cleaner” (Tidak jump) tetapi risks sebuah rendering delay. FOUT feels lebih cepat (text now) tetapi risks sebuah layout shift pada tukar. Neither adalah secara otomatis safe — itu’s core idea untuk hold onto.

ini juga helps untuk terpisah pipeline ke distinct stages, karena success di satu stage tidak jaminan success di berikutnya. sebuah @font-face aturan hanya declares sebuah face — browser fetches sebenarnya font file hanya setelah matching styled text pada halaman memerlukan ini (declaration dan matching adalah terpisah langkah dari fetch). itu fetch adalah subject untuk CORS jika font adalah disajikan cross-origin, so sebuah stylesheet itu memuat cleanly tidak jaminan font respons itself carries right cross-origin permission — sebuah missing header di sana fails silently sebagai sebuah font itu tidak pernah renders. dan sebuah successful fetch masih tidak jaminan sebuah stable-looking halaman: cold-cache, warm-cache, dan sudah-cached font status dapat produce berbeda penemuan dan tukar timing, so testing satu repeat pemuatan halaman di DevTools tidak tell Anda apa sebuah pertama-time pengunjung sebenarnya sees.

Bagaimana fonts memengaruhi LCP

jika largest terlihat element pada Anda halaman adalah text — sebuah big headline, sebuah hero paragraf — lalu font itu text menggunakan dapat become bagian dari Anda LCP path. Per web.dev’s LCP guidance, LCP resource dari sebuah halaman, jika ini memiliki satu, akan menjadi either sebuah image atau sebuah web font. sebuah render-blocking font itu leaves itu text invisible (FOIT) pushes Anda LCP out until font arrives.

perbaiki di sini adalah straightforward dan muncul straight dari Google. pada web.dev’s mengoptimalkan Largest Contentful Paint guide:

“If you set a font-display value of anything other than auto or block, then text will always be visible during load, and LCP won’t be blocked on an additional network request.” (terjemahan) “Jika Anda menetapkan nilai font-display selain auto atau block, teks akan tetap terlihat selama pemuatan, dan LCP tidak akan terhalang oleh permintaan jaringan tambahan.” — web.dev

dengan kata lain: swap, fallback, atau optional semua pertahankan text terlihat selama muat, so Anda LCP tidak hostage untuk font permintaan.

Bagaimana fonts memengaruhi CLS

CLS muncul dari tukar. Anda fallback font dan Anda web font hampir tidak pernah memiliki identical character widths dan line heights, so ketika browser replaces satu dengan lainnya, text reflows — dan semuanya di bawah ini moves. itu’s sebuah layout shift.

counterintuitive bagian, dan hal sebagian besar orang miss: FOIT penyebab CLS too. bahkan invisible text adalah masih laid out menggunakan fallback font’s metrics, so tukar masih moves hal. dari web.dev’s mengoptimalkan Cumulative Layout Shift guide:

“Keduanya approaches dapat penyebab layout shifts. Even jika itu text adalah invisible, ini masih laid out menggunakan itu fallback font, so ketika itu web font loads, itu text block dan itu sekitarnya konten shift” (terjemahan) “Keduanya approaches dapat penyebab layout shifts. bahkan jika text adalah invisible, ini adalah masih laid out menggunakan fallback font, so ketika web font memuat, text block dan sekitarnya konten shift” — web.dev

yang sama halaman frames dua behaviors plainly:

“Itu fallback font adalah ditukar dengan itu web font, incurring a Flash dari Unstyled Text (FOUT). ‘Invisible’ text adalah displayed menggunakan itu fallback font until a web font adalah tersedia dan itu text adalah membuat visible (FOIT—flash dari invisible text).” (terjemahan) “ fallback font adalah ditukar dengan web font, incurring sebuah Flash dari Unstyled Text (FOUT). ‘Invisible’ text adalah displayed menggunakan fallback font until sebuah web font adalah tersedia dan text adalah dibuat terlihat (FOIT—flash dari invisible text).” — web.dev

I’ve mengatakan yang sama hal di plainer istilah di my Ahrefs tulis-up pada Cumulative Layout Shift: ketika sebuah font memuat atau perubahan, Anda end up dengan sebuah noticeable shift — sebuah FOIT atau sebuah FOUT. ini adalah satu dari paling umum dunia nyata CLS penyebab, right alongside images tanpa dimensions dan konten injected setelah muat.

font-display property

font-display adalah sebuah @font-face descriptor itu controls dua windows: block period (bagaimana panjang browser hides text menunggu untuk font) dan tukar period (bagaimana panjang, setelah block period, ini akan masih tukar di web font setelah ini arrives). Per web.dev’s Best Practices untuk Fonts:

MDN’s font-display reference, yang Google’s own docs tautan untuk sebagai spec sumber, mendeskripsikan them tersely: swap memberikan sebuah extremely kecil block period dan sebuah infinite tukar period; optional memberikan sebuah extremely kecil block period dan Tidak tukar period. itu “Tidak tukar period” (terjemahan) “Tidak tukar period” adalah seluruh poin dari optional — setelah block period window closes, whatever font adalah di gunakan tetap, so ada Tidak kemudian tukar untuk shift layout.

Satu caution pada angka di itu table: CSS specification itself hanya defines block/tukar period categories — pendek, extremely kecil, infinite, none — dan leaves tepat duration untuk browser. millisecond/kedua figures di atas adalah web.dev’s terdokumentasi Chromium perilaku, tidak sebuah cross-browser jaminan. Treat them sebagai illustrative alih-alih sebuah spec promise, dan periksa saat ini angka untuk whichever browser/versi Anda’re sebenarnya testing terhadap.

Yang nilai untuk yang konten? web.dev’s own advice adalah itu ini dapat menjadi mixed: gunakan swap untuk branding dan lainnya visually distinctive elements (di mana seeing brand font penting dan sebuah brief shift adalah acceptable), dan optional untuk body text (di mana CLS-sensitivity wins dan Anda’d rather tidak shift). itu’s sebuah genuinely berguna aturan dari thumb — jangan apply satu nilai situs-wide oleh reflex.

Preloading fonts

Font permintaan adalah ditemukan late. browser tidak know ini perlu sebuah font until ini memiliki parsed Anda CSS, cocok sebuah @font-face aturan untuk sebuah element pada halaman, dan decided itu element adalah terlihat. hanya lalu melakukan ini mulai download. sebuah <link rel="preload"> pendek-circuits itu:

<link rel="preload" href="/fonts/brand.woff2" as="font" type="font/woff2" crossorigin>

itu tells browser untuk mulai fetching font immediately, di parallel dengan semuanya else, alih-alih menunggu untuk menemukan ini. Bing’s engineering team mendeskripsikan persis ini mechanism pada mereka own penelusuran halaman (lebih di Quotes tab): preload tags di <head> kick off font downloads right away, whereas tanpa them browser tidak akan fetch fonts until ini memiliki parsed CSS dan ditemukan matching elements.

** strongest combination** per Google’s own writeup adalah preload + font-display: optional. web.dev’s mencegah layout shifting dan FOIT oleh preloading opsional fonts panggilan combining <link rel="preload"> dengan font-display: optional paling effective cara untuk jaminan Tidak layout jank ketika rendering custom fonts, dan notes itu Chrome (dari versi 83) eliminated layout shifting itu digunakan untuk happen ketika preloading opsional fonts. preload memberikan font -nya best shot di arriving di dalam ~100ms window; optional jaminan itu jika ini tidak, Anda tidak pay untuk ini dengan sebuah shift.

Ketika tidak untuk preload. Preloading tidak free. web.dev warns itu preload adalah highly effective di membuat fonts discoverable early, tetapi ini muncul di cost dari taking browser resources away dari memuat lainnya resources. Preload satu atau dua fonts Anda sebenarnya perlu di atas fold — preloading setiap font weight Anda own dapat starve lebih penting resources dan membuat halaman lebih lambat overall.

pastikan preload sebenarnya mendapatkan reused. sebuah preload hanya helps jika browser dapat match ini untuk nyata font permintaan — href, as="font", type, dan crossorigin mode semua memiliki untuk line up dengan apa CSS @font-face aturan ends up requesting, atau Anda’ll mendapatkan sebuah “unused preload” (terjemahan) “unused preload” warning dan sebuah wasted kedua download alih-alih sebuah lebih cepat satu. Preloading dapat juga bypass unicode-range selection, pulling down sebuah subset Anda tidak sebenarnya perlu untuk itu halaman. Konfirmasi match di DevTools’ Network panel: Anda ingin see satu permintaan untuk itu font, kicked off oleh preload, tidak dua.

Memperbaiki shift itself: fallback metric matching

Di sini’s trap: passing Lighthouse font-display periksa melakukan tidak perbaiki CLS. Google’s Lighthouse docs adalah jelas itu FOIT dan FOUT memiliki yang sama impact pada CLS setelah custom font replaces temporary sistem font. So swap membuat Anda text terlihat (baik untuk LCP dan untuk “invisible text” (terjemahan) “invisible text” audit) tetapi leaves tukar shift di place.

untuk kill shift ketika sebuah tukar melakukan happen, Anda memiliki untuk membuat fallback font dan web font take up yang sama space. Dua levers:

1. Pick sebuah metrically-similar sistem fallback di Anda font-family stack, rather daripada sebuah single custom font name dengan tidak ada apa pun sensible behind ini. closer fallback’s character widths dan line height adalah untuk web font, lebih kecil shift.
2. Override web font’s metrics dengan size-adjust, ascent-override, descent-override, dan line-gap-override pada @font-face aturan, so web font adalah forced untuk match fallback’s box. web.dev lists ini descriptors, dan Smashing Magazine’s deep dive pada CSS font descriptors walks melalui them di detail jika Anda ingin go semua cara.

setiap dari itu four descriptors adjusts sebuah berbeda metric, dan saat ini browser mendukung varies oleh descriptor — periksa compatibility sebelum leaning pada apa pun single satu. Validate terhadap sebenarnya weights, styles, dan scripts Anda ship, too: sebuah perbaiki confirmed pada Anda regular-weight Latin text tidak jaminan bold, italic, atau sebuah non-Latin script behave yang sama cara.

DebugBear’s Memperbaiki Layout Shifts Disebabkan oleh Web Fonts adalah sebuah baik end-untuk-end walkthrough dari ini: mengukur impact, identify masalah font, apply font-display, choose sebuah better fallback, lalu adjust font metrics.

Google Fonts vs. self-hosting

Anda tidak memiliki untuk self-host untuk control font-display. Google Fonts CSS2 API accepts sebuah display kueri parameter — https://fonts.googleapis.com/css2?family=Roboto&display=swap sets font-display secara langsung pada disajikan @font-face aturan. Addy Osmani’s post pada shipping font-display untuk Google Fonts covers perubahan: previously satu-satunya cara untuk specify font-display untuk Google Fonts adalah untuk self-host them, dan ini dihapus itu perlu.

Self-hosting masih wins pada satu hal: ini eliminates extra DNS lookup dan connection untuk fonts.googleapis.com dan fonts.gstatic.com. itu’s sebuah nyata latency cost, dan satu dari alasan sebuah preconnect resource hint untuk itu origins helps jika Anda melakukan gunakan Google Fonts. Weigh connection overhead terhadap convenience — dan jangan assume “it’s from Google, so it’s fine.” (terjemahan) “ini adalah dari Google, so ini adalah fine.” sebuah copy-pasted Google Fonts embed adalah masih sebuah render-blocking stylesheet permintaan plus sebuah font permintaan, dan older embeds dapat tidak carry sebuah display nilai di semua.

ada Tidak universal winner antara dua options — ini muncul down untuk yang scripts dan weights Anda sebenarnya ship, Anda caching setup, dan font’s license istilah. Jalankan perbandingan terhadap Anda own halaman alih-alih menggunakan default untuk whichever satu sebuah tutorial recommended.

Variable fonts

sebuah variable font packs banyak weights dan styles (regular, bold, condensed, italic) ke sebuah single file dengan adjustable axes. itu dapat menjadi sebuah net win — satu permintaan alih-alih dari six — jika Anda sebenarnya gunakan several dari itu variants. tetapi sebuah penuh variable font adalah sebuah bigger single file daripada satu static weight, so jika Anda hanya ever render satu weight, shipping seluruh variable font dapat menjadi lebih lambat, tidak lebih cepat. Subset ini untuk axes dan characters Anda gunakan, sajikan ini sebagai WOFF2 so ini adalah compressed, dan periksa font’s license — tidak setiap foundry permits subsetting atau self-hosting.

Reducing file di pertama place

Semuanya di atas manages ketika font memuat. Anda dapat juga shrink apa memuat. Font subsetting strips out glyphs Anda tidak gunakan (sebuah semua-Latin situs tidak perlu Cyrillic dan CJK ranges), dan WOFF2 adalah well-compressed format untuk sajikan. sebuah lebih kecil font file adalah lebih mungkin untuk arrive di dalam optional’s window dan lebih kecil kemungkinannya untuk block LCP — subsetting dan compression adalah complementary lever untuk font-display dan preload, tidak sebuah alternative untuk them.

ada Tidak single “correct” (terjemahan) “correct” subset atau universal byte-savings percentage di sini, though — ini bergantung pada scripts, characters, dan weights Anda spesifik audience sebenarnya perlu. sebuah angka Anda saw di seseorang else’s case study atau benchmark tidak sebuah promise untuk Anda halaman; mengukur Anda own font permintaan sebelum dan setelah.

adalah ini sebuah peringkat factor?

menjadi precise di sini. Font memuat adalah tidak sebuah direct peringkat factor. Apa ini memengaruhi adalah CLS dan LCP, yang adalah Core Web Vitals dan bagian dari Google’s pengalaman halaman sinyal. dan pengalaman halaman adalah sebuah lightweight, tiebreaker-style sinyal — relevance dan quality dominate; ini helps decide antara jika tidak comparable hasil, tidak antara sebuah great halaman dan sebuah poor satu. So honest framing adalah: perbaiki Anda font memuat karena ini adalah sebuah genuine pengguna-experience masalah itu happens untuk feed dua peringkat inputs — tidak karena sebuah font-display nilai akan move Anda up hasil pada -nya own.

My own take

di seluruh my Ahrefs CLS dan LCP guides I’ve landed pada yang sama priority order, dan ini masih holds. jika Anda dapat gunakan sistem font, melakukan itu — ada tidak ada apa pun untuk muat, so tidak ada delays atau perubahan itu penyebab sebuah shift. jika Anda memiliki untuk gunakan custom font, saat ini best metode untuk minimizing CLS adalah untuk combine <link rel="preload"> (grab font segera setelah mungkin) dengan font-display: opsional (memberikan ini sebuah kecil window untuk muat); jika ini tidak membuat ini di time, halaman hanya menampilkan sebuah default font, dan Anda custom font mendapatkan cached dan menampilkan up pada subsequent memuat. Preload, lalu optional, lalu — best dari semua — hanya jangan gunakan custom font. itu’s seluruh ladder.

AI summary

sebuah condensed take pada Advanced versi:

• Font memuat = apa browser menampilkan sementara sebuah custom font downloads. ini adalah sebuah special case karena fonts adalah keduanya sebuah external resource dan mereka perubahan text metrics — so mereka dapat hurt dua Core Web Vitals di setelah.
• LCP: sebuah render-blocking font itu hides Anda largest text element (FOIT) delays LCP. apa pun font-display nilai lainnya daripada auto/block mempertahankan text terlihat so LCP tidak blocked pada font.
• CLS: fallback-untuk-web-font tukar reflows layout. FOIT penyebab CLS too — invisible text adalah masih laid out di fallback’s metrics, so tukar masih shifts.
• font-display adalah main lever: swap = FOUT (fast text, masih swaps); optional = ~100ms window lalu commits, so Tidak kemudian tukar dan Tidak tukar-related shift. web.dev suggests mixing them: swap untuk branding, optional untuk body.
• Preload memperbaiki late font penemuan. Preload + font-display: optional adalah Google’s singled-out combo untuk eliminating layout jank (Chrome 83+). jangan di atas-preload — ini steals resources dari lainnya memuat.
• Passing Lighthouse font-display audit ≠ memperbaiki CLS. tukar shift adalah sebuah terpisah perbaiki: sebuah metrically-cocok fallback, atau size-adjust/ascent-override/ descent-override/line-gap-override.
• Google Fonts dapat set font-display melalui &display= parameter URL (Tidak self-hosting needed); self-hosting masih menghapus extra connection hop.
• Tidak sebuah direct peringkat factor — ini feeds CLS/LCP, yang adalah pengalaman halaman sinyal (sebuah tiebreaker). Best perbaiki dari semua: gunakan sistem font.

Dokumentasi resmi

Utama-sumber documentation dari Google dan Bing.

Google

• Best Practices untuk Fonts (web.dev) — font-display nilai table (block/tukar periods) dan mix-strategy advice.
• mengoptimalkan Cumulative Layout Shift (web.dev) — FOIT/FOUT explanation dan mengapa keduanya penyebab layout shift.
• mengoptimalkan Largest Contentful Paint (web.dev) — ketika sebuah web font adalah LCP resource dan bagaimana font-display mempertahankan text terlihat.
• mencegah layout shifting dan FOIT oleh preloading opsional fonts (web.dev) — preload + font-display: optional combo dan Chrome 83 perbaiki.
• mengoptimalkan WebFont memuat dan rendering (web.dev) — lebih luas font-memuat performa guide.
• Learn: mengoptimalkan web fonts (web.dev) — structured lesson versi.
• Ensure text tetap terlihat selama webfont muat (Chrome untuk Developers) — Lighthouse font-display audit. Note: sebagai dari Lighthouse 13 ini moved dari sebuah standalone audit ke sebuah lebih luas “Font display insight” (terjemahan) “Font display insight” panel, so older screenshots dan guides gunakan old naming.
• Google Fonts CSS2 API — display parameter — setting font-display melalui URL tanpa self-hosting.

• MDN — font-display — referensi spesifikasi CSS untuk definisi nilai.

Bing / Microsoft

• Fast Front-End performa untuk Microsoft Bing (Bing Penelusuran Quality Insights, Aug 2022) — documents font preloading sebagai sebuah production technique pada Bing’s own hasil halaman. Note: ini post mengonfirmasi preload mechanism hanya; ini tidak cover font-display, FOIT/FOUT, CLS, atau LCP oleh name.

Quotes dari sumber

pada—record statements dari Google’s Chrome/web.dev docs dan Bing engineering. Font memuat lives di rendering/performa spec area, so utama sources di sini adalah Chrome dan web.dev tim (tidak Penelusuran Relations) — tidak ada pada-record Penelusuran team quote calling font-display sebuah peringkat topic, dan I’m tidak going untuk invent satu.

Google — web.dev (Chrome team)

• “Both approaches can cause layout shifts. Even if the text is invisible, it’s still laid out using the fallback font, so when the web font loads, the text block and the surrounding content shift” (terjemahan) “Keduanya approaches dapat penyebab layout shifts. bahkan jika text adalah invisible, ini adalah masih laid out menggunakan fallback font, so ketika web font memuat, text block dan sekitarnya konten shift” — web.dev, mengoptimalkan Cumulative Layout Shift. Jump untuk quote
• “The fallback font is swapped with the web font, incurring a Flash of Unstyled Text (FOUT). ‘Invisible’ text is displayed using the fallback font until a web font is available and the text is made visible (FOIT—flash of invisible text).” (terjemahan) “ fallback font adalah ditukar dengan web font, incurring sebuah Flash dari Unstyled Text (FOUT). ‘Invisible’ text adalah displayed menggunakan fallback font until sebuah web font adalah tersedia dan text adalah dibuat terlihat (FOIT—flash dari invisible text).” — web.dev, mengoptimalkan Cumulative Layout Shift. Jump untuk quote
• “If you set a font-display value of anything other than auto or block, then text will always be visible during load, and LCP won’t be blocked on an additional network request.” (terjemahan) “Jika Anda menetapkan nilai font-display selain auto atau block, teks akan tetap terlihat selama pemuatan, dan LCP tidak akan terhalang oleh permintaan jaringan tambahan.” — web.dev, mengoptimalkan Largest Contentful Paint. Jump untuk quote

Bing — preloading fonts di production

• Bing’s engineering team mendeskripsikan preload tags di <head> itu tell browser untuk mulai downloading -nya custom web fonts immediately; tanpa itu tags, browser tidak akan fetch fonts until ini memiliki parsed CSS dan encountered matching elements — so preloading membuat them tersedia di time untuk text rendering. Baca post

Font-memuat checklist

sebuah quick lulus untuk pastikan fonts tidak diam-diam wrecking Anda Core Web Vitals:

• setiap custom @font-face (atau Google Fonts URL) sets sebuah deliberate font-display nilai — tidak browser default.
• Body text menggunakan font-display: optional (atau sebuah metrically-cocok swap) untuk hindari sebuah tukar-driven layout shift.
• satu atau dua fonts digunakan di atas fold adalah preloaded dengan <link rel="preload" as="font" type="font/woff2" crossorigin>.
• Anda’re tidak preloading setiap weight — hanya apa needed untuk awal render.
• preload’s href, as="font", type, dan crossorigin match nyata @font-face permintaan (diperiksa di Network panel) — Tidak unused preload, Tidak duplicate download.
• Anda font-family stack names sebuah sensible sistem fallback, tidak hanya custom font.
• jika sebuah tukar masih shifts, fallback metrics adalah cocok (size-adjust, ascent-override, descent-override, line-gap-override).
• Fonts adalah disajikan sebagai WOFF2 dan subset untuk characters/weights Anda sebenarnya gunakan.
• Google Fonts embeds sertakan sebuah display parameter dan sebuah preconnect untuk fonts.gstatic.com.
• Variable fonts adalah hanya digunakan ketika Anda render multiple variants — jika tidak sebuah single static weight dapat menjadi lebih ringan.
• Anda’ve confirmed dengan PageSpeed Insights / Lighthouse itu fonts tidak LCP element atau sebuah CLS culprit.

mental models

1. Fonts hit dua vitals melalui dua mechanisms. LCP: sebuah render-blocking font hides Anda largest text element until ini memuat. CLS: fallback→web-font tukar perubahan text metrics dan reflows. Perbaiki them sebagai dua terpisah masalah, karena satu perbaiki (swap) helps LCP tetapi leaves CLS untouched.

2. FOIT vs. FOUT — keduanya fail, differently. FOIT (invisible until dimuat) risks sebuah rendering delay → LCP. FOUT (font cadangan lalu bertukar) dapat menyebabkan pergeseran tata letak → CLS. tidak ada “safe default” (terjemahan) “default yang aman”; Anda memiliki untuk choose dan mitigate.

3. font-display decision. optional = sebuah ~100ms window, lalu commit dengan Tidak kemudian tukar (best untuk CLS-sensitive body text). swap = tampilkan text now, jaminan brand font eventually (best untuk branding, accept sebuah kecil shift). Mix them per element alih-alih satu nilai di mana-mana.

4. penemuan vs. render. Preload memperbaiki penemuan ( browser learns tentang font early). font-display memperbaiki render perilaku (apa menampilkan sementara ini memuat). Fallback-metric matching memperbaiki

• shift itself*. mereka’re three berbeda levers — Anda sering ingin semua three.

5. baik / better / best ladder. baik: preload Anda fonts (better masih, sama-origin, untuk drop extra connection). Better: font-display: optional, paired dengan preload, so sebuah slow font hanya menampilkan sebuah default dan caches untuk berikutnya time. Best: gunakan sistem font — tidak ada apa pun memuat, so Tidak delay dan Tidak shift.

Font memuat — cheat sheet

font-display nilai (block / tukar periods, per web.dev):

Figures di atas adalah web.dev’s terdokumentasi Chromium perilaku. CSS spec itself hanya defines block/tukar period categories (pendek, extremely kecil, infinite, none) dan leaves tepat timing untuk browser — verify saat ini angka untuk browser Anda’re testing.

** dua failure modes**

• FOIT = invisible until dimuat → risks delaying LCP.
• FOUT = fallback lalu tukar → risks sebuah layout shift → CLS.
• Keduanya penyebab CLS setelah tukar happens; hanya fallback-metric matching atau optional mencegah ini.

** memperbaiki, di priority order**

1. gunakan sistem font (tidak ada apa pun memuat).
2. Preload critical font (as="font" type="font/woff2" crossorigin).
3. Set font-display (optional untuk body, swap untuk branding).
4. Match fallback’s metrics (size-adjust, ascent-override, descent-override, line-gap-override).
5. Subset + WOFF2 untuk shrink file itself.

Google Fonts fast facts

• tambahkan &display=swap (atau optional/fallback) untuk CSS2 URL untuk set font-display tanpa self-hosting.
• masih sebuah render-blocking stylesheet + sebuah terpisah font permintaan — tambahkan preconnect untuk fonts.gstatic.com.
• Self-hosting menghapus extra DNS/connection hop.

Diagnose

• PageSpeed Insights / Lighthouse “Font display insight” (terjemahan) “Font display insight” (adalah standalone “Ensure text tetap visible during webfont load” (terjemahan) “Ensure text tetap terlihat selama webfont muat” audit sebelum Lighthouse 13).
• Chrome DevTools performa + Network panels — see ketika fonts muat relative untuk pertama paint dan shifts.

Font-memuat myths dan mistakes

setiap dari ini adalah sebuah nyata, umum audit finding — dengan mengapa ini adalah wrong dan apa untuk melakukan alih-alih.

“font-display: swap fully solves my CLS problem.” (terjemahan) “font-display: swap sepenuhnya menyelesaikan masalah CLS saya.” Mengapa ini adalah wrong: swap memperbaiki FOIT (text adalah terlihat immediately, baik untuk LCP dan Lighthouse audit) tetapi ini jaminan FOUT — dan jika fallback dan web font differ di size, tukar masih shifts layout. Google’s Lighthouse docs note FOIT dan FOUT memiliki yang sama impact pada CLS setelah tukar happens. melakukan alih-alih: pair ini dengan sebuah metrically-cocok fallback (atau gunakan optional), so tukar tidak move apa pun.

“Preloading a font always speeds up my page.” (terjemahan) “Preloading sebuah font selalu speeds up my halaman.” Mengapa ini adalah wrong: web.dev adalah jelas itu preload muncul di cost dari taking browser resources away dari memuat lainnya resources. Preloading fonts Anda tidak perlu di atas fold delays lebih penting berfungsi. melakukan alih-alih: preload hanya satu atau dua fonts needed untuk awal render.

“font-display: optional berarti itu custom font never loads.” (terjemahan) “font-display: optional berarti font kustom tidak pernah dimuat.” Mengapa ini adalah wrong: ini memuat dan adalah cached — ini adalah hanya tidak digunakan pada itu spesifik halaman muat jika ini misses ~100ms window. Setelah cached, kemudian halaman views typically tampilkan ini immediately. melakukan alih-alih: gunakan optional untuk CLS-sensitive body text tanpa worrying itu returning pengunjung miss brand font.

“Any font-display value memperbaiki itu Lighthouse ‘invisible text’ warning, so I’m selesai.” (terjemahan) “Nilai font-display apa pun memperbaiki peringatan Lighthouse tentang teks tak terlihat, jadi saya selesai.” Mengapa ini adalah wrong: passing itu audit adalah necessary tetapi tidak sufficient — tukar layout shift adalah sebuah terpisah, related-tetapi-distinct masalah. melakukan alih-alih: setelah clearing audit, periksa CLS dan perbaiki fallback metrics jika tukar masih shifts.

“Google Fonts are auto-optimized and can’t cause CWV problems.” (terjemahan) “Google Fonts adalah auto-dioptimalkan dan dapat’t penyebab CWV masalah.” Mengapa ini adalah wrong: sebuah copy-pasted Google Fonts embed adalah masih sebuah render-blocking stylesheet permintaan plus sebuah terpisah font permintaan unless display dan preconnect/preload adalah configured. “It’s from Google so it’s fine” (terjemahan) “ini adalah dari Google so ini adalah fine” adalah sebuah umum dunia nyata audit miss. melakukan alih-alih: tambahkan &display=, preconnect untuk fonts.gstatic.com, dan preload critical weight.

“Font loading is a UX-only concern with no SEO relevance.” (terjemahan) “Font memuat adalah sebuah UX-hanya concern dengan Tidak SEO relevance.” Mengapa ini adalah wrong: CLS dan LCP adalah Core Web Vitals dan bagian dari Google’s halaman experience sinyal. Font choices sit secara langsung di sebuah SEO teknis’s remit. melakukan alih-alih: treat font memuat sebagai bagian dari Anda CWV berfungsi — sementara mempertahankan ini di proportion (pengalaman halaman adalah sebuah tiebreaker, tidak sebuah utama factor).

temukan fonts memuat pada sebuah halaman

sebuah quick DevTools Console snippet untuk list setiap font face browser sebenarnya dimuat, dan apakah setiap adalah selesai — berguna untuk spotting sebuah berat atau slow font.

Chrome DevTools Console

// List loaded font faces and their status
[...document.fonts].map(f => ({
  family: f.family,
  weight: f.weight,
  style: f.style,
  status: f.status,          // "loaded", "loading", "unloaded", "error"
  display: f.display,        // the font-display value in effect
}));

// When did fonts finish loading? (relative to navigation start)
document.fonts.ready.then(() =>
  console.log("All fonts ready at", performance.now().toFixed(0), "ms")
);

Watch untuk font-driven layout shifts

Paste ini di Console untuk log CLS entries sebagai mereka happen, including elements itu moved — handy untuk confirming sebuah font tukar adalah culprit.

Chrome DevTools Console

new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (!entry.hadRecentInput) {
      console.log("Layout shift", entry.value.toFixed(4),
        entry.sources?.map(s => s.node));
    }
  }
}).observe({ type: "layout-shift", buffered: true });

periksa bahwa sebuah font file adalah WOFF2 dan reasonably sized

Fonts seharusnya menjadi WOFF2 dan subset. poin ini di sebuah font URL untuk periksa -nya size dan jenis.

macOS / Linux

curl -sI https://example.com/fonts/brand.woff2 \
  | grep -iE "content-type|content-length"

Windows / PowerShell

$r = Invoke-WebRequest -Method Head https://example.com/fonts/brand.woff2
$r.Headers["Content-Type"]; $r.Headers["Content-Length"]

sebuah besar content-length (well ke hundreds dari KB untuk sebuah single weight) adalah sebuah subsetting/compression opportunity.

Yang font-memuat strategy fits halaman?

Prove sebuah font-memuat perubahan worked

Critical-font preload test

Test untuk jalankan: reload dengan cache disabled dan inspect font permintaan’s initiator dan mulai time di Network panel. Yang diharapkan hasil: yang dimaksud critical font dimulai early dan adalah reused oleh CSS tanpa sebuah duplicate download. Failure interpretation: preload attributes melakukan tidak match CSS permintaan atau font adalah tidak sebenarnya critical. Monitoring window: immediate. Rollback trigger: duplicate permintaan, console errors, atau contention itu delays lebih penting resources.

Font-tukar stability test

Test untuk jalankan: throttle muat sementara recording performa panel Layout Shifts track. Yang diharapkan hasil: fallback text tetap terlihat dan akhir font melakukan tidak buat measurable shift. Failure interpretation: fallback metrics masih differ atau tukar happens too late. Monitoring window: immediate di seluruh didukung breakpoints. Rollback trigger: hidden text, clipped text, atau worse CLS.

Field-vitals test

Test untuk jalankan: bandingkan post-rilis LCP dan CLS untuk changed template dengan prior RUM baseline. Yang diharapkan hasil: targeted metric improves tanpa degrading lainnya. Failure interpretation: font adalah tidak bottleneck atau strategy traded memuat speed untuk instability. Monitoring window: RUM sebagai traffic arrives; CrUX di atas -nya rolling window. Rollback trigger: either field metric worsens consistently.

Resources worth Anda time

My related writing

• Apa adalah Cumulative Layout Shift (CLS) & cara meningkatkan ini (Ahrefs) — my CLS guide, including preload + font-display: optional perbaiki untuk font-driven shifts.
• Apa adalah Largest Contentful Paint (LCP) & cara meningkatkan ini (Ahrefs) — baik/better/best font ladder untuk LCP.
• Apa adalah Core Web Vitals (CWVs) & cara meningkatkan Them (Ahrefs) — di mana CLS dan LCP fit di bigger CWV picture.
• Patrick Stox pada Ahrefs blog — rest dari my SEO teknis writing.

dari sekitar industry

• Memperbaiki Layout Shifts Disebabkan oleh Web Fonts (DebugBear, Umar Hansa) — end-untuk-end: mengukur → temukan font → font-display → better fallback → adjust metrics.
• Ensure text tetap terlihat selama webfont muat (DebugBear) — Lighthouse-audit-spesifik troubleshooting angle.
• cara hindari layout shifts disebabkan oleh web fonts (Simon Hearne) — sebuah practitioner-tingkat deep dive.
• FOUT, FOIT, FOFT (CSS-Tricks) — canonical explainer untuk terminology.
• sebuah baru cara untuk Reduce Font memuat Impact: CSS Font Descriptors (Smashing Magazine) — size-adjust/ascent-override/descent-override/line-gap-override technique secara mendalam.
• cara Reduce Layout Reflow Ketika menggunakan Web Fonts (Material Design) — sebuah practical CSS-descriptor walkthrough dari Google’s Material team.
• kami shipped font-display untuk Google Fonts (Addy Osmani) — display parameter URL dan mengapa ini dihapus perlu untuk self-host untuk font-display control.

Uji pemahaman Anda: Font memuat

Five quick pertanyaan pada bagaimana web fonts memengaruhi Core Web Vitals. Pick sebuah jawaban untuk setiap, lalu periksa.

Log perubahan