Hướng dẫn về Font Loading

Tóm tắt — custom web font là file trình duyệt có để download trước khi nó có thể hiển thị của bạn text trong nó. trong khi nó chờ, nó either hides text hoặc hiển thị backup font và swaps sau đó — và either lựa chọn có thể chậm xuống hoặc visually jump của bạn trang. bạn control đó behavior với một CSS line (font-display), và bạn có thể speed font lên by preloading nó. nếu bạn không cần custom font, hệ thống font có không có gì để load và không có gì để shift.

Điều gì font loading là

Khi bạn sử dụng custom font — brand font, Google Font, bất cứ điều gì đó không phải đã on khách truy cập device — trình duyệt có để go fetch đó font file trước khi nó có thể paint của bạn text trong nó. đó download takes time, và trình duyệt có để quyết định Điều gì để hiển thị trong meantime.

nó có hai basic options, và cả hai có annoying names:

• FOIT (Flash của Invisible Text): hide text cho đến khi custom font arrives. trang looks blank nơi text nên là, sau đó nó pops trong.
• FOUT (Flash của Unstyled Text): hiển thị thông thường backup font right away, sau đó đổi để custom font sau khi nó loads. bạn see text immediately, nhưng nó có thể visibly “jump” Khi đổi happens nếu hai fonts không phải giống nhau size.

Vì sao điều này quan trọng Đối với SEO

Neither của những điều đó là free. FOIT có thể delay Khi của bạn main text xuất hiện, mà hurts Largest Contentful Paint (LCP). FOUT có thể nguyên nhân layout shift Khi font swaps trong, mà hurts Cumulative Layout Shift (CLS). Cả hai LCP và CLS là Core Web Vitals — thực-người dùng các chỉ số Google dùng as part của trang experience. So font loading không phải chỉ design detail; nó kỹ thuật SEO lever.

đơn giản các cách sửa

• sử dụng hệ thống font nếu Bạn có thể. có không có gì để download, so có không delay và không shift. Đây là phần lớn reliable khắc phục, đầy đủ dừng.
• nếu bạn cần custom font, đặt font-display. Thêm font-display: swap (hoặc optional) để của bạn font tells trình duyệt không để leave text invisible trong khi nó chờ.
• Preload quan trọng font. <link rel="preload"> tag tells trình duyệt để grab font sớm thay vì stumbling on nó sau đó.

Muốn đầy đủ version — font-display giá trị bảng, preload + optional combo, matching của bạn fallback font các chỉ số, và Google so với. self-hosting? Switch để Nâng cao tab.

Tóm tắt — Custom web fonts là render-affecting external các tài nguyên. họ hit LCP Khi render-blocking font delays của bạn largest text element, và CLS Khi fallback-để-web-font đổi reflows layout. hai default behaviors — FOIT (invisible cho đến khi loaded) và FOUT (fallback sau đó đổi) — mỗi fail differently. font-display là chính lever (swap bảo đảm FOUT; optional cho ~100ms window và sau đó commits, killing sau đó đổi). Preloading các cách sửa muộn font phát hiện; preload + font-display: optional là combo Google own engineering singled out cho eliminating layout jank. nhưng passing Lighthouse font-display kiểm tra không khắc phục CLS — đó cần metrically-khớp fallback (hoặc size-adjust/ascent-override overrides). None của Đây là trực tiếp xếp hạng factor; nó feeds CLS/LCP, mà là trang experience các tín hiệu.

Vì sao fonts là special case

phần lớn performance các vấn đề là về bytes — image là cũng big, script chặn main chuỗi trao đổi. Fonts là tệ hơn đó trong một cụ thể way: họ’re external tài nguyên và họ thay đổi các chỉ số của bạn text. So font có thể hurt bạn hai khác ways tại sau khi. nó có thể delay Khi text paints ( LCP vấn đề), và nó có thể thay đổi size và shape của đó text sau khi nó đã on screen ( CLS vấn đề).

hai default trình duyệt behaviors là worth naming vì toàn bộ topic hangs off them:

• FOIT (Flash của Invisible Text): text trong custom font là được kết xuất invisible cho đến khi font loads hoặc timeout là hit — trong lịch sử lên để ~3-thứ hai block trong phần lớn các trình duyệt.
• FOUT (Flash của Unstyled Text): fallback font hiển thị immediately, sau đó nhận đã đổi cho web font sau khi nó loads.

FOIT feels “cleaner” (không jump) nhưng risks kết xuất delay. FOUT feels nhanh hơn (text hiện tại) nhưng risks layout shift on đổi. Neither là tự động safe — đó cốt lõi ý tưởng để hold onto.

