{"id":11875,"date":"2019-02-21T06:50:00","date_gmt":"2019-02-20T23:50:00","guid":{"rendered":"https:\/\/www.ducanhplus.com\/?p=11875"},"modified":"2019-02-21T06:50:00","modified_gmt":"2019-02-20T23:50:00","slug":"font-cho-web-va-toc-do-tai-trang","status":"publish","type":"post","link":"https:\/\/kiencang.net\/font-cho-web-va-toc-do-tai-trang\/","title":{"rendered":"Font cho web v\u00e0 v\u1ea5n \u0111\u1ec1 t\u1ed1c \u0111\u1ed9 t\u1ea3i trang"},"content":{"rendered":"\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-6577d663b29cc\" ><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-6577d663b29cc\"  type=\"checkbox\" id=\"item-6577d663b29cc\"><\/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\/font-cho-web-va-toc-do-tai-trang\/#Vi_sao_cac_lua_chon_font_cho_web_khac_nhau_lai_anh_huong_den_toc_do_tai_trang\" title=\"V\u00ec sao c\u00e1c l\u1ef1a ch\u1ecdn font cho web (kh\u00e1c nhau) l\u1ea1i \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn t\u1ed1c \u0111\u1ed9 t\u1ea3i trang?\">V\u00ec sao c\u00e1c l\u1ef1a ch\u1ecdn font cho web (kh\u00e1c nhau) l\u1ea1i \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn t\u1ed1c \u0111\u1ed9 t\u1ea3i trang?<\/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\/font-cho-web-va-toc-do-tai-trang\/#Khong_can_su_dung_webfont_ti_nao\" title=\"Kh\u00f4ng c\u1ea7n s\u1eed d\u1ee5ng webfont t\u00ed n\u00e0o\">Kh\u00f4ng c\u1ea7n s\u1eed d\u1ee5ng webfont t\u00ed 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\/font-cho-web-va-toc-do-tai-trang\/#Noi_tuyen_font_vao_trong_HTML\" title=\"N\u1ed9i tuy\u1ebfn font v\u00e0o trong HTML\">N\u1ed9i tuy\u1ebfn font v\u00e0o trong HTML<\/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\/font-cho-web-va-toc-do-tai-trang\/#Noi_tuyen_font_vao_trong_CSS_ngoai\" title=\"N\u1ed9i tuy\u1ebfn font v\u00e0o trong CSS ngo\u00e0i\">N\u1ed9i tuy\u1ebfn font v\u00e0o trong CSS ngo\u00e0i<\/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\/font-cho-web-va-toc-do-tai-trang\/#Tu_self_host_font_chu\" title=\"T\u1ef1 self host font ch\u1eef\">T\u1ef1 self host font ch\u1eef<\/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\/font-cho-web-va-toc-do-tai-trang\/#Su_dung_font_cua_ben_thu_ba\" title=\"S\u1eed d\u1ee5ng font c\u1ee7a b\u00ean th\u1ee9 ba\">S\u1eed d\u1ee5ng font c\u1ee7a b\u00ean th\u1ee9 ba<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/kiencang.net\/font-cho-web-va-toc-do-tai-trang\/#Chon_mot_phuong_phap_su_dung_font_web\" title=\"Ch\u1ecdn m\u1ed9t ph\u01b0\u01a1ng ph\u00e1p s\u1eed d\u1ee5ng font web\">Ch\u1ecdn m\u1ed9t ph\u01b0\u01a1ng ph\u00e1p s\u1eed d\u1ee5ng font web<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\" id=\"vi-sao-cac-l\u1ef1a-ch\u1ecdn-font-cho-web-khac-nhau-l\u1ea1i-\u1ea3nh-h\u01b0\u1edfng-d\u1ebfn-t\u1ed1c-d\u1ed9-t\u1ea3i-trang\"><span class=\"ez-toc-section\" id=\"Vi_sao_cac_lua_chon_font_cho_web_khac_nhau_lai_anh_huong_den_toc_do_tai_trang\"><\/span>V\u00ec sao c\u00e1c l\u1ef1a ch\u1ecdn font cho web (kh\u00e1c nhau) l\u1ea1i \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn t\u1ed1c \u0111\u1ed9 t\u1ea3i trang?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n<p>B\u00e0i vi\u1ebft n\u00e0y m\u00f4 t\u1ea3 m\u1ed9t s\u1ed1 ph\u01b0\u01a1ng ph\u00e1p s\u1eed d\u1ee5ng font cho web v\u00e0 c\u00e1ch ch\u00fang \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn t\u1ed1c \u0111\u1ed9 trang. N\u00f3i chung danh s\u00e1ch \u0111\u01b0\u1ee3c li\u1ec7t k\u00ea t\u1eeb nhanh nh\u1ea5t \u0111\u1ebfn ch\u1eadm nh\u1ea5t v\u1ec1 m\u1eb7t l\u00fd thuy\u1ebft v\u00e0 cung c\u1ea5p c\u00e1c th\u00f4ng tin sau v\u1ec1 t\u1eebng bi\u1ec7n ph\u00e1p:<\/p>\n\n\n<ul><li>\u0110i\u1ec3m c\u00f3 l\u1ee3i;<\/li><li>\u0110i\u1ec3m c\u00f3 h\u1ea1i;<\/li><li>Minh h\u1ecda c\u00e1ch n\u00f3 l\u00e0m vi\u1ec7c tr\u00ean m\u1ea1ng;<\/li><li>M\u1ed9t v\u00ed d\u1ee5 tri\u1ec3n khai \u0111i\u1ec3n h\u00ecnh;<\/li><li>M\u1ed9t li\u00ean k\u1ebft \u0111\u1ebfn m\u1ed9t trang th\u1ef1c s\u1ef1 s\u1eed d\u1ee5ng k\u1ef9 thu\u1eadt \u0111\u00f3;<\/li><li>T\u00f3m t\u1eaft ng\u1eafn g\u1ecdn v\u1ec1 k\u1ef9 thu\u1eadt.<\/li><\/ul>\n\n\n<p>Hi\u1ec3u r\u00f5 c\u00e1ch s\u1eed d\u1ee5ng font s\u1ebd gi\u00fap b\u1ea1n <a href=\"https:\/\/kiencang.net\/tang-toc-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">t\u0103ng t\u1ed1c website t\u1ed1t h\u01a1n n\u1eefa<\/a>.<\/p>\n\n\n<p class=\"has-background\" style=\"background-color:#dfdfdf\">L\u01b0u \u00fd: Vui l\u00f2ng thanh to\u00e1n web font c\u1ee7a b\u1ea1n v\u00e0 s\u1eed d\u1ee5ng ch\u00fang h\u1ee3p ph\u00e1p. T\u00f4i khuy\u00ean nh\u1eefng ng\u01b0\u1eddi qu\u1ea3n tr\u1ecb web n\u00ean d\u00f9ng <a href=\"https:\/\/www.fontspring.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">FontSpring<\/a>. H\u1ecd cung c\u1ea5p gi\u1ea5y ph\u00e9p h\u1ee3p ph\u00e1p cho webfont v\u1edbi gi\u00e1 ch\u1ec9 29 \u0111\u00f4 l\u00e0 m\u1ed7i font v\u1edbi th\u1ecfa thu\u1eadn r\u1ea5t t\u1ed1t (ch\u1ec9 ph\u1ea3i tr\u1ea3 m\u1ed9t l\u1ea7n &#8211; v\u00e0 trang c\u1ee7a b\u1ea1n v\u1eabn s\u1eed d\u1ee5ng h\u1ee3p ph\u00e1p m\u00e3i m\u00e3i n\u1ebfu kh\u00f4ng v\u01b0\u1ee3t qu\u00e1 500 ng\u00e0n view m\u1ed9t th\u00e1ng- m\u1ed9t con s\u1ed1 r\u1ea5t l\u1edbn).<\/p>\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n<h2 class=\"wp-block-heading\" id=\"khong-c\u1ea7n-s\u1eed-d\u1ee5ng-webfont-ti-nao\"><span class=\"ez-toc-section\" id=\"Khong_can_su_dung_webfont_ti_nao\"><\/span>Kh\u00f4ng c\u1ea7n s\u1eed d\u1ee5ng webfont t\u00ed n\u00e0o<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n<h3 class=\"wp-block-heading\" id=\"di\u1ec3m-l\u1ee3i\">\u0110i\u1ec3m l\u1ee3i:<\/h3>\n\n\n<ul><li>Ho\u1ea1t \u0111\u1ed9ng \u1edf b\u1ea5t c\u1ee9 \u0111\u00e2u tr\u00ean m\u1ecdi thi\u1ebft b\u1ecb;<\/li><li>Kh\u00f4ng gia t\u0103ng th\u00eam ph\u1ee9c t\u1ea1p;<\/li><li>Kh\u00f4ng t\u1ea1o b\u1ea5t c\u1ee9 \u1ea3nh h\u01b0\u1edfng n\u00e0o l\u00ean t\u1ed1c \u0111\u1ed9 trang.<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"di\u1ec3m-h\u1ea1i\">\u0110i\u1ec3m h\u1ea1i:<\/h3>\n\n\n<ul><li>Gi\u1edbi h\u1ea1n kh\u1ea3 n\u0103ng l\u1ef1a ch\u1ecdn font;<\/li><li>Tr\u00f4ng font ch\u1eef c\u00f3 th\u1ec3 kh\u00e1 t\u1ebb nh\u1ea1t;<\/li><li>C\u00f3 th\u1ec3 tr\u00f4ng kh\u00f4ng \u0111\u01b0\u1ee3c chuy\u00ean nghi\u1ec7p.<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"no-ho\u1ea1t-d\u1ed9ng-tren-m\u1ea1ng-nh\u01b0-th\u1ebf-nao\">N\u00f3 ho\u1ea1t \u0111\u1ed9ng tr\u00ean m\u1ea1ng nh\u01b0 th\u1ebf n\u00e0o<\/h3>\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2019\/02\/khong-dung-webfont.png\" alt=\"kh\u00f4ng d\u00f9ng webfont\" class=\"wp-image-11876\"\/><\/figure><\/div>\n\n\n<p>Tr\u00ecnh duy\u1ec7t nh\u1eadn HTML\/CSS t\u1eeb m\u00e1y ch\u1ee7. Kh\u00f4ng y\u00eau c\u1ea7u c\u00e1c b\u01b0\u1edbc b\u1ed5 sung.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"cach-tri\u1ec3n-khai-thong-th\u01b0\u1eddng\">C\u00e1ch tri\u1ec3n khai th\u00f4ng th\u01b0\u1eddng<\/h3>\n\n\n<pre class=\"wp-block-code\"><code>p {font-family: \"Times New Roman\", Georgia, Serif;}<\/code><\/pre>\n\n\n<p>S\u1eed d\u1ee5ng CSS font-family, l\u1ef1a ch\u1ecdn font web an to\u00e0n trong c\u00e1c font m\u00e0 b\u1ea1n th\u00edch, theo th\u1ee9 t\u1ef1 \u01b0u ti\u00ean. Tr\u00ecnh duy\u1ec7t s\u1ebd l\u1ef1a ch\u1ecdn font \u0111\u1ec3 hi\u1ec3n th\u1ecb trang web t\u1eeb danh s\u00e1ch \u0111\u00f3.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"vi-d\u1ee5-v\u1ec1-trang-s\u1eed-d\u1ee5ng-ph\u01b0\u01a1ng-th\u1ee9c-nay\">V\u00ed d\u1ee5 v\u1ec1 trang s\u1eed d\u1ee5ng ph\u01b0\u01a1ng th\u1ee9c n\u00e0y<\/h3>\n\n\n<p>V\u00ed d\u1ee5 v\u1ec1 phi\u00ean b\u1ea3n c\u1ee7a trang n\u00e0y (trang g\u1ed1c varvy ti\u1ebfng Anh) kh\u00f4ng s\u1eed d\u1ee5ng webfont \u0111\u1ec3 b\u1ea1n ki\u1ec3m tra v\u00e0 xem ph\u01b0\u01a1ng th\u1ee9c s\u1eed d\u1ee5ng:&nbsp;<a href=\"https:\/\/varvy.com\/pagespeed\/webfonts\/nofont.html\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/varvy.com\/pagespeed\/webfonts\/nofont.html<\/a><\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"l\u01b0u-y-v\u1ec1-ph\u01b0\u01a1ng-th\u1ee9c-nay\">L\u01b0u \u00fd v\u1ec1 ph\u01b0\u01a1ng th\u1ee9c n\u00e0y<\/h3>\n\n\n<p>Ph\u01b0\u01a1ng th\u1ee9c n\u00e0y l\u00e0 c\u00e1ch nhanh nh\u1ea5t, \u0111\u01a1n gi\u1ea3n nh\u1ea5t v\u00e0 ph\u1ed5 bi\u1ebfn nh\u1ea5t \u0111\u1ec3 hi\u1ec3n th\u1ecb font. Ch\u1eb3ng th\u00e0nh v\u1ea5n \u0111\u1ec1 l\u00e0 ph\u01b0\u01a1ng th\u1ee9c font kh\u00e1c b\u1ea1n \u0111ang s\u1eed d\u1ee5ng l\u00e0 g\u00ec, \u0111\u00e2y v\u1eabn l\u00e0 ph\u01b0\u01a1ng th\u1ee9c d\u1ef1 ph\u00f2ng m\u1eb7c \u0111\u1ecbnh cho c\u00e1c thi\u1ebft b\u1ecb v\u00e0 tr\u00ecnh duy\u1ec7t c\u0169 v\u00ec th\u1ebf b\u1ea1n c\u1ea7n \u0111\u1ec3 \u00fd xem trang c\u1ee7a b\u1ea1n s\u1ebd tr\u00f4ng nh\u01b0 th\u1ebf n\u00e0o khi s\u1eed d\u1ee5ng n\u00f3.<\/p>\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n<h2 class=\"wp-block-heading\" id=\"n\u1ed9i-tuy\u1ebfn-font-vao-trong-html\"><span class=\"ez-toc-section\" id=\"Noi_tuyen_font_vao_trong_HTML\"><\/span>N\u1ed9i tuy\u1ebfn font v\u00e0o trong HTML<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n<h3 class=\"wp-block-heading\" id=\"di\u1ec3m-l\u1ee3i\">\u0110i\u1ec3m l\u1ee3i:<\/h3>\n\n\n<ul><li>Kh\u00f4ng b\u1ed5 sung l\u1eddi g\u1ecdi m\u1ea1ng \u0111\u1ec3 nh\u1eadn \u0111\u01b0\u1ee3c font;<\/li><li>Kh\u00f4ng ph\u1ee5 thu\u1ed9c v\u00e0o b\u00ean th\u1ee9 ba;<\/li><li>Kh\u00f4ng c\u00f3 hi\u1ec7n t\u01b0\u1ee3ng Flash c\u1ee7a v\u0103n b\u1ea3n ch\u01b0a \u0111\u01b0\u1ee3c \u0111\u1ecbnh d\u1ea1ng (FOUT);<\/li><li>S\u1eed d\u1ee5ng b\u1ea5t c\u1ee9 font n\u00e0o m\u00e0 b\u1ea1n mu\u1ed1n.<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"di\u1ec3m-h\u1ea1i\">\u0110i\u1ec3m h\u1ea1i:<\/h3>\n\n\n<ul><li>L\u00e0m cho t\u1ec7p HTML l\u1edbn h\u01a1n;<\/li><li>\u0110\u1eb7t font v\u00e0o <a href=\"https:\/\/kiencang.net\/duong-dan-hien-thi-trang-quan-trong\/\" target=\"_blank\" rel=\"noreferrer noopener\">tuy\u1ebfn hi\u1ec3n th\u1ecb quan tr\u1ecdng<\/a>;<\/li><li>Ch\u1ec9 nhanh n\u1ebfu b\u1ea1n \u0111\u00e3 <a href=\"https:\/\/kiencang.net\/noi-tuyen-cac-css-nho\/\" target=\"_blank\" rel=\"noreferrer noopener\">n\u1ed9i tuy\u1ebfn CSS<\/a> t\u1eeb tr\u01b0\u1edbc v\u00e0o trong HTML;<\/li><li>Ch\u1ec9 nhanh khi m\u00e0 b\u1ea1n c\u00f3 CSS r\u1ea5t nh\u1ecf;<\/li><li>Ch\u1ec9 l\u00e0 l\u1ef1a ch\u1ecdn h\u1ee3p l\u00fd n\u1ebfu trang c\u1ee7a b\u1ea1n kh\u00f4ng s\u1eed d\u1ee5ng nhi\u1ec1u h\u01a1n m\u1ed9t font;<\/li><li>Kh\u00f4ng \u0111\u01b0\u1ee3c h\u1ed7 tr\u1ee3 b\u1edfi c\u00e1c tr\u00ecnh duy\u1ec7t c\u0169 (khi s\u1eed d\u1ee5ng \u0111\u1ecbnh d\u1ea1ng font .woff);<\/li><li>Font ph\u1ea3i t\u1ea3i l\u1ea1i m\u1ed7i khi trang \u0111\u01b0\u1ee3c xem.<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"cach-no-ho\u1ea1t-d\u1ed9ng-tren-m\u1ea1ng\">C\u00e1ch n\u00f3 ho\u1ea1t \u0111\u1ed9ng tr\u00ean m\u1ea1ng<\/h3>\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2019\/02\/noi-tuyen-webfont.png\" alt=\"n\u1ed9i tuy\u1ebfn webfont\" class=\"wp-image-11877\"\/><\/figure><\/div>\n\n\n<p>Tr\u00ecnh duy\u1ec7t nh\u1eadn file HTML t\u1eeb m\u00e1y ch\u1ee7. Kh\u00f4ng c\u1ea7n k\u1ebft n\u1ed1i m\u1ea1ng b\u1ed5 sung. HTML l\u1edbn h\u01a1n 10K trong c\u00e1c t\u00ecnh hu\u1ed1ng \u0111\u01b0\u1ee3c t\u1ed1i \u01b0u h\u00f3a.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"cach-tri\u1ec3n-khai-thong-th\u01b0\u1eddng\">C\u00e1ch tri\u1ec3n khai th\u00f4ng th\u01b0\u1eddng<\/h3>\n\n\n<pre class=\"wp-block-code\"><code>@font-face{font-family:'robotolight';src: url(data:application\/x-font-woff;charset=utf-8;base64,d09GRg .... AAA==) format('woff');font-weight: normal;font-style: normal;}<\/code><\/pre>\n\n\n<p>Font ch\u1eef \u0111\u01b0\u1ee3c m\u00e3 h\u00f3a base64 &amp; \u0111\u01b0\u1ee3c th\u00eam n\u1ed9i tuy\u1ebfn v\u00e0o trong CSS n\u1eb1m trong file HTML.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"vi-d\u1ee5-v\u1ec1-trang-s\u1eed-d\u1ee5ng-ph\u01b0\u01a1ng-th\u1ee9c-nay\">V\u00ed d\u1ee5 v\u1ec1 trang s\u1eed d\u1ee5ng ph\u01b0\u01a1ng th\u1ee9c n\u00e0y<\/h3>\n\n\n<p>Ch\u00ednh trang g\u1ed1c ti\u1ebfng Anh c\u1ee7a b\u00e0i d\u1ecbch n\u00e0y s\u1eed d\u1ee5ng ph\u01b0\u01a1ng th\u1ee9c n\u1ed9i tuy\u1ebfn font v\u00e0o HTML:&nbsp;<a href=\"https:\/\/varvy.com\/pagespeed\/web-font-options.html\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/varvy.com\/pagespeed\/web-font-options.html<\/a><\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"l\u01b0u-y-v\u1ec1-ph\u01b0\u01a1ng-th\u1ee9c-nay\">L\u01b0u \u00fd v\u1ec1 ph\u01b0\u01a1ng th\u1ee9c n\u00e0y<\/h3>\n\n\n<p>Trang Varvy \u0111ang s\u1eed d\u1ee5ng ph\u01b0\u01a1ng th\u1ee9c n\u1ed9i tuy\u1ebfn font v\u00e0o HTML. N\u00f3 kh\u00f4ng \u0111\u01b0\u1ee3c nhi\u1ec1u ng\u01b0\u1eddi khuy\u00ean d\u00f9ng, v\u00e0 ch\u1ec9 ho\u1ea1t \u0111\u1ed9ng t\u1ed1t v\u1edbi nh\u1eefng trang \u0111\u01a1n gi\u1ea3n v\u00e0 \u0111\u01b0\u1ee3c t\u1ed1i \u01b0u r\u1ea5t t\u1ed1t. Ph\u01b0\u01a1ng th\u1ee9c n\u00e0y d\u1ec5 b\u1ecb nh\u1ea7m l\u1eabn v\u1edbi ph\u01b0\u01a1ng th\u1ee9c n\u1ed9i tuy\u1ebfn font v\u00e0o trong file CSS ngo\u00e0i (c\u00e1i s\u1ebd \u0111\u01b0\u1ee3c m\u00f4 t\u1ea3 trong ph\u01b0\u01a1ng th\u1ee9c k\u1ebf ti\u1ebfp).<\/p>\n\n\n<p>C\u00f3 m\u1ed9t v\u00e0i l\u00fd do ch\u00ednh \u0111\u00e1ng cho vi\u1ec7c b\u1ea1n kh\u00f4ng n\u00ean s\u1eed d\u1ee5ng font n\u1ed9i tuy\u1ebfn v\u00e0o HTML. M\u1ed9t trong c\u00e1c l\u00fd do ch\u00ednh l\u00e0 cache (kh\u00f4ng \u0111\u01b0\u1ee3c <a href=\"https:\/\/kiencang.net\/bo-nho-dem-trinh-duyet\/\" target=\"_blank\" rel=\"noreferrer noopener\">b\u1ed9 nh\u1edb \u0111\u1ec7m c\u1ee7a tr\u00ecnh duy\u1ec7t l\u01b0u l\u1ea1i<\/a>). Ph\u01b0\u01a1ng th\u1ee9c n\u00e0y l\u00e0m cho font c\u1ee7a b\u1ea1n ph\u1ea3i t\u1ea3i l\u1ea1i m\u1ed7i l\u1ea7n trang \u0111\u01b0\u1ee3c xem, \u0111i\u1ec1u n\u00e0y l\u00e0 kh\u00e1 ng\u1edb ng\u1ea9n v\u1edbi h\u1ea7u h\u1ebft m\u1ecdi ng\u01b0\u1eddi, nh\u01b0ng s\u1ebd c\u00f3 t\u00e1c d\u1ee5ng gi\u00fap trang web nhanh h\u01a1n trong m\u1ed9t s\u1ed1 \u0111i\u1ec1u ki\u1ec7n n\u00e0o \u0111\u00f3. Ph\u01b0\u01a1ng th\u1ee9c n\u00e0y c\u0169ng g\u1ea7n nh\u01b0 ch\u1eafc ch\u1eafn l\u00e0m cho file HTML c\u1ee7a b\u1ea1n v\u01b0\u1ee3t qu\u00e1 14KB, \u0111\u00e2y c\u0169ng l\u00e0 \u0111i\u1ec1u kh\u00f4ng \u0111\u01b0\u1ee3c khuy\u1ebfn kh\u00edch.<\/p>\n\n\n<p>V\u1eady t\u1ea1i sao t\u00f4i v\u1eabn s\u1eed d\u1ee5ng n\u00f3 tr\u00ean trang n\u00e0y? B\u1edfi v\u00ec \u0111\u00e2y l\u00e0 c\u00e1ch nhanh nh\u1ea5t v\u1edbi trang c\u1ee7a t\u00f4i. \u0110i\u1ec1u n\u00e0y s\u1ebd kh\u00f4ng \u0111\u00fang n\u1eefa n\u1ebfu \u00e1p d\u1ee5ng cho c\u00e1c trang kh\u00e1c. T\u00f4i c\u00f3 th\u1ec3 lo\u1ea1i b\u1ecf c\u00e1c r\u1eafc r\u1ed1i v\u00ec CSS c\u1ee7a t\u00f4i r\u1ea5t nh\u1ecf g\u1ecdn m\u00e0 n\u00f3 c\u0169ng \u0111\u01b0\u1ee3c n\u1ed9i tuy\u1ebfn t\u1eeb tr\u01b0\u1edbc r\u1ed3i, trang web c\u1ee7a t\u00f4i tr\u00f4ng s\u1ebd v\u1eabn t\u1ed1t n\u1ebfu font kh\u00f4ng ho\u1ea1t \u0111\u1ed9ng, \u0111a s\u1ed1 ng\u01b0\u1eddi d\u00f9ng c\u1ee7a t\u00f4i s\u1eed d\u1ee5ng tr\u00ecnh duy\u1ec7t hi\u1ec7n \u0111\u1ea1i v\u00e0 b\u1edfi v\u00ec t\u00f4i \u0111\u00e3 thi\u1ebft k\u1ebf trang n\u00e0y ch\u1ec9 t\u1ea1o ra r\u1ea5t \u00edt l\u1eddi g\u1ecdi t\u1edbi m\u00e1y ch\u1ee7 g\u1ed1c.<\/p>\n\n\n<p>H\u1ea7u h\u1ebft c\u00e1c chuy\u00ean gia \u0111\u00e3 ch\u00ednh x\u00e1c v\u00e0 \u0111\u00fang \u0111\u1eafn khi n\u00f3i r\u1eb1ng ph\u01b0\u01a1ng th\u1ee9c n\u00e0y l\u00e0 \u00fd t\u01b0\u1edfng t\u1ed3i t\u1ec7. D\u1ea7u v\u1eady, c\u00e1c trang m\u00e0 h\u1ecd n\u00f3i c\u00e1i n\u00e0y l\u00e0 \u00fd t\u01b0\u1edfng t\u1ed3i t\u1ec7 t\u1ea3i ch\u1eadm h\u01a1n so v\u1edbi trang c\u1ee7a t\u00f4i (\u0111o\u1ea1n n\u00e0y Varvy th\u1eadt t\u1ef1 tin gh\u00ea!).<\/p>\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n<h2 class=\"wp-block-heading\" id=\"n\u1ed9i-tuy\u1ebfn-font-vao-trong-css-ngoai\"><span class=\"ez-toc-section\" id=\"Noi_tuyen_font_vao_trong_CSS_ngoai\"><\/span>N\u1ed9i tuy\u1ebfn font v\u00e0o trong CSS ngo\u00e0i<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n<h3 class=\"wp-block-heading\" id=\"di\u1ec3m-l\u1ee3i\">\u0110i\u1ec3m l\u1ee3i:<\/h3>\n\n\n<ul><li>Kh\u00f4ng b\u1ed5 sung l\u1eddi g\u1ecdi m\u1ea1ng \u0111\u1ec3 nh\u1eadn font;<\/li><li>Kh\u00f4ng d\u1ef1a v\u00e0o b\u00ean th\u1ee9 ba;<\/li><li>Kh\u00f4ng x\u1ea3y ra hi\u1ec7n t\u01b0\u1ee3ng Flash (nh\u00e1y) cho c\u00e1c v\u0103n b\u1ea3n ch\u01b0a \u0111\u01b0\u1ee3c \u0111\u1ecbnh d\u1ea1ng (FOUT);<\/li><li>S\u1eed d\u1ee5ng b\u1ea5t c\u1ee9 font n\u00e0o m\u00e0 b\u1ea1n mu\u1ed1n;<\/li><li>C\u00f3 l\u01b0u b\u1ed9 nh\u1edb \u0111\u1ec7m tr\u00ecnh duy\u1ec7t.<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"di\u1ec3m-h\u1ea1i\">\u0110i\u1ec3m h\u1ea1i:<\/h3>\n\n\n<ul><li>\u0110\u1eb7t font v\u00e0o tuy\u1ebfn hi\u1ec3n th\u1ecb quan tr\u1ecdng;<\/li><li>L\u00e0m t\u0103ng k\u00edch c\u1ee1 file CSS;<\/li><li>Ch\u1ec9 l\u00e0 l\u1ef1a ch\u1ecdn kh\u1ea3 thi n\u1ebfu trang c\u1ee7a b\u1ea1n s\u1eed d\u1ee5ng kh\u00f4ng nhi\u1ec1u h\u01a1n m\u1ed9t font;<\/li><li>Kh\u00f4ng h\u1ed7 tr\u1ee3 b\u1edfi c\u00e1c tr\u00ecnh duy\u1ec7t c\u0169 (khi s\u1eed d\u1ee5ng \u0111\u1ecbnh d\u1ea1ng font .woff).<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"no-ho\u1ea1t-d\u1ed9ng-th\u1ebf-nao\">N\u00f3 ho\u1ea1t \u0111\u1ed9ng th\u1ebf n\u00e0o<\/h3>\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2019\/02\/noi-tuyen-font-css.png\" alt=\"n\u1ed9i tuy\u1ebfn font v\u00e0o trong css\" class=\"wp-image-11878\"\/><\/figure><\/div>\n\n\n<p>Tr\u00ecnh duy\u1ec7t nh\u1eadn HTML v\u00e0 CSS t\u1eeb m\u00e1y ch\u1ee7. Kh\u00f4ng c\u1ea7n c\u00e1c b\u01b0\u1edbc k\u1ebft n\u1ed1i m\u1ea1ng b\u1ed5 sung. File CSS l\u1edbn h\u01a1n 10KB trong c\u00e1c t\u00ecnh hu\u1ed1ng \u0111\u01b0\u1ee3c t\u1ed1i \u01b0u h\u00f3a.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"vi-d\u1ee5-v\u1ec1-trang-s\u1eed-d\u1ee5ng-ph\u01b0\u01a1ng-th\u1ee9c-nay\">V\u00ed d\u1ee5 v\u1ec1 trang s\u1eed d\u1ee5ng ph\u01b0\u01a1ng th\u1ee9c n\u00e0y<\/h3>\n\n\n<p>Phi\u00ean b\u1ea3n c\u1ee7a trang n\u00e0y s\u1eed d\u1ee5ng font css n\u1ed9i tuy\u1ebfn \u0111\u1ec3 b\u1ea1n ki\u1ec3m tra v\u00e0 xem c\u00e1ch th\u1ee9c s\u1eed d\u1ee5ng:&nbsp;<a href=\"https:\/\/varvy.com\/pagespeed\/webfonts\/inlinecss.html\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/varvy.com\/pagespeed\/webfonts\/inlinecss.html<\/a><\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"l\u01b0u-y-v\u1ec1-ph\u01b0\u01a1ng-th\u1ee9c-nay\">L\u01b0u \u00fd v\u1ec1 ph\u01b0\u01a1ng th\u1ee9c n\u00e0y<\/h3>\n\n\n<p>Ph\u01b0\u01a1ng th\u1ee9c n\u00e0y cho ph\u00e9p trang t\u1ea3i nhanh v\u00e0 font hi\u1ec3n th\u1ecb c\u00f3 kh\u1ea3 n\u0103ng \u0111\u01b0\u1ee3c cache v\u00e0o b\u1ed9 nh\u1edb tr\u00ecnh duy\u1ec7t. T\u00f4i s\u1ebd n\u00f3i r\u1eb1ng n\u00f3 l\u00e0 gi\u1ea3i ph\u00e1p tuy\u1ec7t v\u1eddi cho c\u00e1c trang ch\u1ec9 s\u1eed d\u1ee5ng m\u1ed9t font ch\u1eef m\u00e0 n\u00f3 \u0111\u00e3 \u0111\u01b0\u1ee3c t\u1ed1i \u01b0u s\u1eb5n cho t\u1ed1c \u0111\u1ed9. Ph\u01b0\u01a1ng th\u1ee9c n\u00e0y \u0111\u1eb7t font tr\u1ef1c ti\u1ebfp v\u00e0o trong CSS, c\u00e1i m\u00e0 trang c\u1ee7a b\u1ea1n \u0111\u00e3 t\u1ea3i t\u1eeb tr\u01b0\u1edbc (s\u1ebd gi\u00fap c\u00e1c l\u1ea7n t\u1ea3i sau \u0111\u01b0\u1ee3c nhanh h\u01a1n).<\/p>\n\n\n<p>N\u1ed9i tuy\u1ebfn font v\u00e0o trong CSS kh\u00f4ng ph\u1ea3i l\u00e0 l\u1ef1a ch\u1ecdn t\u1ed1t n\u1ebfu b\u1ea1n s\u1eed d\u1ee5ng h\u01a1n m\u1ed9t font ho\u1eb7c nhi\u1ec1u h\u01a1n m\u1ed9t font weight (\u0111\u1ed9 \u0111\u1eadm nh\u1ea1t c\u1ee7a font). N\u00f3 c\u0169ng kh\u00f4ng ph\u1ea3i l\u00e0 gi\u1ea3i ph\u00e1p t\u1ed1t cho c\u00e1c trang ch\u1ec9 s\u1eed d\u1ee5ng font ch\u1eef r\u1ea5t \u00edt.<\/p>\n\n\n<p>T\u00f4i coi \u0111\u00e2y l\u00e0 m\u1ed9t c\u00e1ch n\u00e2ng cao \u0111\u1ec3 hi\u1ec3n th\u1ecb font ch\u1eef, v\u00e0 nh\u01b0 v\u1eady t\u00f4i khuy\u1ebfn ngh\u1ecb b\u1ea1n kh\u00e1m ph\u00e1 c\u00e1c l\u1ef1a ch\u1ecdn kh\u00e1c tr\u01b0\u1edbc khi th\u1eed c\u00e1ch n\u00e0y.<\/p>\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n<h2 class=\"wp-block-heading\" id=\"t\u1ef1-self-host-font-ch\u1eef\"><span class=\"ez-toc-section\" id=\"Tu_self_host_font_chu\"><\/span>T\u1ef1 self host font ch\u1eef<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n<h3 class=\"wp-block-heading\" id=\"di\u1ec3m-l\u1ee3i\">\u0110i\u1ec3m l\u1ee3i:<\/h3>\n\n\n<ul><li>\u0110\u01b0\u1ee3c h\u1ed7 tr\u1ee3 b\u1edfi h\u1ea7u h\u1ebft tr\u00ecnh duy\u1ec7t v\u00e0 thi\u1ebft b\u1ecb;<\/li><li>Kh\u00f4ng ph\u1ee5c thu\u1ed9c v\u00e0o b\u00ean th\u1ee9 ba;<\/li><li>S\u1eed d\u1ee5ng \u0111a d\u1ea1ng ki\u1ec3u font v\u00e0 m\u1ee9c \u0111\u1ed9 \u0111\u1eadm nh\u1ea1t;<\/li><li>Ph\u01b0\u01a1ng ph\u00e1p hi\u1ec7n \u0111\u1ea1i v\u00e0 t\u00e0i li\u1ec7u h\u01b0\u1edbng d\u1eabn t\u1ed1t;<\/li><li>B\u1ed9 nh\u1edb cache c\u0169ng t\u1ed1t.<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"di\u1ec3m-h\u1ea1i\">\u0110i\u1ec3m h\u1ea1i:<\/h3>\n\n\n<ul><li>Y\u00eau c\u1ea7u th\u00eam k\u1ebft n\u1ed1i m\u1ea1ng;<\/li><li>C\u00f3 hi\u1ec7n t\u01b0\u1ee3ng Flash cho v\u0103n b\u1ea3n ch\u01b0a \u0111\u01b0\u1ee3c \u0111\u1ecbnh d\u1ea1ng (FOUT).<\/li><\/ul>\n\n\n<p>\u0110\u00e2y l\u00e0 c\u00e1ch \u0111\u01b0\u1ee3c khuy\u1ebfn ngh\u1ecb v\u00e0 an to\u00e0n \u0111\u1ec3 ph\u1ee5c v\u1ee5 font web c\u1ee7a ri\u00eang b\u1ea1n. H\u00e3y \u0111\u1ec3 tr\u00ecnh duy\u1ec7t l\u1ef1a ch\u1ecdn font l\u00fd t\u01b0\u1edfng d\u1ef1a tr\u00ean tr\u00ecnh duy\u1ec7t c\u1ee7a ng\u01b0\u1eddi d\u00f9ng ho\u1eb7c thi\u1ebft b\u1ecb. \u0110\u01a1n gi\u1ea3n \u0111\u1ec3 tri\u1ec3n khai v\u00e0 c\u00f3 t\u00e0i li\u1ec7u h\u01b0\u1edbng d\u1eabn phong ph\u00fa.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"no-ho\u1ea1t-d\u1ed9ng-th\u1ebf-nao\">N\u00f3 ho\u1ea1t \u0111\u1ed9ng th\u1ebf n\u00e0o?<\/h3>\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2019\/02\/tu-host-webfont.png\" alt=\"t\u1ef1 host webfont\" class=\"wp-image-11880\"\/><\/figure><\/div>\n\n\n<p>Tr\u00ecnh duy\u1ec7t nh\u1eadn HTML v\u00e0 CSS t\u1eeb m\u00e1y ch\u1ee7 web. Tr\u00ecnh duy\u1ec7t t\u00ecm \u0111\u01b0\u1eddng d\u1eabn c\u1ee7a font. Tr\u00ecnh duy\u1ec7t y\u00eau c\u1ea7u font t\u1eeb m\u00e1y ch\u1ee7 web. M\u00e1y ch\u1ee7 web ph\u00e2n ph\u1ed1i file font.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"cach-tri\u1ec3n-khai-thong-th\u01b0\u1eddng\">C\u00e1ch tri\u1ec3n khai th\u00f4ng th\u01b0\u1eddng<\/h3>\n\n\n<pre class=\"wp-block-code\"><code>@font-face { font-family: 'MyWebFont';\nsrc: url('webfont.eot'); \/* IE9 Compat Modes *\/\nsrc: url('webfont.eot?#iefix') format('embedded-opentype'), \/* IE6-IE8 *\/\nurl('webfont.woff') format('woff'), \/* Modern Browsers *\/\nurl('webfont.ttf') format('truetype'), \/* Safari, Android, iOS *\/\nurl('webfont.svg#svgFontName') format('svg'); \/* Legacy iOS *\/ }<\/code><\/pre>\n\n\n<p>H\u01b0\u1edbng d\u1eabn CSS cung c\u1ea5p \u0111\u01b0\u1eddng d\u1eabn t\u1edbi file font kh\u00e1c. Tr\u00ecnh duy\u1ec7t s\u1eed d\u1ee5ng th\u00f4ng tin n\u00e0y \u0111\u1ec3 l\u1ef1a ch\u1ecdn font n\u00e0o c\u1ea7n t\u1ea3i v\u00e0 s\u1eed d\u1ee5ng sau \u0111\u00f3.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"vi-d\u1ee5-v\u1ec1-trang-s\u1eed-d\u1ee5ng-ph\u01b0\u01a1ng-th\u1ee9c-nay\">V\u00ed d\u1ee5 v\u1ec1 trang s\u1eed d\u1ee5ng ph\u01b0\u01a1ng th\u1ee9c n\u00e0y<\/h3>\n\n\n<p>Phi\u00ean b\u1ea3n c\u1ee7a trang n\u00e0y (b\u1ea3n g\u1ed1c ti\u1ebfng Anh) s\u1eed d\u1ee5ng ph\u01b0\u01a1ng ph\u00e1p t\u1ef1 host font b\u00ean ngo\u00e0i \u0111\u1ec3 b\u1ea1n ki\u1ec3m tra v\u00e0 xem c\u00e1ch n\u00f3 \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng: <a href=\"https:\/\/varvy.com\/pagespeed\/webfonts\/selfhostfont.html\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/varvy.com\/pagespeed\/webfonts\/selfhostfont.html<\/a><\/p>\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n<h2 class=\"wp-block-heading\" id=\"s\u1eed-d\u1ee5ng-font-c\u1ee7a-ben-th\u1ee9-ba\"><span class=\"ez-toc-section\" id=\"Su_dung_font_cua_ben_thu_ba\"><\/span>S\u1eed d\u1ee5ng font c\u1ee7a b\u00ean th\u1ee9 ba<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n<p>Gi\u1ea3i ph\u00e1p s\u1eed d\u1ee5ng font c\u1ee7a b\u00ean th\u1ee9 ba ph\u1ed5 bi\u1ebfn l\u00e0 <a href=\"https:\/\/fonts.google.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Google fonts<\/a> v\u00e0 <a href=\"https:\/\/www.typepad.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Typepad<\/a>.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"di\u1ec3m-l\u1ee3i\">\u0110i\u1ec3m l\u1ee3i:<\/h3>\n\n\n<ul><li>Tri\u1ec3n khai \u0111\u01a1n gi\u1ea3n;<\/li><li>Mi\u1ec5n ph\u00ed c\u00e1c l\u1ef1a ch\u1ecdn;<\/li><li>C\u00f3 nhi\u1ec1u font v\u00e0 \u0111\u1ecbnh d\u1ea1ng cho b\u1ea1n ch\u1ecdn l\u1ef1a.<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"di\u1ec3m-h\u1ea1i\">\u0110i\u1ec3m h\u1ea1i:<\/h3>\n\n\n<ul><li>Th\u01b0\u1eddng l\u00e0 l\u1ef1a ch\u1ecdn ch\u1eadm nh\u1ea5t;<\/li><li>C\u00f3 th\u1ec3 g\u00e2y \u1ea3nh h\u01b0\u1edfng l\u1edbn \u0111\u1ebfn t\u1ed1c \u0111\u1ed9 trang;<\/li><li>V\u1eabn c\u00f3 hi\u1ec7n t\u01b0\u1ee3ng Flash c\u1ee7a v\u0103n b\u1ea3n ch\u01b0a \u0111\u01b0\u1ee3c \u0111\u1ecbnh d\u1ea1ng (FOUT);<\/li><li>L\u00e0 nguy\u00ean nh\u00e2n l\u00e0m b\u1ed5 sung c\u00e1c y\u00eau c\u1ea7u \u0111\u1ec3 t\u1ea3i trang;<\/li><li>L\u00e0m cho trang c\u1ee7a b\u1ea1n g\u1eb7p v\u1ea5n \u0111\u1ec1 n\u1ebfu b\u00ean th\u1ee9 ba c\u00f3 v\u1ea5n \u0111\u1ec1 (\u0111i\u1ec3m th\u1ea5t b\u1ea1i duy nh\u1ea5t\/single point of failure).<\/li><\/ul>\n\n\n<p>Font c\u1ee7a b\u00ean th\u1ee9 ba th\u01b0\u1eddng l\u00e0 l\u1ef1a ch\u1ecdn ch\u1eadm nh\u1ea5t \u0111\u1ec3 hi\u1ec3n th\u1ecb font cho web. \u0110i\u1ec1u n\u00e0y \u0111\u1eb7c bi\u1ec7t ch\u00ednh x\u00e1c v\u1edbi \u0111i\u1ec7n tho\u1ea1i di \u0111\u1ed9ng.<\/p>\n\n\n<p>Font c\u1ee7a b\u00ean th\u1ee9 ba y\u00eau c\u1ea7u trang c\u1ee7a b\u1ea1n t\u1ea3i font t\u1eeb m\u00e1y ch\u1ee7 kh\u00e1c v\u1edbi m\u00e1y ch\u1ee7 c\u1ee7a b\u1ea1n. \u0110i\u1ec1u n\u00e0y c\u00f3 th\u1ec3 l\u00e0 nguy\u00ean nh\u00e2n r\u1eafc r\u1ed1i n\u1ebfu m\u00e1y ch\u1ee7 kh\u00e1c \u0111\u00f3 g\u1eb7p v\u1ea5n \u0111\u1ec1, v\u00e0 th\u1eadm ch\u00ed c\u00f3 th\u1ec3 ng\u0103n kh\u00f4ng cho trang web c\u1ee7a b\u1ea1n hi\u1ec3n th\u1ecb m\u1ed9t ch\u00fat n\u00e0o.<\/p>\n\n\n<p>Font c\u1ee7a b\u00ean th\u1ee9 ba r\u1ea5t d\u1ec5 s\u1eed d\u1ee5ng, th\u01b0\u1eddng \u0111\u01a1n gi\u1ea3n l\u00e0 ch\u1ec9 c\u1ea7n copy v\u00e0 paste v\u1edbi m\u1ed9t d\u00f2ng code l\u00e0 xong. \u0110\u00e2y l\u00e0 l\u00fd do ch\u00ednh n\u00f3 \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng r\u1ea5t ph\u1ed5 bi\u1ebfn.<\/p>\n\n\n<p>Khi s\u1eed d\u1ee5ng font c\u1ee7a b\u00ean th\u1ee9 ba, l\u1eddi khuy\u00ean tr\u1ecdng t\u00e2m c\u1ee7a t\u00f4i l\u00e0 n\u00ean s\u1eed d\u1ee5ng \u00edt font nh\u1ea5t c\u00f3 th\u1ec3, l\u00fd t\u01b0\u1edfng nh\u1ea5t l\u00e0 ch\u1ec9 m\u1ed9t font v\u1edbi m\u1ed9t m\u1ee9c \u0111\u1ed9 \u0111\u1eadm nh\u1ea1t.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"no-ho\u1ea1t-d\u1ed9ng-th\u1ebf-nao\">N\u00f3 ho\u1ea1t \u0111\u1ed9ng th\u1ebf n\u00e0o<\/h3>\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2019\/02\/webfont-ben-thu-ba.png\" alt=\"webfont c\u1ee7a b\u00ean th\u1ee9 ba\" class=\"wp-image-11881\"\/><\/figure><\/div>\n\n\n<p>Tr\u00ecnh duy\u1ec7t nh\u1eadn trang t\u1eeb m\u00e1y ch\u1ee7 c\u1ee7a b\u1ea1n. Trang th\u1ef1c hi\u1ec7n y\u00eau c\u1ea7u \u0111\u1ebfn m\u00e1y ch\u1ee7 c\u1ee7a b\u00ean th\u1ee9 ba. B\u00ean th\u1ee9 ba ph\u00e2n ph\u1ed1i file CSS cho tr\u00ecnh duy\u1ec7t. Trang t\u1ea1o y\u00eau c\u1ea7u m\u1edbi cho m\u00e1y ch\u1ee7 b\u00ean th\u1ee9 ba. M\u00e1y ch\u1ee7 b\u00ean th\u1ee9 ba ph\u00e2n ph\u1ed1i font ch\u1eef ph\u00f9 h\u1ee3p.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"tri\u1ec3n-khai-thong-th\u01b0\u1eddng\">Tri\u1ec3n khai th\u00f4ng th\u01b0\u1eddng<\/h3>\n\n\n<pre class=\"wp-block-code\"><code>&lt;link href=\"http:\/\/fonts.googleapis.com\/css?family=Abel\" rel=\"stylesheet\" type=\"text\/css\" \/&gt;<\/code><\/pre>\n\n\n<p>B\u00ean th\u1ee9 ba cung c\u1ea5p m\u1ed9t \u0111o\u1ea1n code nh\u1ecf gi\u1ed1ng nh\u01b0 b\u00ean tr\u00ean. N\u00f3 \u0111\u01b0\u1ee3c \u0111\u1eb7t v\u00e0o ph\u1ea7n \u0111\u1ea7u c\u1ee7a file html.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"vi-d\u1ee5-v\u1ec1-trang-s\u1eed-d\u1ee5ng-ph\u01b0\u01a1ng-th\u1ee9c-nay\">V\u00ed d\u1ee5 v\u1ec1 trang s\u1eed d\u1ee5ng ph\u01b0\u01a1ng th\u1ee9c n\u00e0y<\/h3>\n\n\n<p>Phi\u00ean b\u1ea3n c\u1ee7a trang s\u1eed d\u1ee5ng ph\u01b0\u01a1ng th\u1ee9c font c\u1ee7a b\u00ean th\u1ee9 ba \u0111\u1ec3 b\u1ea1n ki\u1ec3m tra v\u00e0 xem xem n\u00f3 \u0111\u01b0\u1ee3c d\u00f9ng nh\u01b0 th\u1ebf n\u00e0o:&nbsp;<a href=\"https:\/\/varvy.com\/pagespeed\/webfonts\/third-party.html\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/varvy.com\/pagespeed\/webfonts\/third-party.html<\/a><\/p>\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n<h2 class=\"wp-block-heading\" id=\"ch\u1ecdn-m\u1ed9t-ph\u01b0\u01a1ng-phap-s\u1eed-d\u1ee5ng-font-web\"><span class=\"ez-toc-section\" id=\"Chon_mot_phuong_phap_su_dung_font_web\"><\/span>Ch\u1ecdn m\u1ed9t ph\u01b0\u01a1ng ph\u00e1p s\u1eed d\u1ee5ng font web<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n<p>M\u1ed7i ph\u01b0\u01a1ng ph\u00e1p font cho web \u0111\u1ec1u c\u00f3 \u0111i\u1ec3m l\u1ee3i v\u00e0 \u0111i\u1ec3m h\u1ea1i ri\u00eang. \u0110\u00e1nh gi\u00e1 c\u1ee7a t\u00f4i v\u1ec1 t\u1eebng ph\u01b0\u01a1ng ph\u00e1p theo ti\u00eau ch\u00ed kh\u00e1c nhau s\u1ebd l\u00e0&#8230;<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"an-toan-nh\u1ea5t\">An to\u00e0n nh\u1ea5t:<\/h3>\n\n\n<ul><li>Kh\u00f4ng s\u1eed d\u1ee5ng web font<\/li><li>T\u1ef1 host l\u1ea5y font<\/li><li>S\u1eed d\u1ee5ng font c\u1ee7a b\u00ean th\u1ee9 ba<\/li><li>N\u1ed9i tuy\u1ebfn font v\u00e0o CSS<\/li><li>N\u1ed9i tuy\u1ebfn font v\u00e0o HTML<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"d\u01a1n-gi\u1ea3n-nh\u1ea5t\">\u0110\u01a1n gi\u1ea3n nh\u1ea5t:<\/h3>\n\n\n<ul><li>Kh\u00f4ng s\u1eed d\u1ee5ng web font<\/li><li>S\u1eed d\u1ee5ng font c\u1ee7a b\u00ean th\u1ee9 ba<\/li><li>T\u1ef1 host l\u1ea5y font<\/li><li>N\u1ed9i tuy\u1ebfn font v\u00e0o CSS<\/li><li>N\u1ed9i tuy\u1ebfn font v\u00e0o HTML<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"h\u1ed7-tr\u1ee3-r\u1ed9ng-nh\u1ea5t\">H\u1ed7 tr\u1ee3 r\u1ed9ng nh\u1ea5t:<\/h3>\n\n\n<ul><li>Kh\u00f4ng s\u1eed d\u1ee5ng web font<\/li><li>T\u1ef1 host l\u1ea5y font<\/li><li>S\u1eed d\u1ee5ng font c\u1ee7a b\u00ean th\u1ee9 ba<\/li><li>N\u1ed9i tuy\u1ebfn font v\u00e0o CSS<\/li><li>N\u1ed9i tuy\u1ebfn font v\u00e0o HTML<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"t\u1ed1c-d\u1ed9\">T\u1ed1c \u0111\u1ed9:<\/h3>\n\n\n<ul><li>Kh\u00f4ng s\u1eed d\u1ee5ng web font<\/li><li>N\u1ed9i tuy\u1ebfn font v\u00e0o HTML<\/li><li>N\u1ed9i tuy\u1ebfn font v\u00e0o CSS<\/li><li>T\u1ef1 host l\u1ea5y font<\/li><li>S\u1eed d\u1ee5ng font c\u1ee7a b\u00ean th\u1ee9 ba<\/li><\/ul>\n\n\n<p><em>(D\u1ecbch t\u1eeb b\u00e0i vi\u1ebft: Webfont options and speed \u2013 T\u00e1c gi\u1ea3: Patrick Sexton \u2013 Website: Varvy)<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>V\u00ec sao c\u00e1c l\u1ef1a ch\u1ecdn font cho web (kh\u00e1c nhau) l\u1ea1i \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn t\u1ed1c \u0111\u1ed9 t\u1ea3i trang? B\u00e0i vi\u1ebft n\u00e0y m\u00f4 t\u1ea3 m\u1ed9t s\u1ed1 ph\u01b0\u01a1ng ph\u00e1p s\u1eed d\u1ee5ng font cho web v\u00e0 c\u00e1ch ch\u00fang \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn t\u1ed1c \u0111\u1ed9 trang. N\u00f3i chung danh s\u00e1ch \u0111\u01b0\u1ee3c li\u1ec7t k\u00ea t\u1eeb nhanh nh\u1ea5t \u0111\u1ebfn ch\u1eadm nh\u1ea5t v\u1ec1 &hellip;<\/p>\n","protected":false},"author":1,"featured_media":13046,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[268],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Font cho web v\u00e0 v\u1ea5n \u0111\u1ec1 t\u1ed1c \u0111\u1ed9 t\u1ea3i trang &#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\/font-cho-web-va-toc-do-tai-trang\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Font cho web v\u00e0 v\u1ea5n \u0111\u1ec1 t\u1ed1c \u0111\u1ed9 t\u1ea3i trang &#8226; Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"og:description\" content=\"V\u00ec sao c\u00e1c l\u1ef1a ch\u1ecdn font cho web (kh\u00e1c nhau) l\u1ea1i \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn t\u1ed1c \u0111\u1ed9 t\u1ea3i trang? B\u00e0i vi\u1ebft n\u00e0y m\u00f4 t\u1ea3 m\u1ed9t s\u1ed1 ph\u01b0\u01a1ng ph\u00e1p s\u1eed d\u1ee5ng font cho web v\u00e0 c\u00e1ch ch\u00fang \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn t\u1ed1c \u0111\u1ed9 trang. N\u00f3i chung danh s\u00e1ch \u0111\u01b0\u1ee3c li\u1ec7t k\u00ea t\u1eeb nhanh nh\u1ea5t \u0111\u1ebfn ch\u1eadm nh\u1ea5t v\u1ec1 &hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kiencang.net\/font-cho-web-va-toc-do-tai-trang\/\" \/>\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-02-20T23:50:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kiencang.net\/wp-content\/uploads\/2019\/02\/font-cho-web.png\" \/>\n\t<meta property=\"og:image:width\" content=\"885\" \/>\n\t<meta property=\"og:image:height\" content=\"465\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/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=\"11 ph\u00fat\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Font cho web v\u00e0 v\u1ea5n \u0111\u1ec1 t\u1ed1c \u0111\u1ed9 t\u1ea3i trang &#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\/font-cho-web-va-toc-do-tai-trang\/","og_locale":"vi_VN","og_type":"article","og_title":"Font cho web v\u00e0 v\u1ea5n \u0111\u1ec1 t\u1ed1c \u0111\u1ed9 t\u1ea3i trang &#8226; Ki\u1ebfn c\u00e0ng","og_description":"V\u00ec sao c\u00e1c l\u1ef1a ch\u1ecdn font cho web (kh\u00e1c nhau) l\u1ea1i \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn t\u1ed1c \u0111\u1ed9 t\u1ea3i trang? B\u00e0i vi\u1ebft n\u00e0y m\u00f4 t\u1ea3 m\u1ed9t s\u1ed1 ph\u01b0\u01a1ng ph\u00e1p s\u1eed d\u1ee5ng font cho web v\u00e0 c\u00e1ch ch\u00fang \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn t\u1ed1c \u0111\u1ed9 trang. N\u00f3i chung danh s\u00e1ch \u0111\u01b0\u1ee3c li\u1ec7t k\u00ea t\u1eeb nhanh nh\u1ea5t \u0111\u1ebfn ch\u1eadm nh\u1ea5t v\u1ec1 &hellip;","og_url":"https:\/\/kiencang.net\/font-cho-web-va-toc-do-tai-trang\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2019-02-20T23:50:00+00:00","og_image":[{"width":885,"height":465,"url":"https:\/\/kiencang.net\/wp-content\/uploads\/2019\/02\/font-cho-web.png","type":"image\/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":"11 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/font-cho-web-va-toc-do-tai-trang\/","url":"https:\/\/kiencang.net\/font-cho-web-va-toc-do-tai-trang\/","name":"Font cho web v\u00e0 v\u1ea5n \u0111\u1ec1 t\u1ed1c \u0111\u1ed9 t\u1ea3i trang &#8226; Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2019-02-20T23:50:00+00:00","dateModified":"2019-02-20T23:50:00+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/font-cho-web-va-toc-do-tai-trang\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/font-cho-web-va-toc-do-tai-trang\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/font-cho-web-va-toc-do-tai-trang\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"Font cho web v\u00e0 v\u1ea5n \u0111\u1ec1 t\u1ed1c \u0111\u1ed9 t\u1ea3i trang"}]},{"@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\/11875"}],"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=11875"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/11875\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media\/13046"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=11875"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=11875"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=11875"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}