{"id":13979,"date":"2019-12-14T10:15:52","date_gmt":"2019-12-14T10:15:52","guid":{"rendered":"https:\/\/kiencang.net\/?p=13979"},"modified":"2023-07-23T19:47:15","modified_gmt":"2023-07-23T12:47:15","slug":"sua-loi-foit-trong-wordpress","status":"publish","type":"post","link":"https:\/\/kiencang.net\/sua-loi-foit-trong-wordpress\/","title":{"rendered":"S\u1eeda l\u1ed7i Flash of Invisible Text (FOIT) trong WordPress"},"content":{"rendered":"\n<p>N\u1ebfu b\u1ea1n ph\u00e2n t\u00edch website th\u00f4ng qua <a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\/?hl=vi\" target=\"_blank\" rel=\"noreferrer noopener\">Google PageSpeed Insights<\/a>, b\u1ea1n c\u00f3 th\u1ec3 th\u1ea5y l\u1ed7i nh\u01b0 &#8220;<strong><a href=\"https:\/\/kiencang.net\/dam-bao-van-ban-hien-thi\/\" target=\"_blank\" rel=\"noreferrer noopener\">\u0110\u1ea3m b\u1ea3o v\u0103n b\u1ea3n v\u1eabn hi\u1ec3n th\u1ecb trong khi t\u1ea3i ph\u00f4ng ch\u1eef web<\/a> \/ Ensuare text remains visible during web font load<\/strong>&#8220;. Trong b\u00e0i vi\u1ebft n\u00e0y t\u00f4i s\u1ebd n\u00eau nguy\u00ean nh\u00e2n g\u1ed1c r\u1ebd c\u1ee7a v\u1ea5n \u0111\u1ec1 tr\u00ean v\u00e0 c\u00e1ch \u0111\u1ec3 s\u1eeda n\u00f3.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2019\/12\/fonts-error-goole-psi.png\" alt=\"l\u1ed7i hi\u1ec3n th\u1ecb v\u0103n b\u1ea3n trong khi t\u1ea3i web font\" class=\"wp-image-13980\"\/><\/figure>\n\n\n\n<p>\u1ede tr\u00ean l\u00e0 th\u00f4ng b\u00e1o v\u1ec1 d\u00f9ng font Google, c\u00f2n b\u00ean d\u01b0\u1edbi l\u00e0 font t\u1ea3i t\u1eeb hosting c\u1ee7a b\u1ea1n:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2019\/12\/dao-bao-hien-thi-phong-chu-web.png\" alt=\"\u0111\u1ea3m b\u1ea3o hi\u1ec3n th\u1ecb ph\u00f4ng ch\u1eef web\" class=\"wp-image-13986\"\/><\/figure><\/div>\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_60 counter-hierarchy ez-toc-counter ez-toc-light-blue ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title \" >M\u1ee5c l\u1ee5c<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\" role=\"button\"><label for=\"item-6577d6634c092\" ><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input aria-label=\"Toggle\" aria-label=\"item-6577d6634c092\"  type=\"checkbox\" id=\"item-6577d6634c092\"><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/kiencang.net\/sua-loi-foit-trong-wordpress\/#Cach_phong_chu_hoat_dong_trong_trinh_duyet\" title=\"C\u00e1ch ph\u00f4ng ch\u1eef ho\u1ea1t \u0111\u1ed9ng trong tr\u00ecnh duy\u1ec7t?\">C\u00e1ch ph\u00f4ng ch\u1eef ho\u1ea1t \u0111\u1ed9ng trong tr\u00ecnh duy\u1ec7t?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/kiencang.net\/sua-loi-foit-trong-wordpress\/#Hien_tuong_FOIT_nghia_la_nhu_the_nao\" title=\"Hi\u1ec7n t\u01b0\u1ee3ng FOIT ngh\u0129a l\u00e0 nh\u01b0 th\u1ebf n\u00e0o?\">Hi\u1ec7n t\u01b0\u1ee3ng FOIT ngh\u0129a l\u00e0 nh\u01b0 th\u1ebf n\u00e0o?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/kiencang.net\/sua-loi-foit-trong-wordpress\/#Lam_the_nao_de_sua_loi_FOIT\" title=\"L\u00e0m th\u1ebf n\u00e0o \u0111\u1ec3 s\u1eeda l\u1ed7i FOIT?\">L\u00e0m th\u1ebf n\u00e0o \u0111\u1ec3 s\u1eeda l\u1ed7i FOIT?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/kiencang.net\/sua-loi-foit-trong-wordpress\/#Cach_de_sua_loi_%E2%80%9Cdam_bao_van_ban_van_hien_thi_trong_khi_web_font_tai_ve%E2%80%9D_trong_WordPress\" title=\"C\u00e1ch \u0111\u1ec3 s\u1eeda l\u1ed7i &#8220;\u0111\u1ea3m b\u1ea3o v\u0103n b\u1ea3n v\u1eabn hi\u1ec3n th\u1ecb trong khi web font t\u1ea3i v\u1ec1&#8221; trong WordPress?\">C\u00e1ch \u0111\u1ec3 s\u1eeda l\u1ed7i &#8220;\u0111\u1ea3m b\u1ea3o v\u0103n b\u1ea3n v\u1eabn hi\u1ec3n th\u1ecb trong khi web font t\u1ea3i v\u1ec1&#8221; trong WordPress?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/kiencang.net\/sua-loi-foit-trong-wordpress\/#Ket_luan\" title=\"K\u1ebft lu\u1eadn\">K\u1ebft lu\u1eadn<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/kiencang.net\/sua-loi-foit-trong-wordpress\/#Bonus\" title=\"Bonus\">Bonus<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\" id=\"cach-phong-ch\u1eef-ho\u1ea1t-d\u1ed9ng-trong-trinh-duy\u1ec7t\"><span class=\"ez-toc-section\" id=\"Cach_phong_chu_hoat_dong_trong_trinh_duyet\"><\/span>C\u00e1ch ph\u00f4ng ch\u1eef ho\u1ea1t \u0111\u1ed9ng trong tr\u00ecnh duy\u1ec7t?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Tr\u01b0\u1edbc khi s\u1eeda l\u1ed7i n\u00e0y, ch\u00fang ta c\u1ea7n ph\u1ea3i hi\u1ec3u c\u00e1ch ph\u00f4ng ch\u1eef ho\u1ea1t \u0111\u1ed9ng trong tr\u00ecnh duy\u1ec7t nh\u01b0 th\u1ebf n\u00e0o \u0111\u00e3.<\/p>\n\n\n\n<p>Ph\u00f4ng ch\u1eef l\u00e0 m\u1ed9t file c\u00f3 ph\u1ea7n m\u1edf r\u1ed9ng nh\u01b0 <em>woff2<\/em> (t\u1ed1t nh\u1ea5t), <em>woff<\/em>, <em>ttt<\/em>, <em>otf<\/em>, v\u00e2n v\u00e2n. Nh\u1eefng file n\u00e0y \u0111\u01b0\u1ee3c t\u1ea3i th\u00f4ng qua CSS v\u1edbi <a href=\"https:\/\/kiencang.net\/nhung-font-web-font-face\/\" target=\"_blank\" rel=\"noreferrer noopener\">@<em>font-face<\/em><\/a>. \u0110o\u1ea1n m\u00e3 s\u1ebd tr\u00f4ng gi\u1ed1ng nh\u01b0 th\u1ebf n\u00e0y:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>@<span class=\"hljs-keyword\">font-face<\/span> {\n<span class=\"hljs-attribute\">font-family<\/span>: <span class=\"hljs-string\">'Lobster'<\/span>;\n<span class=\"hljs-attribute\">font-style<\/span>: normal;\n<span class=\"hljs-attribute\">font-weight<\/span>: <span class=\"hljs-number\">400<\/span>;\n<span class=\"hljs-attribute\">src<\/span>: <span class=\"hljs-built_in\">local<\/span>(<span class=\"hljs-string\">'Lobster Regular'<\/span>), <span class=\"hljs-built_in\">local<\/span>(<span class=\"hljs-string\">'Lobster-Regular'<\/span>), <span class=\"hljs-built_in\">url<\/span>(https:\/\/fonts.gstatic.com\/s\/lobster\/v21\/neILzCirqoswsqX9zo-mM5Ez.woff2) <span class=\"hljs-built_in\">format<\/span>(<span class=\"hljs-string\">'woff2'<\/span>);\n}<\/code><\/pre>\n\n\n\n<p>V\u1edbi c\u1ee5m m\u00e3 tr\u00ean, gi\u1edd b\u1ea1n c\u00f3 th\u1ec3 \u00e1p d\u1ee5ng ph\u00f4ng ch\u1eef \u0111\u00f3 cho \u0111o\u1ea1n v\u0103n b\u1ea3n (paragraph) ho\u1eb7c c\u00e1c th\u1ebb HTML t\u01b0\u01a1ng t\u1ef1, s\u1eed d\u1ee5ng c\u00fa ph\u00e1p sau:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code><span class=\"hljs-selector-tag\">p<\/span> {\n<span class=\"hljs-attribute\">font-family<\/span>: Lobster, sans-serif;\n}<\/code><\/pre>\n\n\n\n<p>\u0110i\u1ec1u n\u00e0y n\u00f3i v\u1edbi tr\u00ecnh duy\u1ec7t r\u1eb1ng n\u00f3 ph\u1ea3i \u00e1p d\u1ee5ng ph\u00f4ng ch\u1eef <em>Lobster<\/em> n\u1ebfu c\u00f3 th\u1ec3 (m\u00e0 n\u00f3 v\u1eeba t\u1ea3i v\u1ec1), c\u00f2n kh\u00f4ng \u0111\u01b0\u1ee3c th\u00ec s\u1eed d\u1ee5ng ph\u00f4ng ch\u1eef m\u1eb7c \u0111\u1ecbnh ki\u1ec3u <em>sans-serif<\/em> (kh\u00f4ng ch\u00e2n) c\u00f3 s\u1eb5n tr\u00ean m\u00e1y t\u00ednh ho\u1eb7c di \u0111\u1ed9ng c\u1ee7a ng\u01b0\u1eddi d\u00f9ng.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"hi\u1ec7n-t\u01b0\u1ee3ng-foit-nghia-la-nh\u01b0-th\u1ebf-nao\"><span class=\"ez-toc-section\" id=\"Hien_tuong_FOIT_nghia_la_nhu_the_nao\"><\/span>Hi\u1ec7n t\u01b0\u1ee3ng FOIT ngh\u0129a l\u00e0 nh\u01b0 th\u1ebf n\u00e0o?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>\u0110\u1ec3 hi\u1ec3u r\u00f5 h\u01a1n v\u1ec1 nguy\u00ean nh\u00e2n c\u1ee7a l\u1ed7i &#8220;<strong>\u0110\u1ea3m b\u1ea3o v\u0103n b\u1ea3n hi\u1ec3n th\u1ecb trong khi ph\u00f4ng ch\u1eef web \u0111\u01b0\u1ee3c t\u1ea3i<\/strong>&#8220;, ch\u00fang ta c\u1ea7n hi\u1ec3u r\u00f5 h\u01a1n v\u1ec1 c\u00e1i g\u1ecdi l\u00e0 &#8220;<strong>Flash of Invisible Text<\/strong>&#8220;.<\/p>\n\n\n\n<p>Khi tr\u00ecnh duy\u1ec7t th\u1ea5y m\u1ed9t ph\u00f4ng ch\u1eef t\u00f9y ch\u1ec9nh \u0111\u01b0\u1ee3c \u00e1p d\u1ee5ng cho v\u0103n b\u1ea3n, n\u00f3 s\u1ebd \u0111\u1ee3i cho \u0111\u1ebfn khi font \u0111\u01b0\u1ee3c t\u1ea3i xong. Cho \u0111\u1ebfn khi ph\u00f4ng ch\u1eef ch\u01b0a t\u1ea3i xong th\u00ec v\u0103n b\u1ea3n s\u1ebd b\u1ecb \u1ea9n. M\u1ed9t khi n\u00f3 t\u1ea3i xong, ph\u00f4ng ch\u1eef t\u00f9y ch\u1ec9nh \u0111\u01b0\u1ee3c \u00e1p d\u1ee5ng ngay l\u1eadp t\u1ee9c. \u0110i\u1ec1u n\u00e0y \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 hi\u1ec7n t\u01b0\u1ee3ng FOIT (hi\u1ec3u n\u00f4m na l\u00e0 v\u0103n b\u1ea3n \u0111\u1ed9t nhi\u00ean xu\u1ea5t hi\u1ec7n).<\/p>\n\n\n\n<p>\u0110\u1ec3 c\u1ea3m nh\u1eadn r\u00f5 h\u01a1n hi\u1ec7n t\u01b0\u1ee3ng n\u00e0y trong th\u1ef1c t\u1ebf, b\u1ea1n h\u00e3y xem k\u1ef9 video sau \u0111\u00e2y (video c\u1ee7a t\u00e1c gi\u1ea3 Gijo):<\/p>\n\n\n\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/Gm-B23KZwQ0\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"lam-th\u1ebf-nao-d\u1ec3-s\u1eeda-l\u1ed7i-foit\"><span class=\"ez-toc-section\" id=\"Lam_the_nao_de_sua_loi_FOIT\"><\/span>L\u00e0m th\u1ebf n\u00e0o \u0111\u1ec3 s\u1eeda l\u1ed7i FOIT?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>S\u1eeda l\u1ed7i FOIT t\u01b0\u01a1ng \u0111\u01b0\u01a1ng v\u1edbi vi\u1ec7c b\u1ea1n s\u1eeda l\u1ed7i &#8220;\u0111\u1ea3m b\u1ea3o v\u0103n b\u1ea3n v\u1eabn hi\u1ec3n th\u1ecb trong khi ph\u00f4ng ch\u1eef web t\u1ea3i v\u1ec1&#8221;.<\/p>\n\n\n\n<p><em>@font-face<\/em> c\u00f3 m\u1ed9t thu\u1ed9c t\u00ednh g\u1ecdi l\u00e0 <em>font-display<\/em> v\u00e0 c\u00f3 th\u1ec3 c\u00f3 c\u00e1c gi\u00e1 tr\u1ecb nh\u01b0 <em>auto<\/em>, <em>block<\/em>, <em>swap<\/em>, <em>fallback<\/em>, <em>optional<\/em>. C\u00e1i m\u00e0 ch\u00fang l\u00e0 mu\u1ed1n s\u1eed d\u1ee5ng l\u00e0 <strong>swap<\/strong>. \u0110o\u1ea1n m\u00e3 s\u1ebd tr\u00f4ng nh\u01b0 th\u1ebf n\u00e0y <code>font-display: swap<\/code>;<\/p>\n\n\n\n<p><code>font-display: swap<\/code> n\u00f3i v\u1edbi tr\u00ecnh duy\u1ec7t r\u1eb1ng h\u00e3y s\u1eed d\u1ee5ng font m\u1eb7c \u0111\u1ecbnh cho \u0111\u1ebfn khi font t\u1ea3i xong, sau \u0111\u00f3 m\u1edbi chuy\u1ec3n font hi\u1ec7n t\u1ea1i sang font t\u00f9y ch\u1ec9nh.<\/p>\n\n\n\n<p>C\u00fa ph\u00e1p \u0111\u1ea7y \u0111\u1ee7 tr\u00f4ng gi\u1ed1ng nh\u01b0 d\u01b0\u1edbi \u0111\u00e2y:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>@font-face {\nfont-family: <span class=\"hljs-string\">'Lobster'<\/span>;\nfont-display: swap; <span class=\"hljs-regexp\">\/\/<\/span> ----&gt; \u0111\u00e2y l\u00e0 \u0111o\u1ea1n d\u00f9ng \u0111\u1ec3 s\u1eeda l\u1ed7i!\nfont-style: normal; font-weight: <span class=\"hljs-number\">400<\/span>;\nsrc: <span class=\"hljs-keyword\">local<\/span>(<span class=\"hljs-string\">'Lobster Regular'<\/span>), <span class=\"hljs-keyword\">local<\/span>(<span class=\"hljs-string\">'Lobster-Regular'<\/span>), url(https:<span class=\"hljs-regexp\">\/\/fonts<\/span>.gstatic.com\/<span class=\"hljs-regexp\">s\/lobster\/v21\/ne<\/span>ILzCirqoswsqX9zo-mM5Ez.woff2) <span class=\"hljs-keyword\">format<\/span>(<span class=\"hljs-string\">'woff2'<\/span>); }<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"cach-d\u1ec3-s\u1eeda-l\u1ed7i-d\u1ea3m-b\u1ea3o-van-b\u1ea3n-v\u1eabn-hi\u1ec3n-th\u1ecb-trong-khi-web-font-t\u1ea3i-v\u1ec1-trong-wordpress\"><span class=\"ez-toc-section\" id=\"Cach_de_sua_loi_%E2%80%9Cdam_bao_van_ban_van_hien_thi_trong_khi_web_font_tai_ve%E2%80%9D_trong_WordPress\"><\/span>C\u00e1ch \u0111\u1ec3 s\u1eeda l\u1ed7i &#8220;\u0111\u1ea3m b\u1ea3o v\u0103n b\u1ea3n v\u1eabn hi\u1ec3n th\u1ecb trong khi web font t\u1ea3i v\u1ec1&#8221; trong WordPress?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"s\u1eeda-google-fonts\">S\u1eeda Google Fonts<\/h3>\n\n\n\n<p>Google Fonts (ban \u0111\u1ea7u) kh\u00f4ng th\u00eam <code>font-display: swap<\/code> v\u00e0o ph\u00f4ng ch\u1eef c\u1ee7a h\u1ecd. Tuy nhi\u00ean, k\u1ec3 t\u1eeb Google I\/O 19, h\u1ecd gi\u1edd \u0111\u00e3 h\u1ed7 tr\u1ee3 m\u1ed9t tham s\u1ed1 truy v\u1ea5n m\u1edbi \u0111\u1ec3 thi\u1ebft l\u1eadp <em>font-display<\/em>.<\/p>\n\n\n\n<p>N\u1ebfu b\u1ea1n l\u00e0 nh\u00e0 ph\u00e1t tri\u1ec3n theme, ho\u1eb7c n\u1ebfu b\u1ea1n tho\u1ea3i m\u00e1i v\u1edbi chuy\u1ec7n ch\u1ec9nh s\u1eeda m\u00e3, b\u1ea1n ch\u1ec9 c\u1ea7n th\u00eam <em>&amp;display=swap<\/em> v\u00e0o v\u1ecb tr\u00ed cu\u1ed1i c\u1ee7a URL Google Font. Xem v\u00ed d\u1ee5 b\u00ean d\u01b0\u1edbi.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/kiencang.net\/wp-content\/uploads\/2022\/07\/google-fonts-swap.jpeg\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"541\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2022\/07\/google-fonts-swap.jpeg\" alt=\"th\u00eam m\u00e3 v\u00e0o link font Google\" class=\"wp-image-22433\" srcset=\"https:\/\/kiencang.net\/wp-content\/uploads\/2022\/07\/google-fonts-swap.jpeg 1024w, https:\/\/kiencang.net\/wp-content\/uploads\/2022\/07\/google-fonts-swap-300x158.jpeg 300w, https:\/\/kiencang.net\/wp-content\/uploads\/2022\/07\/google-fonts-swap-768x406.jpeg 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div>\n\n\n<p>Nh\u01b0ng n\u1ebfu b\u1ea1n kh\u00f4ng tho\u1ea3i m\u00e1i v\u1edbi c\u00e1c \u0111o\u1ea1n m\u00e3 ho\u1eb7c nh\u00e0 ph\u00e1t tri\u1ec3n theme c\u1ee7a b\u1ea1n kh\u00f4ng c\u1eadp nh\u1eadt \u0111i\u1ec1u n\u00e0y, b\u1ea1n v\u1eabn kh\u1eafc ph\u1ee5c \u0111\u01b0\u1ee3c v\u1ea5n \u0111\u1ec1 tr\u00ean th\u00f4ng qua plugin m\u00e0 t\u00f4i ph\u00e1t tri\u1ec3n (c\u1ee7a t\u00e1c gi\u1ea3 Gijo Varghese, kh\u00f4ng ph\u1ea3i c\u1ee7a ng\u01b0\u1eddi d\u1ecbch) c\u00f3 t\u00ean <a href=\"https:\/\/wordpress.org\/plugins\/swap-google-font-display\/\" target=\"_blank\" rel=\"noreferrer noopener\">Swap Google Fonts Display<\/a>. N\u00f3 s\u1ebd t\u00ecm ki\u1ebfm b\u1ea5t k\u1ef3 \u0111o\u1ea1n script Google Fonts n\u00e0o v\u00e0 s\u1ebd n\u1ed1i th\u00eam <em>display=swap<\/em> v\u00e0o URL.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"s\u1eeda-cac-font-khac\">S\u1eeda c\u00e1c font kh\u00e1c<\/h3>\n\n\n\n<p>C\u00f3 th\u1ec3 c\u00e1c c\u00e1c font kh\u00e1c ch\u1eb3ng h\u1ea1n nh\u01b0 <em>font-awesome<\/em> ho\u1eb7c <em>font icon<\/em> \u0111\u01b0\u1ee3c ch\u00e8n v\u00e0o b\u1edfi plugin ho\u1eb7c b\u1ea3n th\u00e2n theme.<\/p>\n\n\n\n<p>Kh\u00f4ng may, kh\u00f4ng c\u00f3 c\u00e1ch d\u1ec5 d\u00e0ng ho\u1eb7c plugin \u0111\u1ec3 kh\u1eafc ph\u1ee5c chuy\u1ec7n n\u00e0y. C\u00e1ch duy nh\u1ea5t \u1edf th\u1eddi \u0111i\u1ec3m hi\u1ec7n t\u1ea1i l\u00e0 v\u00e0o th\u1eb3ng Plugin &gt; S\u1eeda Plugin (Plugin Editor) v\u00e0 ch\u1ecdn plugin m\u00e0 ch\u00e8n ph\u00f4ng ch\u1eef v\u00e0o (ph\u00e2n t\u00edch trang c\u1ee7a b\u1ea1n th\u00f4ng qua Google PageSpeed Insights).<\/p>\n\n\n\n<p>Sau \u0111\u00f3 t\u00ecm file CSS c\u00f3 \u0111o\u1ea1n m\u00e3 <em>@font-face<\/em> b\u00ean trong v\u00e0 th\u00eam <em>font-display: swap<\/em>; v\u00e0o b\u00ean trong n\u00f3.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2019\/12\/font-face-edit-plugins.jpeg\" alt=\"s\u1eeda @font-face\" class=\"wp-image-13982\"\/><\/figure><\/div>\n\n\n<p>M\u1eb9o: S\u1eed d\u1ee5ng <a href=\"https:\/\/wordpress.org\/plugins\/string-locator\/\" target=\"_blank\" rel=\"noreferrer noopener\">plugin String Locator<\/a> \u0111\u1ec3 t\u00ecm t\u1ea5t c\u1ea3 file bao g\u1ed3m &#8220;<em>@font-face<\/em>&#8220;.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"k\u1ebft-lu\u1eadn\"><span class=\"ez-toc-section\" id=\"Ket_luan\"><\/span>K\u1ebft lu\u1eadn<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>M\u1eb7c d\u00f9 \u0111\u00e2y ch\u1ec9 l\u00e0 l\u1ed7i d\u1ec5 s\u1eeda, nh\u01b0ng n\u00f3 \u0111em l\u1ea1i tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng t\u1ed1t h\u01a1n nhi\u1ec1u. \u0110\u1eb7c bi\u1ec7t n\u1ebfu h\u1ecd s\u1eed d\u1ee5ng thi\u1ebft b\u1ecb di \u0111\u1ed9ng c\u00f3 k\u1ebft n\u1ed1i ch\u1eadm.&nbsp;\u0110\u00f3 l\u00e0 l\u00fd do v\u00ec sao c\u00e1c <a href=\"https:\/\/kiencang.net\/tang-toc-web-pagespeed-insights\/\" target=\"_blank\" rel=\"noreferrer noopener\">c\u00f4ng c\u1ee5 nh\u01b0 Google PageSpeed Insights<\/a> khuy\u1ebfn kh\u00edch s\u1eeda l\u1ed7i n\u00e0y.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"bonus\"><span class=\"ez-toc-section\" id=\"Bonus\"><\/span>Bonus<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>M\u1ed9t c\u00e1ch kh\u00e1c \u0111\u1ec3 h\u1ea1n ch\u1ebf hi\u1ec7n t\u01b0\u1ee3ng ph\u1ea3i ch\u1edd font t\u1ea3i xong r\u1ed3i m\u1edbi hi\u1ec3n th\u1ecb v\u0103n b\u1ea3n, \u0111\u00f3 l\u00e0 \u01b0u ti\u00ean t\u1ea3i font tr\u01b0\u1edbc. B\u1ea1n c\u00f3 th\u1ec3 ch\u1ee7 \u0111\u1ed9ng l\u00e0m \u0111i\u1ec1u n\u00e0y b\u1eb1ng <a href=\"https:\/\/kiencang.net\/preload-tai-nguyen-quan-trong\/\" target=\"_blank\" rel=\"noreferrer noopener\">th\u1ebb link preload<\/a>&#8211; n\u00f3 chuy\u00ean \u0111\u01b0\u1ee3c d\u00f9ng \u0111\u1ec3 \u01b0u ti\u00ean t\u1ea3i c\u00e1c t\u00e0i nguy\u00ean quan tr\u1ecdng tr\u01b0\u1edbc, v\u00e0 hi\u1ec7n c\u0169ng \u0111\u01b0\u1ee3c nhi\u1ec1u tr\u00ecnh duy\u1ec7t hi\u1ec7n \u0111\u1ea1i h\u1ed7 tr\u1ee3.<\/p>\n\n\n\n<p><em>(D\u1ecbch t\u1eeb b\u00e0i vi\u1ebft: <a href=\"https:\/\/wpspeedmatters.com\/fix-foit-font-in-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">How to Fix Flash of Invisible Text (FOIT) in WordPress<\/a>, t\u00e1c gi\u1ea3: Gijo Varghese, Website: WPSpeedMatters)<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>N\u1ebfu b\u1ea1n ph\u00e2n t\u00edch website th\u00f4ng qua Google PageSpeed Insights, b\u1ea1n c\u00f3 th\u1ec3 th\u1ea5y l\u1ed7i nh\u01b0 &#8220;\u0110\u1ea3m b\u1ea3o v\u0103n b\u1ea3n v\u1eabn hi\u1ec3n th\u1ecb trong khi t\u1ea3i ph\u00f4ng ch\u1eef web \/ Ensuare text remains visible during web font load&#8220;. Trong b\u00e0i vi\u1ebft n\u00e0y t\u00f4i s\u1ebd n\u00eau nguy\u00ean nh\u00e2n g\u1ed1c r\u1ebd c\u1ee7a v\u1ea5n \u0111\u1ec1 tr\u00ean v\u00e0 c\u00e1ch &hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[268,282,262],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>S\u1eeda l\u1ed7i Flash of Invisible Text (FOIT) trong WordPress &#8226; Ki\u1ebfn c\u00e0ng<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kiencang.net\/sua-loi-foit-trong-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"S\u1eeda l\u1ed7i Flash of Invisible Text (FOIT) trong WordPress &#8226; Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"og:description\" content=\"N\u1ebfu b\u1ea1n ph\u00e2n t\u00edch website th\u00f4ng qua Google PageSpeed Insights, b\u1ea1n c\u00f3 th\u1ec3 th\u1ea5y l\u1ed7i nh\u01b0 &#8220;\u0110\u1ea3m b\u1ea3o v\u0103n b\u1ea3n v\u1eabn hi\u1ec3n th\u1ecb trong khi t\u1ea3i ph\u00f4ng ch\u1eef web \/ Ensuare text remains visible during web font load&#8220;. Trong b\u00e0i vi\u1ebft n\u00e0y t\u00f4i s\u1ebd n\u00eau nguy\u00ean nh\u00e2n g\u1ed1c r\u1ebd c\u1ee7a v\u1ea5n \u0111\u1ec1 tr\u00ean v\u00e0 c\u00e1ch &hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kiencang.net\/sua-loi-foit-trong-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/anhducnguyen87\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-12-14T10:15:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-23T12:47:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kiencang.net\/wp-content\/uploads\/2019\/12\/fonts-error-goole-psi.png\" \/>\n<meta name=\"author\" content=\"Nguy\u1ec5n \u0110\u1ee9c Anh\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nguy\u1ec5n \u0110\u1ee9c Anh\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 ph\u00fat\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"S\u1eeda l\u1ed7i Flash of Invisible Text (FOIT) trong WordPress &#8226; Ki\u1ebfn c\u00e0ng","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kiencang.net\/sua-loi-foit-trong-wordpress\/","og_locale":"vi_VN","og_type":"article","og_title":"S\u1eeda l\u1ed7i Flash of Invisible Text (FOIT) trong WordPress &#8226; Ki\u1ebfn c\u00e0ng","og_description":"N\u1ebfu b\u1ea1n ph\u00e2n t\u00edch website th\u00f4ng qua Google PageSpeed Insights, b\u1ea1n c\u00f3 th\u1ec3 th\u1ea5y l\u1ed7i nh\u01b0 &#8220;\u0110\u1ea3m b\u1ea3o v\u0103n b\u1ea3n v\u1eabn hi\u1ec3n th\u1ecb trong khi t\u1ea3i ph\u00f4ng ch\u1eef web \/ Ensuare text remains visible during web font load&#8220;. Trong b\u00e0i vi\u1ebft n\u00e0y t\u00f4i s\u1ebd n\u00eau nguy\u00ean nh\u00e2n g\u1ed1c r\u1ebd c\u1ee7a v\u1ea5n \u0111\u1ec1 tr\u00ean v\u00e0 c\u00e1ch &hellip;","og_url":"https:\/\/kiencang.net\/sua-loi-foit-trong-wordpress\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2019-12-14T10:15:52+00:00","article_modified_time":"2023-07-23T12:47:15+00:00","og_image":[{"url":"https:\/\/kiencang.net\/wp-content\/uploads\/2019\/12\/fonts-error-goole-psi.png"}],"author":"Nguy\u1ec5n \u0110\u1ee9c Anh","twitter_card":"summary_large_image","twitter_misc":{"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi":"Nguy\u1ec5n \u0110\u1ee9c Anh","\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"5 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/sua-loi-foit-trong-wordpress\/","url":"https:\/\/kiencang.net\/sua-loi-foit-trong-wordpress\/","name":"S\u1eeda l\u1ed7i Flash of Invisible Text (FOIT) trong WordPress &#8226; Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2019-12-14T10:15:52+00:00","dateModified":"2023-07-23T12:47:15+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/sua-loi-foit-trong-wordpress\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/sua-loi-foit-trong-wordpress\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/sua-loi-foit-trong-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"S\u1eeda l\u1ed7i Flash of Invisible Text (FOIT) trong WordPress"}]},{"@type":"WebSite","@id":"https:\/\/kiencang.net\/#website","url":"https:\/\/kiencang.net\/","name":"Ki\u1ebfn c\u00e0ng","description":"\u00d4m l\u00fd thuy\u1ebft, h\u00f4n th\u1ef1c h\u00e0nh","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kiencang.net\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"vi"},{"@type":"Person","@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16","name":"Nguy\u1ec5n \u0110\u1ee9c Anh","image":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/kiencang.net\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6d71f9b89393952a8382e30dad26c1ec?s=96&d=monsterid&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6d71f9b89393952a8382e30dad26c1ec?s=96&d=monsterid&r=g","caption":"Nguy\u1ec5n \u0110\u1ee9c Anh"},"description":"Sinh n\u0103m 1987, t\u1ed1t nghi\u1ec7p Cao \u0111\u1eb3ng th\u1ef1c h\u00e0nh FPT qu\u00e3ng 2014, chuy\u00ean ng\u00e0nh Thi\u1ebft k\u1ebf website. T\u00f4i th\u00edch Content, SEO, Ads, T\u0103ng t\u1ed1c website v\u00e0 Th\u01b0\u01a1ng m\u1ea1i \u0111i\u1ec7n t\u1eed. B\u00ean c\u1ea1nh b\u00e0i t\u1ef1 vi\u1ebft, t\u00f4i c\u0169ng d\u1ecbch nhi\u1ec1u n\u1ed9i dung th\u00fa v\u1ecb c\u1ee7a c\u00e1c t\u00e1c gi\u1ea3 kh\u00e1c nhau. FB c\u00e1 nh\u00e2n: facebook.com\/anhducnguyen87. Email li\u00ean h\u1ec7: guiemailchotoi@gmail.com","sameAs":["https:\/\/www.facebook.com\/anhducnguyen87\/"],"url":"https:\/\/kiencang.net\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/13979"}],"collection":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/comments?post=13979"}],"version-history":[{"count":1,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/13979\/revisions"}],"predecessor-version":[{"id":24336,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/13979\/revisions\/24336"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=13979"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=13979"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=13979"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}