nó cũng helps để tách biệt pipeline vào distinct stages, vì thành công tại một stage không bảo đảm thành công tại tiếp theo. @font-face rule chỉ declares face — trình duyệt fetches thực tế font file chỉ sau khi matching styled text on trang requires nó (declaration và matching là tách biệt steps từ fetch). đó fetch là subject để CORS nếu font là phân phối cross-origin, so stylesheet đó loads cleanly không bảo đảm font phản hồi itself carries right cross-origin permission — bị thiếu header ở đó fails silently as font đó không bao giờ renders. và thành công fetch vẫn không bảo đảm ổn định-looking trang: cold-bộ nhớ đệm, warm-bộ nhớ đệm, và đã-được lưu đệm font trạng thái có thể produce khác phát hiện và đổi timing, so kiểm thử một repeat trang load trong DevTools không tell bạn Điều gì đầu tiên-time khách truy cập thực ra sees.

Cách fonts ảnh hưởng LCP

nếu largest visible element on của bạn trang là text — big headline, hero paragraph — sau đó font đó text dùng có thể become part của bạn LCP path. Theo web.dev LCP hướng dẫn, LCP tài nguyên của trang, nếu nó có một, sẽ là either image hoặc web font. render-blocking font đó leaves đó text invisible (FOIT) pushes của bạn LCP out cho đến khi font arrives.

khắc phục ở đây là straightforward và xuất hiện straight từ Google. On web.dev Optimize Largest Contentful Paint hướng dẫn:

“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.” (bản dịch) «Nếu bạn set một font-display giá trị of bất cứ điều gì other hơn auto hoặc block, thì văn bản sẽ luôn hiển thị trong khi tải, và LCP sẽ không bị chặn bởi một yêu cầu mạng bổ sung.» — web.dev

nói cách khác: swap, fallback, hoặc optional all giữ text visible during load, so của bạn LCP không phải hostage để font yêu cầu.

Cách fonts ảnh hưởng CLS

CLS xuất hiện từ đổi. của bạn fallback font và của bạn web font gần như không bao giờ có giống hệt character widths và line heights, so Khi trình duyệt replaces một với khác, text reflows — và mọi thứ dưới nó moves. đó layout shift.

counterintuitive part, và điều phần lớn mọi người miss: FOIT gây ra CLS cũng. Even invisible text là vẫn laid out sử dụng fallback font các chỉ số, so đổi vẫn moves điều. từ web.dev Optimize Cumulative Layout Shift hướng dẫn:

“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” (bản dịch) «Cả hai cách đều có thể gây dịch chuyển bố cục. Ngay cả khi văn bản ẩn, nó vẫn được bố trí bằng phông chữ dự phòng, nên khi phông chữ web tải, khối văn bản và nội dung xung quanh sẽ dịch chuyển» — web.dev

giống nhau trang frames hai behaviors plainly:

“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).” (bản dịch) «Phông chữ dự phòng được thay bằng phông chữ web, gây ra Flash of Unstyled Text (FOUT) (FOUT). Văn bản «Invisible» được hiển thị bằng phông chữ dự phòng cho đến khi có phông chữ web và văn bản được hiển thị (FOIT — flash of invisible text).» — web.dev

I’ve đã nói giống nhau điều trong plainer terms trong my Ahrefs ghi-lên on Cumulative Layout Shift: Khi font loads hoặc thay đổi, bạn end lên với noticeable shift — FOIT hoặc FOUT. nó một của phần lớn phổ biến thực-world CLS gây ra, right alongside images không có dimensions và nội dung injected sau khi load.

font-display property

font-display là @font-face descriptor đó controls hai windows: block period (Cách dài trình duyệt hides text đang chờ cho font) và đổi period (Cách dài, sau khi block period, nó sẽ vẫn đổi trong web font sau khi nó arrives). Theo web.dev Thực hành tốt nhất cho Fonts:

MDN’s font-display reference, mà Google own tài liệu link để as đó spec nguồn, mô tả them tersely: swap cho an extremely nhỏ block period và an infinite đổi period; optional cho an extremely nhỏ block period và không đổi period. Đó “no swap period” (bản dịch) «không đổi period» là đó toàn bộ point of optional — sau đó block period window closes, whatever font là trong dùng vẫn giữ, so có không sau đó đổi để shift đó layout.

