{"id":20245,"date":"2021-09-04T07:21:35","date_gmt":"2021-09-04T07:21:35","guid":{"rendered":"https:\/\/freehost.page\/?p=14501"},"modified":"2021-09-04T07:21:35","modified_gmt":"2021-09-04T07:21:35","slug":"tim-hieu-font-web","status":"publish","type":"post","link":"https:\/\/kiencang.net\/tim-hieu-font-web\/","title":{"rendered":"T\u00ecm hi\u1ec3u v\u1ec1 font cho web (h\u01b0\u1edbng d\u1eabn t\u1eeb Mozilla)"},"content":{"rendered":"\n<p>Trong ph\u1ea7n \u0111\u1ea7u c\u1ee7a b\u00e0i, ch\u00fang ta s\u1ebd kh\u00e1m ph\u00e1 c\u00e1c t\u00ednh n\u0103ng c\u01a1 b\u1ea3n d\u00e0nh cho vi\u1ec7c \u0111\u1ecbnh ki\u1ec3u font v\u00e0 v\u0103n b\u1ea3n. C\u00e0ng v\u1ec1 sau, b\u00e0i vi\u1ebft s\u1ebd \u0111i v\u00e0o chi ti\u1ebft v\u00e0 n\u00e2ng cao h\u01a1n. Ch\u00fang ta s\u1ebd h\u1ecdc c\u00e1ch s\u1eed d\u1ee5ng font t\u00f9y ch\u1ec9nh (custom fonts) \u0111\u1ec3 cho ph\u00e9p b\u1ea1n kh\u1ea3 n\u0103ng c\u00f3 \u0111\u01b0\u1ee3c s\u1ef1 \u0111a d\u1ea1ng v\u1ec1 ki\u1ec3u d\u00e1ng c\u1ee7a v\u0103n b\u1ea3n.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\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-6577d6ef44e18\" ><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-6577d6ef44e18\"  type=\"checkbox\" id=\"item-6577d6ef44e18\"><\/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\/tim-hieu-font-web\/#Tom_tat_ve_font-family\" title=\"T\u00f3m t\u1eaft v\u1ec1 font-family\">T\u00f3m t\u1eaft v\u1ec1 font-family<\/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\/tim-hieu-font-web\/#Web_font\" title=\"Web font\">Web font<\/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\/tim-hieu-font-web\/#Thuc_hanh_vi_du_ve_web_font\" title=\"Th\u1ef1c h\u00e0nh: v\u00ed d\u1ee5 v\u1ec1 web font\">Th\u1ef1c h\u00e0nh: v\u00ed d\u1ee5 v\u1ec1 web font<\/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\/tim-hieu-font-web\/#Tim_vai_font\" title=\"T\u00ecm v\u00e0i font\">T\u00ecm v\u00e0i font<\/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\/tim-hieu-font-web\/#Tao_ra_cac_doan_ma_can_thiet\" title=\"T\u1ea1o ra c\u00e1c \u0111o\u1ea1n m\u00e3 c\u1ea7n thi\u1ebft\">T\u1ea1o ra c\u00e1c \u0111o\u1ea1n m\u00e3 c\u1ea7n thi\u1ebft<\/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\/tim-hieu-font-web\/#Trien_khai_ma_trong_demo\" title=\"Tri\u1ec3n khai m\u00e3 trong demo\">Tri\u1ec3n khai m\u00e3 trong demo<\/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\/tim-hieu-font-web\/#Su_dung_dich_vu_font_truc_tuyen\" title=\"S\u1eed d\u1ee5ng d\u1ecbch v\u1ee5 font tr\u1ef1c tuy\u1ebfn\">S\u1eed d\u1ee5ng d\u1ecbch v\u1ee5 font tr\u1ef1c tuy\u1ebfn<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/kiencang.net\/tim-hieu-font-web\/#Chi_tiet_hon_ve_font-face\" title=\"Chi ti\u1ebft h\u01a1n v\u1ec1 @font-face\">Chi ti\u1ebft h\u01a1n v\u1ec1 @font-face<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/kiencang.net\/tim-hieu-font-web\/#Fonts_bien_doi_variable\" title=\"Fonts bi\u1ebfn \u0111\u1ed5i (variable)\">Fonts bi\u1ebfn \u0111\u1ed5i (variable)<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Tom_tat_ve_font-family\"><\/span>T\u00f3m t\u1eaft v\u1ec1 font-family<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Thu\u1ed9c t\u00ednh <code>font-family<\/code> \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 \u0111i\u1ec1u ch\u1ec9nh v\u0103n b\u1ea3n trong HTML. N\u00f3 c\u00f3 th\u1ec3 l\u1ea5y m\u1ed9t ho\u1eb7c nhi\u1ec1u t\u00ean <code>font-family<\/code>. Khi hi\u1ec3n th\u1ecb m\u1ed9t trang web, tr\u00ecnh duy\u1ec7t s\u1ebd \u0111i t\u1eeb \u0111\u1ea7u danh s\u00e1ch cho \u0111\u1ebfn cu\u1ed1i, b\u1ea5t c\u1ee9 khi n\u00e0o n\u00f3 t\u00ecm \u0111\u01b0\u1ee3c <code>font-family<\/code> m\u00e0 n\u00f3 c\u00f3 trong h\u1ec7 th\u1ed1ng, n\u00f3 s\u1ebd d\u1eebng l\u1ea1i v\u00e0 s\u1eed d\u1ee5ng font \u0111\u00f3 \u0111\u1ec3 l\u00e0m style cho v\u0103n b\u1ea3n, v\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>p {\n  font-family: Helvetica, \"Trebuchet MS\", Verdana, sans-serif;\n}<\/code><\/pre>\n\n\n\n<p>Ph\u01b0\u01a1ng ph\u00e1p n\u00e0y ho\u1ea1t \u0111\u1ed9ng t\u1ed1t, nh\u01b0ng c\u00e1ch s\u1eed d\u1ee5ng font truy\u1ec1n th\u1ed1ng nh\u01b0 th\u1ebf l\u00e0m l\u1eadp tr\u00ecnh vi\u00ean b\u1ecb h\u1ea1n ch\u1ebf c\u00e1c l\u1ef1a ch\u1ecdn. Ch\u1ec9 c\u00f3 m\u1ed9t v\u00e0i font ch\u1eef b\u1ea1n ch\u1eafc ch\u1eafn \u0111\u01b0\u1ee3c r\u1eb1ng n\u00f3 c\u00f3 m\u1eb7t tr\u00ean t\u1ea5t c\u1ea3 c\u00e1c h\u1ec7 th\u1ed1ng ph\u1ed1 bi\u1ebfn (<em>MAC, Windows, Android, iOS<\/em>,&#8230;) &#8211; ch\u00fang \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 font web an to\u00e0n (web safe fonts). B\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng font stack \u0111\u1ec3 ch\u1ec9 \u0111\u1ecbnh c\u00e1c font \u01b0a th\u00edch, ti\u1ebfp theo \u0111\u00f3 l\u00e0 c\u00e1c font web an to\u00e0n \u0111\u1ec3 thay th\u1ebf, d\u1ef1 ph\u00f2ng b\u1eb1ng nh\u1eefng font m\u1eb7c \u0111\u1ecbnh c\u00f3 m\u1eb7t trong h\u1ea7u h\u1ebft n\u1ec1n t\u1ea3ng. Tuy nhi\u00ean, \u0111i\u1ec1u n\u00e0y l\u00e0m gia t\u0103ng l\u01b0\u1ee3ng c\u00f4ng vi\u1ec7c ph\u1ea3i l\u00e0m, v\u00ec c\u1ea7n ph\u1ea3i ki\u1ec3m tra c\u1ea9n th\u1eadn \u0111\u1ec3 \u0111\u1ea3m b\u1ea3o r\u1eb1ng thi\u1ebft k\u1ebf c\u1ee7a b\u1ea1n ho\u1ea1t \u0111\u1ed9ng v\u1edbi t\u1eebng font.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Web_font\"><\/span>Web font<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Nh\u01b0ng c\u00f3 m\u1ed9t gi\u1ea3i ph\u00e1p kh\u00e1c ho\u1ea1t \u0111\u1ed9ng r\u1ea5t hi\u1ec7u qu\u1ea3 (n\u00f3 th\u1eadm ch\u00ed \u0111\u01b0\u1ee3c h\u1ed7 tr\u1ee3 tr\u00ean c\u00e1c tr\u00ecnh duy\u1ec7t c\u0169 nh\u01b0 IE 6). CSS cho ph\u00e9p b\u1ea1n ch\u1ec9 \u0111\u1ecbnh c\u00e1c file font c\u1ee5 th\u1ec3, c\u00f3 s\u1eb5n tr\u00ean web \u0111\u1ec3 t\u1ea3i xu\u1ed1ng c\u00f9ng v\u1edbi website c\u1ee7a b\u1ea1n khi n\u00f3 \u0111\u01b0\u1ee3c truy c\u1eadp. \u0110i\u1ec1u n\u00e0y c\u00f3 ngh\u0129a l\u00e0 b\u1ea5t c\u1ee9 tr\u00ecnh duy\u1ec7t n\u00e0o h\u1ed7 tr\u1ee3 t\u00ednh n\u0103ng CSS n\u00e0y \u0111\u1ec1u c\u00f3 th\u1ec3 hi\u1ec3n th\u1ecb c\u00e1c font m\u00e0 b\u1ea1n ch\u1ec9 \u0111\u1ecbnh c\u1ee5 th\u1ec3. Th\u1eadt tuy\u1ec7t ph\u1ea3i kh\u00f4ng n\u00e0o! C\u00fa ph\u00e1p y\u00eau c\u1ea7u s\u1ebd tr\u00f4ng gi\u1ed1ng nh\u01b0 b\u00ean d\u01b0\u1edbi:<\/p>\n\n\n\n<p>\u0110i\u1ec1u \u0111\u1ea7u ti\u00ean, b\u1ea1n c\u1ea7n c\u00f3 b\u1ed9 quy t\u1eafc <code>@font-face<\/code> l\u00fac b\u1eaft \u0111\u1ea7u vi\u1ebft CSS- c\u00e1i ch\u1ec9 \u0111\u1ecbnh (c\u00e1c) file font c\u1ee5 th\u1ec3 \u0111\u1ec3 t\u1ea3i xu\u1ed1ng:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@font-face {\n  font-family: \"myFont\";\n  src: url(\"myFont.woff2\");\n}<\/code><\/pre>\n\n\n\n<p>B\u00ean d\u01b0\u1edbi b\u1ea1n s\u1eed d\u1ee5ng t\u00ean font family m\u00e0 b\u1ea1n \u0111\u00e3 ch\u1ec9 \u0111\u1ecbnh b\u00ean trong <code>@font-face<\/code> \u0111\u1ec3 \u00e1p d\u1ee5ng font t\u00f9y ch\u1ec9nh c\u1ee7a b\u1ea1n l\u00ean b\u1ea5t c\u1ee9 khu v\u1ef1c ch\u1ee9a v\u0103n b\u1ea3n n\u00e0o m\u00e0 b\u1ea1n mu\u1ed1n, nh\u01b0 c\u00e1ch th\u00f4ng th\u01b0\u1eddng v\u1eabn l\u00e0m:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>html {\n  font-family: \"myFont\", \"Bitstream Vera Serif\", serif;\n}<\/code><\/pre>\n\n\n\n<p>\u0110i s\u00e2u v\u00e0o c\u00fa ph\u00e1p c\u1ee7a n\u00f3 s\u1ebd ph\u1ee9c t\u1ea1p h\u01a1n m\u1ed9t ch\u00fat. Ch\u00fang ta s\u1ebd t\u00ecm hi\u1ec3u ngay b\u00ean d\u01b0\u1edbi.<\/p>\n\n\n\n<p>C\u00f3 m\u1ed9t s\u1ed1 th\u1ee9 quan tr\u1ecdng b\u1ea1n c\u1ea7n ghi nh\u1edb trong \u0111\u1ea7u (bear in mind):<\/p>\n\n\n\n<ol><li>C\u00e1c font t\u00f9y ch\u1ec9nh th\u01b0\u1eddng kh\u00f4ng ph\u1ea3i l\u00e0 d\u1ea1ng mi\u1ec5n ph\u00ed. B\u1ea1n s\u1ebd ph\u1ea3i tr\u1ea3 ti\u1ec1n v\u00e0\/ho\u1eb7c tu\u00e2n th\u1ee7 c\u00e1c \u0111i\u1ec1u ki\u1ec7n v\u1ec1 gi\u1ea5y ph\u00e9p s\u1eed d\u1ee5ng, ch\u1eb3ng h\u1ea1n nh\u01b0 \u0111\u1ec3 l\u1ea1i link ghi c\u00f4ng (credit) cho ng\u01b0\u1eddi s\u00e1ng t\u1ea1o trong m\u00e3 c\u1ee7a b\u1ea1n (ho\u1eb7c hi\u1ec3n th\u1ecb tr\u00ean website c\u1ee7a b\u1ea1n). B\u1ea1n kh\u00f4ng \u0111\u01b0\u1ee3c ph\u00e9p l\u1ea5y font v\u00e0 s\u1eed d\u1ee5ng n\u00f3 m\u00e0 kh\u00f4ng \u0111\u01b0\u1ee3c c\u1ea5p ph\u00e9p h\u1ee3p ph\u00e1p.<\/li><li>T\u1ea5t c\u1ea3 c\u00e1c tr\u00ecnh duy\u1ec7t l\u1edbn \u0111\u1ec1u h\u1ed7 tr\u1ee3 \u0111\u1ecbnh d\u1ea1ng <code>WOFF\/WOFF2<\/code> (Web Open Font Format phi\u00ean b\u1ea3n 1 v\u00e0 2). Th\u1eadm ch\u00ed c\u00e1c tr\u00ecnh duy\u1ec7t c\u0169 h\u01a1n nh\u01b0 IE9 (ph\u00e1t h\u00e0nh v\u00e0o n\u0103m 2011) c\u0169ng \u0111\u00e3 h\u1ed7 tr\u1ee3 WOFF r\u1ed3i.<\/li><li>WOFF2 h\u1ed7 tr\u1ee3 \u0111\u1ea7y \u0111\u1ee7 c\u00e1c th\u00f4ng s\u1ed1 k\u1ef9 thu\u1eadt c\u1ee7a TrueType v\u00e0 OpenType, bao g\u1ed3m c\u00e1c font ch\u1eef bi\u1ebfn \u0111\u1ed5i, font ch\u1eef m\u00e0u v\u00e0 b\u1ed9 s\u01b0u t\u1eadp font ch\u1eef.<\/li><li>Th\u1ee9 t\u1ef1 m\u00e0 b\u1ea1n li\u1ec7t k\u00ea font ch\u1eef r\u1ea5t quan tr\u1ecdng. N\u1ebfu b\u1ea1n cung c\u1ea5p cho tr\u00ecnh duy\u1ec7t m\u1ed9t danh s\u00e1ch nhi\u1ec1u file font \u0111\u1ec3 t\u1ea3i v\u1ec1, tr\u00ecnh duy\u1ec7t s\u1ebd ch\u1ecdn file font \u0111\u1ea7u ti\u00ean n\u00f3 c\u00f3 kh\u1ea3 n\u0103ng s\u1eed d\u1ee5ng \u0111\u01b0\u1ee3c. \u0110\u00f3 l\u00e0 l\u00fd do v\u00ec sao \u0111\u1ecbnh d\u1ea1ng b\u1ea1n li\u1ec7t k\u00ea \u0111\u1ea7u ti\u00ean ph\u1ea3i l\u00e0 \u0111\u1ecbnh d\u1ea1ng \u01b0u ti\u00ean, \u1edf th\u1eddi \u0111i\u1ec3m hi\u1ec7n t\u1ea1i \u0111\u00f3 l\u00e0 <code>WOFF2<\/code> &#8211; c\u00e1c \u0111\u1ecbnh d\u1ea1ng c\u0169 h\u01a1n s\u1ebd \u0111\u1ec3 \u1edf \u0111\u1eb1ng sau. Tr\u00ecnh duy\u1ec7t khi kh\u00f4ng x\u1eed l\u00fd \u0111\u01b0\u1ee3c m\u1ed9t \u0111\u1ecbnh d\u1ea1ng n\u00e0o \u0111\u00f3 n\u00f3 s\u1ebd t\u1ea3i \u0111\u1ecbnh d\u1ea1ng d\u1ef1 ph\u00f2ng m\u00e0 n\u00f3 bi\u1ebft trong danh s\u00e1ch b\u1ea1n li\u1ec7t k\u00ea.<\/li><li>N\u1ebfu b\u1ea1n c\u1ea7n website hi\u1ec3n th\u1ecb font t\u00f9y ch\u1ec9nh ngay c\u1ea3 v\u1edbi c\u00e1c tr\u00ecnh duy\u1ec7t c\u0169, b\u1ea1n ph\u1ea3i cung c\u1ea5p th\u00eam \u0111\u1ecbnh d\u1ea1ng <code>EOT<\/code> (Embedded Open Type), <code>TTF<\/code> (TrueType Font) v\u00e0 <code>SVG<\/code>. B\u00e0i vi\u1ebft n\u00e0y s\u1ebd h\u01b0\u1edbng d\u1eabn b\u1ea1n c\u00e1ch s\u1eed d\u1ee5ng Fontsquirrel Webfont Generator \u0111\u1ec3 t\u1ea1o ra \u0111\u01b0\u1ee3c c\u00e1c \u0111\u1ecbnh d\u1ea1ng theo y\u00eau c\u1ea7u.<\/li><\/ol>\n\n\n\n<p>PS: Font t\u00f9y ch\u1ec9nh tr\u00ean web l\u00e0 c\u00f4ng ngh\u1ec7 \u0111\u01b0\u1ee3c h\u1ed7 tr\u1ee3 k\u1ec3 t\u1eeb phi\u00ean b\u1ea3n Internet Explorer 4 r\u1ed3i c\u01a1 \u0111\u1ea5y c\u00e1c b\u1ea1n \u1ea1!<\/p>\n\n\n\n<p>B\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Tools\/Page_Inspector\/How_to\/Edit_fonts\" target=\"_blank\" rel=\"noreferrer noopener\">FireFox Font Editor<\/a> \u0111\u1ec3 t\u00ecm hi\u1ec3u v\u00e0 x\u1eed l\u00fd c\u00e1c font s\u1eed d\u1ee5ng tr\u00ean trang c\u1ee7a b\u1ea1n, b\u1ea5t k\u1ec3 l\u00e0 ch\u00fang c\u00f3 ph\u1ea3i l\u00e0 web font hay kh\u00f4ng.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Thuc_hanh_vi_du_ve_web_font\"><\/span>Th\u1ef1c h\u00e0nh: v\u00ed d\u1ee5 v\u1ec1 web font<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Ch\u00fang ta \u0111\u00e3 ghi nh\u1edb \u0111\u01b0\u1ee3c v\u00e0i th\u1ee9, gi\u1edd \u0111\u1ebfn l\u00fac x\u00e2y d\u1ef1ng m\u1ed9t v\u00ed d\u1ee5 c\u01a1 b\u1ea3n v\u1ec1 webfonts t\u1eeb c\u00e1c nguy\u00ean t\u1eafc \u0111\u1ea7u ti\u00ean. R\u1ea5t kh\u00f3 \u0111\u1ec3 minh h\u1ecda \u0111i\u1ec1u n\u00e0y b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng font \u0111\u01b0\u1ee3c nh\u00fang tr\u1ef1c ti\u1ebfp trong b\u00e0i vi\u1ebft b\u1ea1n \u0111ang \u0111\u1ecdc. Do v\u1eady ch\u00fang ta s\u1ebd theo c\u00e1c h\u01b0\u1edbng d\u1eabn chi ti\u1ebft b\u00ean d\u01b0\u1edbi \u0111\u1ec3 ho\u00e0n th\u00e0nh \u00fd t\u01b0\u1edfng.<\/p>\n\n\n\n<p>B\u1ea1n c\u1ea7n s\u1eed d\u1ee5ng trang m\u1eabu n\u00e0y ch\u00fang t\u00f4i (Mozilla) \u0111\u00e3 vi\u1ebft s\u1eb5n: <a href=\"https:\/\/github.com\/mdn\/learning-area\/blob\/master\/css\/styling-text\/web-fonts\/web-font-start.html\" target=\"_blank\" rel=\"noreferrer noopener\">web-font-start.html<\/a> v\u00e0 &nbsp;<a href=\"https:\/\/github.com\/mdn\/learning-area\/blob\/master\/css\/styling-text\/web-fonts\/web-font-start.css\" target=\"_blank\" rel=\"noreferrer noopener\">web-font-start.css<\/a> \u0111\u1ec3 th\u00eam code c\u1ee7a b\u1ea1n v\u00e0o (xem <a href=\"https:\/\/mdn.github.io\/learning-area\/css\/styling-text\/web-fonts\/web-font-start.html\" target=\"_blank\" rel=\"noreferrer noopener\">v\u00ed d\u1ee5<\/a>). H\u00e3y t\u1ea1o b\u1ea3n sao c\u1ee7a c\u00e1c file n\u00e0y trong th\u01b0 m\u1ee5c m\u00e1y t\u00ednh c\u00e1 nh\u00e2n c\u1ee7a b\u1ea1n lu\u00f4n b\u00e2y gi\u1edd. Trong file <code>web-font-start.css<\/code> b\u1ea1n s\u1ebd th\u1ea5y m\u1ed9t s\u1ed1 \u0111o\u1ea1n m\u00e3 CSS nh\u1ecf x\u1eed l\u00fd v\u1edbi layout c\u01a1 b\u1ea3n v\u00e0 c\u00e1c c\u00e0i \u0111\u1eb7t cho v\u00ed d\u1ee5 n\u00e0y.<\/p>\n\n\n\n<p>PS t\u1eeb ng\u01b0\u1eddi d\u1ecbch: n\u1ebfu th\u00edch th\u00ec b\u1ea1n t\u1ef1 t\u1ea1o trang html ri\u00eang c\u1ee7a b\u1ea3n th\u00e2n c\u0169ng \u0111\u01b0\u1ee3c, \u0111\u01a1n gi\u1ea3n ch\u1ec9 l\u00e0 th\u00eam v\u00e0o \u0111\u00f3 c\u00e1c th\u1ebb p r\u1ed3i cho v\u0103n b\u1ea3n v\u00e0o l\u00e0 xong. Mozilla th\u00ec c\u1ea9n th\u1eadn cho ch\u00fang ta &#8220;\u0103n s\u1eb5n&#8221; lu\u00f4n \u0111\u1ec3 \u0111\u1ee1 m\u1ea5t c\u00f4ng th\u00f4i.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Tim_vai_font\"><\/span>T\u00ecm v\u00e0i font<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Trong v\u00ed d\u1ee5 n\u00e0y, ch\u00fang ta s\u1ebd s\u1eed d\u1ee5ng hai web font: m\u1ed9t cho heading, v\u00e0 m\u1ed9t cho body. \u0110\u1ec3 b\u1eaft \u0111\u1ea7u, ch\u00fang ta c\u1ea7n t\u00ecm c\u00e1c file font. C\u00e1c x\u01b0\u1edfng font t\u1ea1o ra font v\u00e0 l\u01b0u tr\u1eef ch\u00fang \u1edf nhi\u1ec1u \u0111\u1ecbnh d\u1ea1ng kh\u00e1c nhau. Nh\u00ecn chung c\u00f3 3 lo\u1ea1i trang web m\u00e0 b\u1ea1n c\u00f3 th\u1ec3 t\u00ecm c\u00e1c font ch\u1eef:<\/p>\n\n\n\n<ul><li>C\u00e1c website ph\u00e2n ph\u1ed1i font ch\u1eef mi\u1ec5n ph\u00ed: \u0110\u00e2y l\u00e0 c\u00e1c trang t\u1ea1o ra font ch\u1eef mi\u1ec5n ph\u00ed m\u00e0 b\u1ea1n c\u00f3 th\u1ec3 t\u1ea3i v\u1ec1 (c\u00f3 th\u1ec3 v\u1eabn c\u00f3 nh\u1eefng \u0111i\u1ec1u ki\u1ec7n nh\u1ea5t \u0111\u1ecbnh v\u1ec1 gi\u1ea5y ph\u00e9p \/ license s\u1eed d\u1ee5ng, ch\u1eb3ng h\u1ea1n nh\u01b0 ghi c\u00f4ng ng\u01b0\u1eddi s\u00e1ng t\u1ea1o). V\u00ed d\u1ee5 v\u1ec1 c\u00e1c trang n\u00e0y bao g\u1ed3m <a href=\"https:\/\/www.fontsquirrel.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Font Squirrel<\/a>, <a href=\"https:\/\/www.dafont.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">dafont<\/a>, v\u00e0 <a href=\"https:\/\/everythingfonts.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Everything Fonts<\/a>.<\/li><li>C\u00e1c website ph\u00e2n ph\u1ed1i font tr\u1ea3 ph\u00ed. \u0110\u00e2y l\u00e0 c\u00e1c trang t\u1ea1o ra font v\u00e0 b\u00e1n n\u00f3, ch\u1eb3ng h\u1ea1n nh\u01b0 <a href=\"https:\/\/www.fonts.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">fonts.com<\/a>, ho\u1eb7c <a href=\"https:\/\/www.myfonts.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">myfonts.com<\/a>, ho\u1eb7c <a href=\"https:\/\/www.exljbris.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Exljbris<\/a>.<\/li><li>C\u00e1c d\u1ecbch v\u1ee5 font tr\u1ef1c tuy\u1ebfn. \u0110\u00e2y l\u00e0 c\u00e1c website l\u01b0u tr\u1eef v\u00e0 ph\u1ee5c v\u1ee5 font cho b\u1ea1n, l\u00e0m cho qu\u00e1 tr\u00ecnh x\u1eed l\u00fd \u0111\u01b0\u1ee3c d\u1ec5 d\u00e0ng. B\u1ea1n xem ph\u1ea7n s\u1eed d\u1ee5ng font ch\u1eef tr\u1ef1c tuy\u1ebfn \u1edf m\u1ee5c b\u00ean d\u01b0\u1edbi \u0111\u1ec3 bi\u1ebft chi ti\u1ebft.<\/li><\/ul>\n\n\n\n<p>N\u00e0o gi\u1edd ch\u00fang ta h\u00e3y ch\u1ecdn l\u1ea5y v\u00e0i font! B\u1ea1n v\u00e0o trang <a href=\"https:\/\/www.fontsquirrel.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Font Squrriel<\/a> v\u00e0 ch\u1ecdn l\u1ea5y hai font: m\u1ed9t font ch\u1eef \u0111\u1eb9p m\u1eaft cho ti\u00eau \u0111\u1ec1, v\u00e0 m\u1ed9t font ch\u1eef \u00edt h\u00e0o nho\u00e1ng h\u01a1n, d\u1ec5 \u0111\u1ecdc h\u01a1n cho v\u0103n b\u1ea3n d\u00e0i. <\/p>\n\n\n\n<p>Khi b\u1ea1n t\u00ecm ra \u0111\u01b0\u1ee3c font m\u00ecnh mu\u1ed1n, h\u00e3y nh\u1ea5n v\u00e0o n\u00fat download v\u00e0 l\u01b0u file v\u00e0o b\u00ean trong th\u01b0 m\u1ee5c HTML v\u00e0 CSS b\u1ea1n l\u01b0u tr\u01b0\u1edbc \u0111\u00f3. Kh\u00f4ng th\u00e0nh v\u1ea5n \u0111\u1ec1 li\u1ec7u r\u1eb1ng ch\u00fang l\u00e0 <code>TTF<\/code> (True Type Fonts) hay l\u00e0 <code>OTF<\/code> (Open Type Fonts).<\/p>\n\n\n\n<p>Gi\u1ea3i n\u00e9n hai g\u00f3i font n\u00e0y (Web font th\u01b0\u1eddng \u0111\u01b0\u1ee3c ph\u00e2n ph\u1ed1i d\u01b0\u1edbi d\u1ea1ng ZIP v\u00e0 bao g\u1ed3m c\u00e1c file font v\u00e0 th\u00f4ng tin gi\u1ea5y ph\u00e9p). B\u1ea1n c\u00f3 th\u1ec3 t\u00ecm th\u1ea5y nhi\u1ec1u file font trong g\u00f3i &#8211; m\u1ed9t s\u1ed1 \u0111\u01b0\u1ee3c ph\u00e2n ph\u1ed1i d\u01b0\u1edbi d\u1ea1ng quen thu\u1ed9c v\u1edbi c\u00e1c \u0111\u1ecbnh d\u1ea1ng kh\u00e1c nhau, ch\u1eb3ng h\u1ea1n nh\u01b0 m\u1ecfng (thin), trung b\u00ecnh (medium), \u0111\u1eadm (bold), m\u1ecfng nghi\u00eang (thin italic), v\u00e2n v\u00e2n. Trong v\u00ed d\u1ee5 n\u00e0y, ch\u00fang ta ch\u1ec9 mu\u1ed1n b\u1ea1n quan t\u00e2m \u0111\u1ebfn ch\u00ednh b\u1ea3n th\u00e2n m\u00ecnh v\u1edbi file font duy nh\u1ea5t cho t\u1eebng ch\u1ecdn l\u1ef1a.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Tao_ra_cac_doan_ma_can_thiet\"><\/span>T\u1ea1o ra c\u00e1c \u0111o\u1ea1n m\u00e3 c\u1ea7n thi\u1ebft<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Gi\u1edd b\u1ea1n c\u1ea7n t\u1ea1o ra c\u00e1c \u0111o\u1ea1n m\u00e3 c\u1ea7n thi\u1ebft (v\u00e0 c\u00e1c \u0111\u1ecbnh d\u1ea1ng font theo y\u00eau c\u1ea7u). V\u1edbi t\u1eebng font, h\u00e3y theo c\u00e1c b\u01b0\u1edbc sau:<\/p>\n\n\n\n<ol><li>C\u1ea7n \u0111\u1ea3m b\u1ea3o r\u1eb1ng b\u1ea1n \u0111\u00e3 \u0111\u00e1p \u1ee9ng m\u1ecdi y\u00eau c\u1ea7u c\u1ea5p ph\u00e9p n\u1ebfu b\u1ea1n s\u1eed d\u1ee5ng ch\u00fang cho d\u1ef1 \u00e1n th\u01b0\u01a1ng m\u1ea1i ho\u1eb7c\/v\u00e0 d\u1ef1 \u00e1n web th\u1ef1c t\u1ebf.<\/li><li>B\u1ea1n truy c\u1eadp trang <a href=\"https:\/\/www.fontsquirrel.com\/tools\/webfont-generator\" target=\"_blank\" rel=\"noreferrer noopener\">Fontsquirrel Webfont Generator<\/a>. (PS t\u1eeb ng\u01b0\u1eddi d\u1ecbch: b\u1ea1n n\u00ean d\u00f9ng c\u00f4ng c\u1ee5 <a href=\"https:\/\/cloudconvert.com\/ttf-to-woff\" target=\"_blank\" rel=\"noreferrer noopener\">cloudconvert.com\/ttf-to-woff<\/a> \u0111\u1ec3 chuy\u1ec3n s\u1ebd t\u1ed1t h\u01a1n v\u00ec FWG b\u1ecf qua c\u00e1c k\u00fd t\u1ef1 c\u00f3 d\u1ea5u ti\u1ebfng Vi\u1ec7t).<\/li><li>T\u1ea3i hai file font c\u1ee7a b\u1ea1n l\u00ean th\u00f4ng qua n\u00fat Upload Fonts.<\/li><li>Tick v\u00e0o t\u00f9y ch\u1ecdn &#8220;Yes, the fonts&#8230;&#8221;<\/li><li>Click v\u00e0o <em>Download your kit<\/em>.<\/li><\/ol>\n\n\n\n<p>Sau khi qu\u00e1 tr\u00ecnh x\u1eed l\u00fd ho\u00e0n t\u1ea5t, b\u1ea1n t\u1ea3i file ZIP v\u1ec1. L\u01b0u n\u00f3 d\u01b0\u1edbi c\u00f9ng th\u01b0 m\u1ee5c nh\u01b0 HTML v\u00e0 CSS.<\/p>\n\n\n\n<p>N\u1ebfu b\u1ea1n c\u1ea7n h\u1ed7 tr\u1ee3 c\u00e1c tr\u00ecnh duy\u1ec7t c\u0169, h\u00e3y ch\u1ecdn mode l\u00e0 Expert trong Fontsquirrel Webfont Generator, ch\u1ecdn SVG, EOT, v\u00e0 TTF tr\u01b0\u1edbc khi t\u1ea3i b\u1ed9 kit xu\u1ed1ng.<\/p>\n\n\n\n<p>C\u00e1c d\u1ecbch v\u1ee5 t\u1ea1o font th\u01b0\u1eddng gi\u1edbi h\u1ea1n k\u00edch c\u1ee1 t\u1ed1i \u0111a \u0111\u01b0\u1ee3c ph\u00e9p. N\u1ebfu b\u1ea1n r\u01a1i v\u00e0o tr\u01b0\u1eddng h\u1ee3p \u0111\u00f3, h\u00e3y c\u00e2n nh\u1eafc s\u1eed d\u1ee5ng c\u00e1c c\u00f4ng c\u1ee5 nh\u01b0:<\/p>\n\n\n\n<ol><li><a href=\"https:\/\/github.com\/bramstein\/sfnt2woff-zopfli\" target=\"_blank\" rel=\"noreferrer noopener\">sfnt2woff-zopfli<\/a>&nbsp;\u0111\u1ec3 chuy\u1ec3n t\u1eeb ttf sang woff;<\/li><li><a href=\"https:\/\/fontforge.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">fontforge<\/a>&nbsp;\u0111\u1ec3 chuy\u1ec3n t\u1eeb ttf sang svg;<\/li><li><a href=\"https:\/\/people.apache.org\/~clay\/batik\/ttf2svg.html\" target=\"_blank\" rel=\"noreferrer noopener\">batik ttf2svf<\/a> \u0111\u1ec3 chuy\u1ec3n t\u1eeb ttf sang svg;<\/li><li><a href=\"https:\/\/github.com\/google\/woff2\" target=\"_blank\" rel=\"noreferrer noopener\">woff2<\/a> \u0111\u1ec3 chuy\u1ec3n t\u1eeb ttf sang woff2;<\/li><\/ol>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Trien_khai_ma_trong_demo\"><\/span>Tri\u1ec3n khai m\u00e3 trong demo<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>L\u00fac n\u00e0y, b\u1ea1n gi\u1ea3i n\u00e9n g\u00f3i webfont b\u1ea1n v\u1eeba m\u1edbi chuy\u1ec3n \u0111\u1ed5i. B\u00ean trong th\u01b0 m\u1ee5c \u0111\u00e3 gi\u1ea3i n\u00e9n b\u1ea1n s\u1ebd th\u1ea5y m\u1ed9t s\u1ed1 m\u1ee5c h\u1eefu \u00edch nh\u01b0:<\/p>\n\n\n\n<ul><li>Hai phi\u00ean b\u1ea3n c\u1ee7a t\u1eebng font: c\u00e1c file <code>.woff<\/code> v\u00e0 <code>.woff2<\/code>;<\/li><li>M\u1ed9t file HTML demo cho t\u1eebng font &#8211; click ch\u00fang v\u00e0 m\u1edf b\u1eb1ng tr\u00ecnh duy\u1ec7t \u0111\u1ec3 xem c\u00e1c font n\u00e0y tr\u00f4ng nh\u01b0 th\u1ebf n\u00e0o trong c\u00e1c t\u00ecnh hu\u1ed1ng s\u1eed d\u1ee5ng kh\u00e1c nhau;<\/li><li>M\u1ed9t file <code>stylesheet.css<\/code>, c\u00e1i bao g\u1ed3m \u0111o\u1ea1n m\u00e3 <code>@font-face<\/code> \u0111\u00e3 \u0111\u01b0\u1ee3c t\u1ea1o s\u1eb5n;<\/li><\/ul>\n\n\n\n<p>\u0110\u1ec3 tri\u1ec3n khai c\u00e1c fonts n\u00e0y trong demo, b\u1ea1n h\u00e3y theo c\u00e1c b\u01b0\u1edbc sau:<\/p>\n\n\n\n<ol><li>Thay \u0111\u1ed5i th\u01b0 m\u1ee5c \u0111\u00e3 gi\u1ea3i n\u00e9n sang m\u1ed9t d\u1ea1ng d\u1ec5 nh\u1edb v\u00e0 \u0111\u01a1n gi\u1ea3n h\u01a1n, ch\u1eb3ng h\u1ea1n nh\u01b0 <code>fonts<\/code>.<\/li><li>M\u1edf file <code>stylesheet.css<\/code> v\u00e0 copy hay rule (t\u1ee9c l\u00e0 m\u00e3 c\u1ee7a ch\u00fang) v\u00e0o trong file <code>web-font-start.css<\/code> &#8211; b\u1ea1n c\u1ea7n \u0111\u01b0a ch\u00fang v\u00e0o v\u1ecb tr\u00ed \u0111\u1ea7u ti\u00ean, tr\u01b0\u1edbc b\u1ea5t k\u1ef3 m\u00e3 CSS n\u00e0o c\u1ee7a b\u1ea1n, c\u0169ng nh\u01b0 c\u00e1c font c\u1ea7n nh\u00fang \u0111\u00f3 m\u00e0 b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng ch\u00fang trong trang.<\/li><li>V\u1edbi t\u1eebng h\u00e0m <code>url()<\/code> ch\u1ec9 \u0111\u1ebfn file font m\u00e0 ch\u00fang ta mu\u1ed1n nh\u00fang v\u00e0o b\u00ean trong CSS. Ch\u00fang ta c\u1ea7n \u0111\u1ea3m b\u1ea3o r\u1eb1ng \u0111\u01b0\u1eddng d\u1eabn c\u1ee7a c\u00e1c file l\u00e0 ch\u00ednh x\u00e1c, v\u00ec th\u1ebf h\u00e3y th\u00eam <code>fonts\/<\/code> \u1edf ph\u1ea7n \u0111\u1ea7u t\u1eebng \u0111\u01b0\u1eddng d\u1eabn (\u0111i\u1ec1u ch\u1ec9nh n\u1ebfu th\u1ea5y c\u1ea7n thi\u1ebft).<\/li><li>Gi\u1edd th\u00ec b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng c\u00e1c font n\u00e0y, n\u00f3 s\u1ebd t\u01b0\u01a1ng t\u1ef1 nh\u01b0 b\u1ea5t c\u1ee9 font web an to\u00e0n n\u00e0o. V\u00ed d\u1ee5:<\/li><\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>@font-face {\n    font-family: 'zantrokeregular';\n    src: url('fonts\/zantroke-webfont.woff2') format('woff2'),\n         url('fonts\/zantroke-webfont.woff') format('woff');\n    font-weight: normal;\n    font-style: normal;\n}\n\nfont-family: 'zantrokeregular', serif;<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Su_dung_dich_vu_font_truc_tuyen\"><\/span>S\u1eed d\u1ee5ng d\u1ecbch v\u1ee5 font tr\u1ef1c tuy\u1ebfn<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>D\u1ecbch v\u1ee5 font tr\u1ef1c tuy\u1ebfn l\u01b0u tr\u1eef v\u00e0 ph\u1ee5c v\u1ee5 font cho website c\u1ee7a b\u1ea1n v\u00ec th\u1ebf b\u1ea1n kh\u00f4ng c\u1ea7n ph\u1ea3i lo v\u1ec1 chuy\u1ec7n vi\u1ebft c\u00e1c d\u00f2ng m\u00e3 <code>@font-face<\/code>. Thay v\u00e0o \u0111\u00f3, b\u1ea1n th\u01b0\u1eddng ch\u1ec9 c\u1ea7n ch\u00e8n m\u1ed9t ho\u1eb7c hai d\u00f2ng m\u00e3 \u0111\u01a1n gi\u1ea3n v\u00e0o trang c\u1ee7a b\u1ea1n \u0111\u1ec3 m\u1ecdi th\u1ee9 ho\u1ea1t \u0111\u1ed9ng \u1ed5n th\u1ecfa. V\u00ed d\u1ee5 bao g\u1ed3m c\u00e1c m\u00e3 c\u1ee7a <a href=\"https:\/\/fonts.adobe.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Adobe Fonts<\/a>, <a href=\"https:\/\/www.typography.com\/webfonts\" target=\"_blank\" rel=\"noreferrer noopener\">Cloud typography<\/a>. H\u1ea7u h\u1ebft c\u00e1c d\u1ecbch v\u1ee5 d\u1ea1ng n\u00e0y l\u00e0 tr\u1ea3 ph\u00ed, ngo\u1ea1i tr\u1eeb d\u1ecbch v\u1ee5 \u0111\u00e1ng ch\u00fa \u00fd c\u1ee7a Google Fonts, m\u1ed9t s\u1ea3n ph\u1ea9m mi\u1ec5n ph\u00ed h\u1eefu \u00edch, \u0111\u1eb7c bi\u1ec7t khi mu\u1ed1n ki\u1ec3m tra nhanh ho\u1eb7c vi\u1ebft demos (th\u1eed nghi\u1ec7m).<\/p>\n\n\n\n<p>H\u1ea7u h\u1ebft c\u00e1c d\u1ecbch v\u1ee5 \u0111\u1ec1u r\u1ea5t d\u1ec5 s\u1eed d\u1ee5ng, v\u00ed th\u1ebf ch\u00fang ta kh\u00f4ng c\u1ea7n \u0111i v\u00e0o chi ti\u1ebft l\u00e0m g\u00ec. H\u00e3y th\u1eed xem nhanh m\u1ed9t \u0111o\u1ea1n m\u00e3 c\u1ee7a Google font b\u1ea1n s\u1ebd hi\u1ec3u. M\u1ed9t l\u1ea7n n\u1eefa h\u00e3y s\u1eed d\u1ee5ng b\u1ea3n sao <code>web-font-start.html<\/code> v\u00e0 <code>web-font-start.css<\/code> \u0111\u1ec3 b\u1eaft \u0111\u1ea7u.<\/p>\n\n\n\n<ol><li>Truy c\u1eadp trang <a href=\"https:\/\/www.google.com\/fonts\" target=\"_blank\" rel=\"noreferrer noopener\">Google Fonts<\/a>.<\/li><li>T\u00ecm font m\u00e0 b\u1ea1n th\u00edch, n\u1ebfu c\u1ea7n h\u00e3y s\u1eed d\u1ee5ng b\u1ed9 l\u1ecdc \u1edf \u0111\u1ea7u trang \u0111\u1ec3 hi\u1ec3n th\u1ecb ki\u1ec3u font m\u00e0 b\u1ea1n mu\u1ed1n ch\u1ecdn c\u0169ng nh\u01b0 l\u1ef1a ch\u1ecdn v\u00e0i font \u01b0ng \u00fd.<\/li><li>Copy \u0111o\u1ea1n m\u00e3 CSS m\u00e0 Google Font cung c\u1ea5p cho b\u1ea1n.<\/li><\/ol>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Chi_tiet_hon_ve_font-face\"><\/span>Chi ti\u1ebft h\u01a1n v\u1ec1 @font-face<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Gi\u1edd ch\u00fang ta c\u00f9ng kh\u00e1m ph\u00e1 c\u00fa ph\u00e1p c\u1ee7a @font-face \u0111\u01b0\u1ee3c t\u1ea1o cho b\u1ea1n b\u1eb1ng fontsquirrel. M\u1ed9t trong c\u00e1c rule s\u1ebd tr\u00f4ng gi\u1ed1ng nh\u01b0 th\u1ebf n\u00e0y:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@font-face {\n  font-family: 'zantrokeregular';\n  src: url('zantroke-webfont.woff2') format('woff2'),\n       url('zantroke-webfont.woff') format('woff');\n  font-weight: normal;\n  font-style: normal;\n}<\/code><\/pre>\n\n\n\n<p>Ch\u00fang ta s\u1ebd xem t\u1eebng \u0111o\u1ea1n \u0111\u1ec3 bi\u1ebft \u00fd ngh\u0129a t\u1eebng c\u00e1i:<\/p>\n\n\n\n<ul><li><code>font-family<\/code>: D\u00f2ng n\u00e0y ch\u1ec9 \u0111\u1ecbnh t\u00ean m\u00e0 b\u1ea1n mu\u1ed1n li\u00ean k\u1ebft \u0111\u1ebfn font. \u0110\u00e2y l\u00e0 t\u00ean m\u00e0 b\u1ea1n \u0111\u1eb7t theo \u00fd th\u00edch, kh\u00f4ng c\u00f3 h\u1ea1n ch\u1ebf g\u00ec c\u1ea3, mi\u1ec5n l\u00e0 b\u1ea1n s\u1eed d\u1ee5ng n\u00f3 nh\u1ea5t qu\u00e1n trong CSS c\u1ee7a b\u1ea1n.<\/li><li><code>src<\/code>: \u0110\u00e2y l\u00e0 c\u00e1c d\u00f2ng cho bi\u1ebft \u0111\u01b0\u1eddng d\u1eabn t\u1edbi c\u00e1c file font \u0111\u1ec3 nh\u00fang v\u00e0o CSS c\u1ee7a b\u1ea1n (ph\u1ea7n url), v\u00e0 \u0111\u1ecbnh d\u1ea1ng cho t\u1eebng file font. Ph\u1ea7n sau trong t\u1eebng ph\u1ea7n (format) l\u00e0 c\u00e1c t\u00f9y ch\u1ecdn (t\u1ee9c c\u00f3 c\u0169ng \u0111\u01b0\u1ee3c, kh\u00f4ng c\u00f3 c\u0169ng kh\u00f4ng sao), nh\u01b0ng \u0111\u00e1ng l\u00e0m v\u00ec n\u00f3 s\u1ebd gi\u00fap tr\u00ecnh duy\u1ec7t nhanh ch\u00f3ng bi\u1ebft \u0111\u01b0\u1ee3c r\u1eb1ng font \u0111\u00f3 n\u00f3 c\u00f3 d\u00f9ng \u0111\u01b0\u1ee3c hay kh\u00f4ng. Nhi\u1ec1u khai b\u00e1o c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c li\u1ec7t k\u00ea, ph\u00e2n chia b\u1eb1ng d\u1ea5y ph\u1ea9y. V\u00ec tr\u00ecnh duy\u1ec7t s\u1ebd t\u00ecm ch\u00fang theo quy t\u1eafc d\u00f2ng, do v\u1eady t\u1ed1t nh\u1ea5t l\u00e0 h\u00e3y b\u1eaft \u0111\u1ea7u v\u1edbi \u0111\u1ecbnh d\u1ea1ng \u01b0a th\u00edch, ch\u1eb3ng h\u1ea1n nh\u01b0 WOFF2.<\/li><li><code>font-weight<\/code> \/ <code>font-style<\/code>: \u0110\u00e2y l\u00e0 nh\u1eefng d\u00f2ng ch\u1ec9 \u0111\u1ecbnh weight c\u1ee7a font c\u0169ng nh\u01b0 li\u1ec7u n\u00f3 c\u00f3 d\u1ea1ng italic (nghi\u00eang) hay kh\u00f4ng. N\u1ebfu b\u1ea1n nh\u00fang nhi\u1ec1u weight c\u1ee7a c\u00f9ng font, b\u1ea1n c\u00f3 th\u1ec3 ch\u1ec9 th\u1ecb weight\/style c\u1ee5 th\u1ec3 v\u00e0 sau \u0111\u00f3 s\u1eed d\u1ee5ng c\u00e1c gi\u00e1 tr\u1ecb kh\u00e1c c\u1ee7a <code>font-weight\/font-style<\/code> \u0111\u1ec3 ch\u1ecdn gi\u1eefa ch\u00fang, thay v\u00ec g\u1ecdi to\u00e0n b\u1ed9 c\u00e1c th\u00e0nh vi\u00ean kh\u00e1c nhau c\u1ee7a h\u1ecd font ch\u1eef b\u1eb1ng c\u00e1c t\u00ean font-family kh\u00e1c nhau. M\u1eb9o, b\u1ea1n c\u00f3 th\u1ec3 <a href=\"https:\/\/kiencang.net\/meo-voi-font-face\/\" target=\"_blank\" rel=\"noreferrer noopener\">tham kh\u1ea3o b\u00e0i vi\u1ebft n\u00e0y c\u1ee7a Roger Johansson \u0111\u1ec3 bi\u1ebft m\u1eb9o \u0111\u1eb7t t\u00ean hi\u1ec7u qu\u1ea3<\/a>.<\/li><\/ul>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Fonts_bien_doi_variable\"><\/span>Fonts bi\u1ebfn \u0111\u1ed5i (variable)<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>C\u00f3 m\u1ed9t s\u1ed1 c\u00f4ng ngh\u1ec7 m\u1edbi v\u1ec1 font hi\u1ec7n kh\u1ea3 d\u1ee5ng tr\u00ean c\u00e1c tr\u00ecnh duy\u1ec7t, \u0111\u00f3 l\u00e0 variable fonts. C\u00e1c font n\u00e0y cho ph\u00e9p nhi\u1ec1u bi\u1ebfn \u0111\u1ed5i kh\u00e1c nhau c\u1ee7a typeface \u0111\u01b0\u1ee3c k\u1ebft h\u1ee3p v\u00e0o m\u1ed9t t\u1ec7p duy nh\u1ea5t, thay v\u00ec ph\u1ea3i chia t\u00e1ch ra th\u00e0nh nhi\u1ec1u file v\u1edbi c\u00e1c width, weight ho\u1eb7c style kh\u00e1c nhau. Ki\u1ebfn th\u1ee9c v\u1ec1 lo\u1ea1i font n\u00e0y s\u1ebd l\u00e0 ph\u1ea7n n\u00e2ng cao n\u00ean s\u1ebd kh\u00f4ng \u0111\u01b0\u1ee3c \u0111\u1ec1 c\u1eadp chi ti\u1ebft trong b\u00e0i n\u00e0y, b\u1ea1n c\u00f3 th\u1ec3 t\u00ecm hi\u1ec3u th\u00eam tr\u00ean m\u1ea1ng \u0111\u1ec3 bi\u1ebft th\u00eam th\u00f4ng tin.<\/p>\n\n\n\n<p><em>(Web fonts, d\u1ecbch t\u1eeb h\u01b0\u1edbng d\u1eabn c\u1ee7a Mozilla, ph\u1ea7n th\u00f4ng tin d\u00e0nh cho nh\u00e0 ph\u00e1t tri\u1ec3n)<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Trong ph\u1ea7n \u0111\u1ea7u c\u1ee7a b\u00e0i, ch\u00fang ta s\u1ebd kh\u00e1m ph\u00e1 c\u00e1c t\u00ednh n\u0103ng c\u01a1 b\u1ea3n d\u00e0nh cho vi\u1ec7c \u0111\u1ecbnh ki\u1ec3u font v\u00e0 v\u0103n b\u1ea3n. C\u00e0ng v\u1ec1 sau, b\u00e0i vi\u1ebft s\u1ebd \u0111i v\u00e0o chi ti\u1ebft v\u00e0 n\u00e2ng cao h\u01a1n. Ch\u00fang ta s\u1ebd h\u1ecdc c\u00e1ch s\u1eed d\u1ee5ng font t\u00f9y ch\u1ec9nh (custom fonts) \u0111\u1ec3 cho ph\u00e9p b\u1ea1n kh\u1ea3 &hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[229],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>T\u00ecm hi\u1ec3u v\u1ec1 font cho web (h\u01b0\u1edbng d\u1eabn t\u1eeb Mozilla) &#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\/tim-hieu-font-web\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"T\u00ecm hi\u1ec3u v\u1ec1 font cho web (h\u01b0\u1edbng d\u1eabn t\u1eeb Mozilla) &#8226; Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"og:description\" content=\"Trong ph\u1ea7n \u0111\u1ea7u c\u1ee7a b\u00e0i, ch\u00fang ta s\u1ebd kh\u00e1m ph\u00e1 c\u00e1c t\u00ednh n\u0103ng c\u01a1 b\u1ea3n d\u00e0nh cho vi\u1ec7c \u0111\u1ecbnh ki\u1ec3u font v\u00e0 v\u0103n b\u1ea3n. C\u00e0ng v\u1ec1 sau, b\u00e0i vi\u1ebft s\u1ebd \u0111i v\u00e0o chi ti\u1ebft v\u00e0 n\u00e2ng cao h\u01a1n. Ch\u00fang ta s\u1ebd h\u1ecdc c\u00e1ch s\u1eed d\u1ee5ng font t\u00f9y ch\u1ec9nh (custom fonts) \u0111\u1ec3 cho ph\u00e9p b\u1ea1n kh\u1ea3 &hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kiencang.net\/tim-hieu-font-web\/\" \/>\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=\"2021-09-04T07:21:35+00:00\" \/>\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=\"12 ph\u00fat\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"T\u00ecm hi\u1ec3u v\u1ec1 font cho web (h\u01b0\u1edbng d\u1eabn t\u1eeb Mozilla) &#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\/tim-hieu-font-web\/","og_locale":"vi_VN","og_type":"article","og_title":"T\u00ecm hi\u1ec3u v\u1ec1 font cho web (h\u01b0\u1edbng d\u1eabn t\u1eeb Mozilla) &#8226; Ki\u1ebfn c\u00e0ng","og_description":"Trong ph\u1ea7n \u0111\u1ea7u c\u1ee7a b\u00e0i, ch\u00fang ta s\u1ebd kh\u00e1m ph\u00e1 c\u00e1c t\u00ednh n\u0103ng c\u01a1 b\u1ea3n d\u00e0nh cho vi\u1ec7c \u0111\u1ecbnh ki\u1ec3u font v\u00e0 v\u0103n b\u1ea3n. C\u00e0ng v\u1ec1 sau, b\u00e0i vi\u1ebft s\u1ebd \u0111i v\u00e0o chi ti\u1ebft v\u00e0 n\u00e2ng cao h\u01a1n. Ch\u00fang ta s\u1ebd h\u1ecdc c\u00e1ch s\u1eed d\u1ee5ng font t\u00f9y ch\u1ec9nh (custom fonts) \u0111\u1ec3 cho ph\u00e9p b\u1ea1n kh\u1ea3 &hellip;","og_url":"https:\/\/kiencang.net\/tim-hieu-font-web\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2021-09-04T07:21:35+00:00","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":"12 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/tim-hieu-font-web\/","url":"https:\/\/kiencang.net\/tim-hieu-font-web\/","name":"T\u00ecm hi\u1ec3u v\u1ec1 font cho web (h\u01b0\u1edbng d\u1eabn t\u1eeb Mozilla) &#8226; Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2021-09-04T07:21:35+00:00","dateModified":"2021-09-04T07:21:35+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/tim-hieu-font-web\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/tim-hieu-font-web\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/tim-hieu-font-web\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"T\u00ecm hi\u1ec3u v\u1ec1 font cho web (h\u01b0\u1edbng d\u1eabn t\u1eeb Mozilla)"}]},{"@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\/20245"}],"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=20245"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/20245\/revisions"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=20245"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=20245"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=20245"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}