Một caution on numbers trong đó bảng: CSS đặc tả itself chỉ defines block/đổi period categories — ngắn, extremely nhỏ, infinite, none — và leaves chính xác duration để trình duyệt. millisecond/thứ hai figures trên là web.dev được ghi lại Chromium behavior, không cross-trình duyệt bảo đảm. Treat them as illustrative thay vì spec promise, và kiểm tra hiện tại numbers cho whichever trình duyệt/version bạn’re thực ra kiểm thử so với.

Mà giá trị cho mà nội dung? web.dev own advice là đó những điều này có thể là mixed: sử dụng swap cho branding và khác visually distinctive elements (nơi seeing brand font matters và brief shift là acceptable), và optional cho thân phản hồi text (nơi CLS-sensitivity wins và bạn’d rather không shift). đó genuinely hữu ích rule của thumb — không apply một giá trị trang web-wide by reflex.

Preloading fonts

Font các yêu cầu là discovered muộn. trình duyệt không know nó cần font cho đến khi nó có parsed của bạn CSS, khớp @font-face rule để element on trang, và decided đó element là visible. chỉ sau đó làm nó bắt đầu download. <link rel="preload"> ngắn-circuits đó:

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

đó tells trình duyệt để bắt đầu fetching font immediately, trong parallel với mọi thứ khác, thay vì đang chờ để discover nó. Bing engineering team mô tả chính xác điều này mechanism on của họ own tìm kiếm các trang (nhiều hơn trong Quotes tab): preload tags trong <head> kick off font downloads right away, whereas không có them trình duyệt sẽ không fetch fonts cho đến khi nó có parsed CSS và tìm thấy matching elements.

** strongest combination** theo Google own writeup là preload + font-display: optional. web.dev Ngăn layout shifting và FOIT by preloading tùy chọn fonts calls combining <link rel="preload"> với font-display: optional phần lớn effective way để bảo đảm không layout jank Khi kết xuất custom fonts, và notes đó Chrome (từ version 83) eliminated layout shifting đó được sử dụng để happen Khi preloading tùy chọn fonts. preload cho font của nó best shot tại arriving bên trong ~100ms window; optional bảo đảm đó nếu nó không, bạn không pay cho nó với shift.

Khi không để preload. Preloading không phải free. web.dev warns đó preload là highly effective tại đang làm fonts discoverable sớm, nhưng nó xuất hiện tại cost của taking trình duyệt các tài nguyên away từ loading khác các tài nguyên. Preload một hoặc hai fonts bạn thực ra cần trên fold — preloading mỗi font weight bạn own có thể starve nhiều hơn quan trọng các tài nguyên và làm trang chậm hơn overall.

Hãy bảo đảm đó preload thực ra nhận reused. MỘT preload chỉ helps nếu đó trình duyệt có thể match điều này để đó real font yêu cầu — đó href, as="font", type, và crossorigin chế độ all có để line lên với điều gì đó CSS @font-face rule ends lên requesting, hoặc bạn’ll nhận an “unused preload” (bản dịch) «unused preload» warning và một wasted second download thay vì một nhanh hơn một. Preloading có thể cũng bypass unicode-range selection, pulling xuống một subset bạn đã không thực ra cần cho đó trang. Xác nhận đó match trong DevTools’ Network panel: bạn muốn để see một yêu cầu cho đó font, kicked off by đó preload, không hai.

Sửa shift itself: fallback chỉ số matching

Ở đây đó trap: passing đó Lighthouse font-display kiểm tra làm không cách sửa CLS. Google Lighthouse tài liệu là rõ ràng đó FOIT và FOUT có đó giống nhau impact on CLS khi đó custom font replaces đó tạm thời hệ thống font. So swap làm của bạn text visible (good cho LCP và cho đó “invisible text” (bản dịch) «invisible text» audit) nhưng leaves đó đổi shift trong place.

để kill shift Khi đổi làm happen, bạn có để làm fallback font và web font take lên giống nhau space. Hai levers:

1. Pick metrically-similar hệ thống fallback trong của bạn font-family stack, rather hơn single custom font name với không có gì sensible behind nó. closer fallback character widths và line height là để web font, nhỏ hơn shift.
2. Override web font các chỉ số với size-adjust, ascent-override, descent-override, và line-gap-override on @font-face rule, so web font là forced để match fallback box. web.dev lists những điều này descriptors, và Smashing Magazine deep dive on CSS font descriptors walks qua them trong detail nếu bạn muốn để go all way.

mỗi của những điều đó four descriptors adjusts khác chỉ số, và hiện tại trình duyệt hỗ trợ varies by descriptor — kiểm tra compatibility trước khi leaning on bất kỳ single một. Validate so với thực tế weights, styles, và scripts bạn ship, cũng: khắc phục confirmed on của bạn regular-weight Latin text không bảo đảm bold, italic, hoặc non-Latin script behave giống nhau way.

DebugBear Sửa Layout Shifts Gây ra by Web Fonts là good end-để-end walkthrough của điều này: đo lường impact, identify vấn đề font, apply font-display, chọn tốt hơn fallback, sau đó adjust font các chỉ số.

Google Fonts so với. self-hosting

bạn không có để self-host để control font-display. Google Fonts CSS2 API accepts display query parameter — https://fonts.googleapis.com/css2?family=Roboto&display=swap sets font-display trực tiếp on phân phối @font-face rules. Addy Osmani post on shipping font-display để Google Fonts covers thay đổi: previously chỉ way để specify font-display cho Google Fonts là để self-host them, và điều này đã xóa đó cần.

Self-hosting vẫn wins on một điều: điều này eliminates đó extra DNS lookup và connection để fonts.googleapis.com và fonts.gstatic.com. đó là một real latency cost, và một of đó reasons một preconnect tài nguyên hint để những origins helps nếu bạn làm dùng Google Fonts. Weigh đó connection overhead so với đó convenience — và không assume “it’s from Google, so it’s fine.” (bản dịch) «đây là từ Google, so đây là fine.» MỘT copy-pasted Google Fonts embed là vẫn một render-blocking stylesheet yêu cầu plus một font yêu cầu, và older embeds có thể không carry một display giá trị tại all.

có không universal winner giữa hai options — nó xuất hiện xuống để mà scripts và weights bạn thực ra ship, của bạn bộ nhớ đệm setup, và font license terms. Chạy so sánh so với của bạn own các trang thay vì dùng mặc định để whichever một tutorial được khuyến nghị.

Variable fonts

variable font packs nhiều weights và styles (regular, bold, condensed, italic) vào single file với adjustable axes. đó có thể là net win — một yêu cầu thay vì của six — nếu bạn thực ra sử dụng several của những điều đó variants. nhưng đầy đủ variable font là bigger single file hơn một static weight, so nếu bạn chỉ bao giờ render một weight, shipping toàn bộ variable font có thể là chậm hơn, không nhanh hơn. Subset nó để axes và characters bạn sử dụng, phục vụ nó as WOFF2 so nó compressed, và kiểm tra font license — không mỗi foundry permits subsetting hoặc self-hosting.

Reducing file trong đầu tiên place

Mọi thứ trên manages Khi font loads. Bạn có thể cũng shrink Điều gì loads. Font subsetting strips out glyphs bạn không sử dụng ( all-Latin trang web không cần Cyrillic và CJK ranges), và WOFF2 là well-compressed format để phục vụ. nhỏ hơn font file là nhiều hơn có khả năng để arrive bên trong optional’s window và ít hơn có khả năng để block LCP — subsetting và compression là complementary lever để font-display và preload, không alternative để them.

có không single “correct” subset hoặc universal byte-savings percentage ở đây, though — nó phụ thuộc vào scripts, characters, và weights của bạn cụ thể audience thực ra cần. number bạn saw trong ai đó khác case study hoặc benchmark không phải promise cho của bạn các trang; đo lường của bạn own font các yêu cầu trước khi và sau khi.

là điều này xếp hạng factor?

là precise ở đây. Font loading là không trực tiếp xếp hạng factor. Điều gì nó ảnh hưởng là CLS và LCP, mà là Core Web Vitals và part của Google trang experience các tín hiệu. và trang experience là lightweight, tiebreaker-style tín hiệu — relevance và quality dominate; nó helps quyết định giữa nếu không comparable kết quả, không giữa great trang và poor một. So honest framing là: khắc phục của bạn font loading vì nó genuine người dùng-experience vấn đề đó happens để feed hai xếp hạng inputs — không vì font-display giá trị sẽ move bạn lên kết quả on của nó own.

My own take

Across my Ahrefs CLS và LCP các hướng dẫn I’ve landed on giống nhau priority order, và nó vẫn holds. nếu Bạn có thể sử dụng hệ thống font, làm đó — có không có gì để load, so có không delays hoặc thay đổi đó nguyên nhân shift. nếu bạn có để sử dụng custom font, hiện tại best phương thức cho minimizing CLS là để combine <link rel="preload"> (grab font as soon as có thể) với font-display: optional (cho nó nhỏ window để load); nếu nó không làm nó trong time, trang chỉ hiển thị default font, và của bạn custom font nhận được lưu đệm và hiển thị lên on subsequent loads. Preload, sau đó optional, sau đó — best của all — chỉ không sử dụng custom font. đó toàn bộ ladder.

AI summary

condensed take on Nâng cao version:

• Font loading = Điều gì trình duyệt hiển thị trong khi custom font downloads. nó special case vì fonts là cả hai external tài nguyên và họ thay đổi text các chỉ số — so họ có thể hurt hai Core Web Vitals tại sau khi.
• LCP: render-blocking font đó hides của bạn largest text element (FOIT) delays LCP. bất kỳ font-display giá trị khác hơn auto/block giữ text visible so LCP không phải blocked on font.
• CLS: fallback-để-web-font đổi reflows layout. FOIT gây ra CLS cũng — invisible text là vẫn laid out trong fallback các chỉ số, so đổi vẫn shifts.
• font-display là main lever: swap = FOUT (fast text, vẫn swaps); optional = ~100ms window sau đó commits, so không sau đó đổi và không đổi-related shift. web.dev suggests mixing them: swap cho branding, optional cho thân phản hồi.
• Preload các cách sửa muộn font phát hiện. Preload + font-display: optional là Google singled-out combo cho eliminating layout jank (Chrome 83+). không over-preload — nó steals các tài nguyên từ khác loads.
• Passing Lighthouse font-display audit ≠ sửa CLS. đổi shift là tách biệt khắc phục: metrically-khớp fallback, hoặc size-adjust/ascent-override/ descent-override/line-gap-override.
• Google Fonts có thể đặt font-display qua &display= URL parameter (không self-hosting needed); self-hosting vẫn xóa extra connection hop.
• không trực tiếp xếp hạng factor — nó feeds CLS/LCP, mà là trang experience các tín hiệu ( tiebreaker). Best khắc phục của all: sử dụng hệ thống font.

Tài liệu chính thức

Chính-nguồn tài liệu từ Google và Bing.

Google

• Thực hành tốt nhất cho Fonts (web.dev) — đó font-display giá trị bảng (block/đổi periods) và đó mix-strategy advice.
• Optimize Cumulative Layout Shift (web.dev) — đó FOIT/FOUT lời giải thích và vì sao cả hai nguyên nhân layout shift.
• Optimize Largest Contentful Paint (web.dev) — khi một web font là đó LCP tài nguyên và cách font-display giữ text visible.
• Ngăn layout shifting và FOIT by preloading tùy chọn fonts (web.dev) — đó preload + font-display: optional combo và đó Chrome 83 cách sửa.
• Optimize WebFont loading và kết xuất (web.dev) — rộng hơn font-loading performance hướng dẫn.
• Learn: Optimize web fonts (web.dev) — đó structured lesson version.
• Bảo đảm text vẫn visible during webfont load (Chrome cho Nhà phát triển) — đó Lighthouse font-display audit. Note: as of Lighthouse 13 này moved từ một standalone audit vào một rộng hơn “Font display insight” (bản dịch) «Font display insight» panel, so older screenshots và các hướng dẫn dùng đó old naming.
• Google Fonts CSS2 API — display parameter — setting font-display qua URL không có self-hosting.
• MDN — font-display — đó CSS spec reference Google own tài liệu link để cho giá trị definitions.

Bing / Microsoft

• Fast Front-End Performance cho Microsoft Bing (Bing Tìm kiếm Quality Insights, Aug 2022) — documents font preloading as production technique on Bing own kết quả các trang. Note: điều này post xác nhận preload mechanism chỉ; nó không cover font-display, FOIT/FOUT, CLS, hoặc LCP by name.

Quotes từ nguồn

On—record statements từ Google Chrome/web.dev tài liệu và Bing engineering. Font loading lives trong kết xuất/performance spec area, so chính sources ở đây là Chrome và web.dev nhóm (không Tìm kiếm Relations) — có không on-record Tìm kiếm team quote calling font-display xếp hạng topic, và I’m không going để invent một.

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” (bản dịch) «Cả hai cách đều có thể gây dịch chuyển bố cục. Ngay cả khi văn bản ẩn, nó vẫn được bố trí bằng phông chữ dự phòng, nên khi phông chữ web tải, khối văn bản và nội dung xung quanh sẽ dịch chuyển» — web.dev, Optimize Cumulative Layout Shift. Nhảy đến trích dẫn
• “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).” (bản dịch) «Phông chữ dự phòng được thay bằng phông chữ web, gây ra Flash of Unstyled Text (FOUT) (FOUT). Văn bản «Invisible» được hiển thị bằng phông chữ dự phòng cho đến khi có phông chữ web và văn bản được hiển thị (FOIT — flash of invisible text).» — web.dev, Optimize Cumulative Layout Shift. Nhảy đến trích dẫn
• “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.” (bản dịch) «Nếu bạn set một font-display giá trị of bất cứ điều gì other hơn auto hoặc block, thì văn bản sẽ luôn hiển thị trong khi tải, và LCP sẽ không bị chặn bởi một yêu cầu mạng bổ sung.» — web.dev, Optimize Largest Contentful Paint. Nhảy đến trích dẫn

Bing — preloading fonts trong production

• Bing engineering team mô tả preload tags trong <head> đó tell trình duyệt để bắt đầu downloading của nó custom web fonts immediately; không có những điều đó tags, trình duyệt sẽ không fetch fonts cho đến khi nó có parsed CSS và encountered matching elements — so preloading làm them khả dụng trong time cho text kết xuất. đọc post

Font-loading checklist

nhanh truyền để hãy đảm bảo fonts không phải âm thầm wrecking của bạn Core Web Vitals:

• mỗi custom @font-face (hoặc Google Fonts URL) sets deliberate font-display giá trị — không trình duyệt default.
• thân phản hồi text dùng font-display: optional (hoặc metrically-khớp swap) để tránh đổi-driven layout shift.
• một hoặc hai fonts được sử dụng trên fold là preloaded với <link rel="preload" as="font" type="font/woff2" crossorigin>.
• bạn’re không preloading mỗi weight — chỉ Điều gì needed cho ban đầu render.
• preload href, as="font", type, và crossorigin match thực @font-face yêu cầu (checked trong Network panel) — không unused preload, không duplicate download.
• của bạn font-family stack names sensible hệ thống fallback, không chỉ custom font.
• nếu đổi vẫn shifts, fallback các chỉ số là khớp (size-adjust, ascent-override, descent-override, line-gap-override).
• Fonts là phân phối as WOFF2 và subset để characters/weights bạn thực ra sử dụng.
• Google Fonts embeds bao gồm display parameter và preconnect để fonts.gstatic.com.
• Variable fonts là chỉ được sử dụng Khi bạn render multiple variants — nếu không single static weight có thể là nhẹ hơn.
• bạn’ve confirmed với PageSpeed Insights / Lighthouse đó fonts không phải LCP element hoặc CLS culprit.

mental models

1. Fonts hit hai chỉ số quan trọng qua hai mechanisms. LCP: render-blocking font hides của bạn largest text element cho đến khi nó loads. CLS: fallback→web-font đổi thay đổi text các chỉ số và reflows. khắc phục them as hai tách biệt các vấn đề, vì một khắc phục (swap) helps LCP nhưng leaves CLS untouched.

2. FOIT so với. FOUT — cả hai fail, differently. FOIT (invisible until loaded) risks một kết xuất delay → LCP. FOUT (fallback thì đổi) risks một layout shift → CLS. Có không “safe default” (bản dịch) «safe default»; bạn có để chọn và mitigate.

3. font-display decision. optional = ~100ms window, sau đó commit với không sau đó đổi (best cho CLS-sensitive thân phản hồi text). swap = hiển thị text hiện tại, bảo đảm brand font eventually (best cho branding, accept nhỏ shift). Mix them theo element thay vì một giá trị mọi nơi.

4. Phát hiện so với. render. Preload các cách sửa phát hiện ( trình duyệt learns về font sớm). font-display các cách sửa render behavior (Điều gì hiển thị trong khi nó loads). Fallback-chỉ số matching các cách sửa

• shift itself*. họ’re three khác levers — bạn thường muốn all three.

5. good / tốt hơn / best ladder. Good: preload của bạn fonts (tốt hơn vẫn, giống nhau-origin, để drop extra connection). Tốt hơn: font-display: optional, paired với preload, so chậm font chỉ hiển thị default và caches cho tiếp theo time. Best: sử dụng hệ thống font — không có gì loads, so không delay và không shift.

Font loading — bảng tra nhanh

font-display các giá trị (block / đổi periods, theo web.dev):

Figures trên là web.dev được ghi lại Chromium behavior. CSS spec itself chỉ defines block/đổi period categories (ngắn, extremely nhỏ, infinite, none) và leaves chính xác timing để trình duyệt — verify hiện tại numbers cho trình duyệt bạn’re kiểm thử.

** hai thất bại modes**

• FOIT = invisible cho đến khi loaded → risks delaying LCP.
• FOUT = fallback sau đó đổi → risks layout shift → CLS.
• Cả hai nguyên nhân CLS sau khi đổi happens; chỉ fallback-chỉ số matching hoặc optional ngăn nó.

** các cách sửa, trong priority order**

1. sử dụng hệ thống font (không có gì loads).
2. Preload cốt yếu font (as="font" type="font/woff2" crossorigin).
3. đặt font-display (optional cho thân phản hồi, swap cho branding).
4. Match fallback các chỉ số (size-adjust, ascent-override, descent-override, line-gap-override).
5. Subset + WOFF2 để shrink file itself.

Google Fonts fast facts

• Thêm &display=swap (hoặc optional/fallback) để CSS2 URL để đặt font-display không có self-hosting.
• vẫn render-blocking stylesheet + tách biệt font yêu cầu — thêm preconnect để fonts.gstatic.com.
• Self-hosting xóa extra DNS/connection hop.

Diagnose

• PageSpeed Insights / Lighthouse “Font display insight” (bản dịch) «Font display insight» (đã là đó standalone “Ensure text remains visible during webfont load” (bản dịch) «Bảo đảm text vẫn visible during webfont load» audit trước Lighthouse 13).
• Chrome DevTools Performance + Network panels — see khi fonts load relative để đầu tiên paint và shifts.

Font-loading myths và mistakes

mỗi của những điều này là thực, phổ biến audit finding — với Vì sao nó sai và Điều gì để làm thay vì.

“font-display: swap fully solves my CLS problem.” (bản dịch) «font-display: swap fully solves my CLS vấn đề.» Vì sao đây là sai: swap các cách sửa FOIT (text là visible immediately, good cho LCP và đó Lighthouse audit) nhưng điều này bảo đảm FOUT — và nếu đó fallback và web font differ trong size, đó đổi vẫn shifts đó layout. Google Lighthouse tài liệu note FOIT và FOUT có đó giống nhau impact on CLS khi đó đổi happens. Làm thay vì: pair điều này với một metrically-khớp fallback (hoặc dùng optional), so đó đổi không move bất cứ điều gì.

“Preloading a font always speeds up my page.” (bản dịch) «Preloading một font luôn speeds lên my trang.» Vì sao đây là sai: web.dev là rõ ràng đó preload xuất hiện tại đó cost of taking trình duyệt các tài nguyên away từ loading other các tài nguyên. Preloading fonts bạn không cần trên đó fold delays hơn quan trọng hoạt động. Làm thay vì: preload chỉ đó một hoặc hai fonts needed cho đó ban đầu render.

“font-display: optional means the custom font never loads.” (bản dịch) «font-display: optional có nghĩa là đó custom font không bao giờ loads.» Vì sao đây là sai: điều này loads và là được lưu đệm — đây là chỉ không dùng on đó cụ thể trang load nếu điều này misses đó ~100ms window. Khi được lưu đệm, sau đó trang views typically cho thấy điều này immediately. Làm thay vì: dùng optional cho CLS-sensitive thân phản hồi text không có worrying đó returning khách truy cập miss đó brand font.

“Any font-display value fixes the Lighthouse ‘invisible text’ warning, so I’m done.” (bản dịch) «Bất kỳ font-display giá trị các cách sửa đó Lighthouse ‘invisible text’ warning, so I’m đã xong.» Vì sao đây là sai: passing đó audit là necessary nhưng không sufficient — đó đổi layout shift là một tách biệt, related-nhưng-distinct vấn đề. Làm thay vì: sau clearing đó audit, kiểm tra CLS và cách sửa đó fallback các chỉ số nếu đó đổi vẫn shifts.

“Google Fonts are auto-optimized and can’t cause CWV problems.” (bản dịch) «Google Fonts là auto-optimized và không thể nguyên nhân CWV các vấn đề.» Vì sao đây là sai: một copy-pasted Google Fonts embed là vẫn một render-blocking stylesheet yêu cầu plus một tách biệt font yêu cầu trừ khi display và preconnect/preload là configured. “It’s from Google so it’s fine” (bản dịch) «đây là từ Google so đây là fine» là một phổ biến thực tế audit miss. Làm thay vì: thêm &display=, preconnect để fonts.gstatic.com, và preload đó cốt yếu weight.

“Font loading is a UX-only concern with no SEO relevance.” (bản dịch) «Font loading là một UX-chỉ concern với không SEO relevance.» Vì sao đây là sai: CLS và LCP là Core Web Vitals và part of Google trang experience các tín hiệu. Font choices sit trực tiếp trong một SEO kỹ thuật remit. Làm thay vì: treat font loading as part of của bạn CWV hoạt động — trong khi giữ điều này trong proportion (trang experience là một tiebreaker, không một chính factor).

tìm fonts loading trên một trang

nhanh DevTools Console snippet để list mỗi font face trình duyệt thực ra loaded, và liệu mỗi là đã xong — hữu ích cho spotting nặng hoặc chậm 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 cho font-driven layout shifts

Paste điều này trong Console để log CLS entries as họ happen, including elements đó moved — handy cho confirming font đổi là 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 });

kiểm tra đó font file là WOFF2 và reasonably sized

Fonts nên là WOFF2 và subset. Point những điều này tại font URL để kiểm tra của nó size và loại.

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"]

lớn content-length (well vào hundreds của KB cho single weight) là subsetting/compression opportunity.

Mà font-loading strategy fits trang?

Prove font-loading thay đổi worked

Cốt yếu-font preload kiểm thử

Kiểm thử để chạy: reload với bộ nhớ đệm disabled và inspect font yêu cầu initiator và bắt đầu time trong Network panel. Dự kiến kết quả: dự kiến cốt yếu font bắt đầu sớm và là reused by CSS không có duplicate download. thất bại interpretation: preload các thuộc tính không match CSS yêu cầu hoặc font không phải thực ra cốt yếu. Monitoring window: immediate. Rollback trigger: duplicate các yêu cầu, console các lỗi, hoặc contention đó delays nhiều hơn quan trọng các tài nguyên.

Font-đổi stability kiểm thử

Kiểm thử để chạy: throttle load trong khi recording Performance panel Layout Shifts track. Dự kiến kết quả: fallback text vẫn visible và cuối font không tạo measurable shift. thất bại interpretation: fallback các chỉ số vẫn differ hoặc đổi happens cũng muộn. Monitoring window: immediate across supported breakpoints. Rollback trigger: hidden text, clipped text, hoặc tệ hơn CLS.

Trường-chỉ số quan trọng kiểm thử

Kiểm thử để chạy: so sánh post-phát hành LCP và CLS cho changed template với prior RUM baseline. Dự kiến kết quả: targeted chỉ số improves không có degrading khác. thất bại interpretation: font không phải bottleneck hoặc strategy traded loading speed cho instability. Monitoring window: RUM as traffic arrives; CrUX over của nó rolling window. Rollback trigger: either trường chỉ số worsens consistently.

các tài nguyên worth của bạn time

My related writing

• Điều gì là Cumulative Layout Shift (CLS) & Cách Improve nó (Ahrefs) — my CLS hướng dẫn, including preload + font-display: optional khắc phục cho font-driven shifts.
• Điều gì là Largest Contentful Paint (LCP) & Cách Improve nó (Ahrefs) — good/tốt hơn/best font ladder cho LCP.
• Điều gì là Core Web Vitals (CWVs) & Cách Improve Them (Ahrefs) — nơi CLS và LCP fit trong bigger CWV picture.
• Patrick Stox on Ahrefs blog — rest của my kỹ thuật SEO writing.

từ khoảng ngành

• Sửa Layout Shifts Gây ra by Web Fonts (DebugBear, Umar Hansa) — end-để-end: đo lường → tìm font → font-display → tốt hơn fallback → adjust các chỉ số.
• Bảo đảm text vẫn visible during webfont load (DebugBear) — Lighthouse-audit-cụ thể khắc phục sự cố angle.
• Cách tránh layout shifts gây ra by web fonts (Simon Hearne) — practitioner-level deep dive.
• FOUT, FOIT, FOFT (CSS-Tricks) — canonical explainer cho terminology.
• New Way để Reduce Font Loading Impact: CSS Font Descriptors (Smashing Magazine) — size-adjust/ascent-override/descent-override/line-gap-override technique trong depth.
• Cách Reduce Layout Reflow Khi sử dụng Web Fonts (Material Design) — practical CSS-descriptor walkthrough từ Google Material team.
• chúng ta shipped font-display để Google Fonts (Addy Osmani) — display URL parameter và Vì sao nó đã xóa cần để self-host cho font-display control.

Tự kiểm tra: Font Loading

Five nhanh các câu hỏi on Cách web fonts ảnh hưởng Core Web Vitals. Pick câu trả lời cho mỗi, sau đó kiểm tra.

Nhật ký thay đổi