{"id":20244,"date":"2021-09-04T10:41:20","date_gmt":"2021-09-04T10:41:20","guid":{"rendered":"https:\/\/freehost.page\/?p=14486"},"modified":"2021-09-04T10:41:20","modified_gmt":"2021-09-04T10:41:20","slug":"toi-uu-font-face","status":"publish","type":"post","link":"https:\/\/kiencang.net\/toi-uu-font-face\/","title":{"rendered":"T\u1ed1i \u01b0u font t\u00f9y ch\u1ec9nh v\u1edbi @font-face"},"content":{"rendered":"\n<p><code>@font-face<\/code> r\u1ea5t h\u1ee3p n\u1ebfu b\u1ea1n mu\u1ed1n t\u1ea1o phong c\u00e1ch ri\u00eang cho trang, m\u1eb7c d\u00f9 hi\u1ec7n nay c\u00e1c font t\u00f9y ch\u1ec9nh cho ti\u1ebfng Vi\u1ec7t v\u1eabn h\u1ea1n ch\u1ebf v\u1ec1 t\u00ednh \u1ee9ng d\u1ee5ng th\u1ef1c t\u1ebf, nh\u01b0ng c\u0169ng \u0111\u00e3 kh\u00e1 h\u01a1n nhi\u1ec1u so v\u1edbi c\u00e1ch \u0111\u00e2y v\u00e0i n\u0103m. V\u00e0 nh\u00ecn chung \u0111\u1ed1i v\u1edbi c\u00e1c v\u0103n b\u1ea3n ng\u1eafn b\u1ea1n c\u00f3 r\u1ea5t nhi\u1ec1u l\u1ef1a ch\u1ecdn.<\/p>\n\n\n\n<p>M\u1ed9t ngu\u1ed3n mi\u1ec5n ph\u00ed \u0111\u00e1ng tin c\u1eady \u0111\u1ec3 t\u1ea3i <a href=\"https:\/\/fonts.google.com\/?subset=vietnamese\" target=\"_blank\" rel=\"noreferrer noopener\">c\u00e1c font t\u00f9y ch\u1ec9nh h\u1ed7 tr\u1ee3 t\u1ed1t ti\u1ebfng Vi\u1ec7t l\u00e0 Google Fonts<\/a>. B\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng t\u00ednh n\u0103ng l\u1ecdc \u1edf tr\u00ean c\u00f9ng (v\u00ed d\u1ee5 theo category) \u0111\u1ec3 nhanh ch\u00f3ng t\u00ecm ra font \u01b0ng \u00fd. <\/p>\n\n\n\n<p><a href=\"https:\/\/fonts.google.com\/specimen\/Mali?subset=vietnamese&amp;category=Handwriting\" target=\"_blank\" rel=\"noreferrer noopener\">Font ch\u1eef vi\u1ebft tay t\u00f4i th\u00edch nh\u1ea5t tr\u00ean n\u00e0y l\u00e0 Mali<\/a>.<\/p>\n\n\n\n<p>OK, b\u00e2y gi\u1edd ch\u00fang ta s\u1ebd chuy\u1ec3n qua \u0111o\u1ea1n m\u00e3:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@font-face { \/* font t\u00f9y ch\u1ec9nh *\/\n        font-family:\"fontMali\";\n        src:url('fonts\/mali-light.woff2') format('woff2'), \n        url('fonts\/mali-light.woff') format('woff'), \n        url('fonts\/mali-light.ttf') format('ttf'), \n        url('fonts\/mali-light.otf') format('otf'),\n        url('fonts\/mali-light.eot?#iefix') format('embedded-opentype'),\n        url('fonts\/mali-light.svg#svgFontName') format('svg'); \n        font-display:swap;\n }\n             \nbody {font-family: \"fontMali\", Arial, Helvetica, sans-serif; }<\/code><\/pre>\n\n\n\n<p>Gi\u1ea3i th\u00edch t\u1eebng ph\u1ea7n:<\/p>\n\n\n\n<ul><li><code>font-family:\"fontMali\"<\/code> l\u00e0 t\u00ean b\u1ea1n \u0111\u1eb7t cho font t\u00f9y ch\u1ec9nh, b\u1ea1n \u0111\u1eb7t n\u00f3 th\u1ebf n\u00e0o c\u0169ng \u0111\u01b0\u1ee3c, kh\u00f4ng nh\u1ea5t thi\u1ebft ph\u1ea3i gi\u1ed1ng v\u1edbi t\u00ean font m\u00e0 b\u1ea1n t\u1ea3i v\u1ec1 m\u00e1y;<\/li><li><code>src:url('fonts\/mali-light.woff2')<\/code> l\u00e0 \u0111\u01b0\u1eddng d\u1eabn m\u00e0 file font c\u1ee7a b\u1ea1n l\u01b0u. Th\u01b0\u1eddng th\u00ec ch\u00fang ta s\u1ebd t\u1ea1o m\u1ed9t th\u01b0 m\u1ee5c c\u00f3 t\u00ean l\u00e0 <code>fonts<\/code> \u0111\u1ec3 ch\u1ee9a c\u00e1c font cho website. Th\u01b0 m\u1ee5c n\u00e0y n\u00ean c\u00f9ng c\u1ea5p v\u1edbi th\u01b0 m\u1ee5c ch\u1ee9a file css, js c\u0169ng nh\u01b0 html;<\/li><li><code>.woff2<\/code> l\u00e0 \u0111\u1ecbnh d\u1ea1ng font t\u1ed1i \u01b0u nh\u1ea5t hi\u1ec7n nay v\u00ec n\u00f3 nh\u1eb9 nh\u1ea5t trong khi c\u00e1c ch\u1ee9c n\u0103ng kh\u00e1c v\u1eabn \u0111\u1ea3m b\u1ea3o. \u1ede c\u1ea5p \u0111\u1ed9 to\u00e0n c\u1ea7u, n\u00f3 hi\u1ec7n \u0111\u01b0\u1ee3c <a href=\"https:\/\/caniuse.com\/woff2\" target=\"_blank\" rel=\"noreferrer noopener\">h\u01a1n 96% ng\u01b0\u1eddi d\u00f9ng c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng \u0111\u01b0\u1ee3c<\/a>, v\u00e0 t\u1ea5t c\u1ea3 c\u00e1c tr\u00ecnh duy\u1ec7t l\u1edbn \u0111\u1ec1u h\u1ed7 tr\u1ee3;<\/li><li><code>url('fonts\/mali-light.woff') format('woff')<\/code> l\u00e0 \u0111\u1ecbnh d\u1ea1ng font d\u1ef1 ph\u00f2ng \u0111\u1ec3 nh\u1ee1 tr\u00ecnh duy\u1ec7t kh\u00f4ng h\u1ed7 tr\u1ee3 woff2 th\u00ec d\u00f9ng woff. \u0110\u00e2y l\u00e0 \u0111\u1ecbnh d\u1ea1ng \u0111\u01b0\u1ee3c h\u01a1n 98% ng\u01b0\u1eddi d\u00f9ng h\u1ed7 tr\u1ee3;<\/li><li>Ti\u1ebfp \u0111\u1ebfn l\u00e0 c\u00e1c \u0111\u1ecbnh d\u1ea1ng kh\u00e1c nh\u01b0 ttf, otf, eot v\u00e0 svg d\u00e0nh \u0111\u1ec3 h\u1ed7 tr\u1ee3 c\u00e1c tr\u00ecnh duy\u1ec7t qu\u00e1 c\u0169. B\u1ea1n c\u00f3 th\u1ec3 b\u1ecf otf v\u00e0 svg \u0111i c\u0169ng \u0111\u01b0\u1ee3c, v\u00ec s\u1ed1 l\u01b0\u1ee3ng ng\u01b0\u1eddi d\u00f9ng n\u00e0y qu\u00e1 nh\u1ecf. ttf th\u00ec v\u1eabn n\u00ean gi\u1eef l\u1ea1i, cho c\u00e1c phi\u00ean b\u1ea3n ie c\u0169;<\/li><li>Cu\u1ed1i c\u00f9ng \u1edf ph\u1ea7n <code>font-display:swap<\/code> ch\u00fang ta \u0111\u1ec3 v\u1eady \u0111\u1ec3 t\u1ed1i \u01b0u hi\u1ec3n th\u1ecb. Trong l\u00fac ch\u1edd font t\u00f9y ch\u1ec9nh t\u1ea3i v\u1ec1, ch\u1eef v\u1eabn hi\u1ec7n ra, n\u00f3 t\u1ea1m th\u1eddi d\u00f9ng font c\u00f3 trong m\u00e1y ng\u01b0\u1eddi d\u00f9ng. Font t\u00f9y ch\u1ec9nh t\u1ea3i xong th\u00ec chuy\u1ec3n qua s\u1eed d\u1ee5ng font t\u00f9y ch\u1ec9nh. R\u1ea5t h\u1eefu \u00edch khi t\u1ed1c \u0111\u1ed9 k\u1ebft n\u1ed1i internet c\u1ee7a ng\u01b0\u1eddi d\u00f9ng kh\u00f4ng cao ho\u1eb7c\/v\u00e0 file font t\u00f9y ch\u1ec9nh c\u1ee7a b\u1ea1n n\u1eb7ng. N\u1ebfu kh\u00f4ng d\u00f9ng c\u00e2u l\u1ec7nh n\u00e0y th\u00ec font t\u00f9y ch\u1ec9nh t\u1ea3i xong th\u00ec v\u0103n b\u1ea3n m\u1edbi hi\u1ec3n th\u1ecb ra v\u1edbi ng\u01b0\u1eddi d\u00f9ng;<\/li><li>\u1ede ph\u1ea7n body, ch\u00fang ta v\u1eabn \u0111\u1ec3 c\u00e1c font an to\u00e0n (safe web fonts) l\u00e0m d\u1ef1 ph\u00f2ng, tr\u00e1nh tr\u01b0\u1eddng h\u1ee3p v\u00ec m\u1ed9t l\u00fd do n\u00e0o \u0111\u00f3 font t\u00f9y ch\u1ec9nh kh\u00f4ng d\u00f9ng \u0111\u01b0\u1ee3c, t\u1ea3i \u0111\u01b0\u1ee3c;<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">L\u00e0m th\u1ebf n\u00e0o \u0111\u1ec3 chuy\u1ec3n \u0111\u1ed5i \u0111\u1ecbnh d\u1ea1ng font?<\/h2>\n\n\n\n<p>V\u00ed d\u1ee5 b\u1ea1n ch\u1ec9 c\u00f3 file font \u0111\u1ecbnh d\u1ea1ng ttf, b\u1ea1n c\u00f3 th\u1ec3 chuy\u1ec3n \u0111\u1ecbnh d\u1ea1ng cho n\u00f3 b\u1eb1ng c\u00e1c c\u00f4ng c\u1ee5 tr\u1ee5c tuy\u1ebfn nh\u01b0 <a href=\"https:\/\/cloudconvert.com\/ttf-to-woff2\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/cloudconvert.com\/ttf-to-woff2<\/a>, vi\u1ec7c chuy\u1ec3n \u0111\u1ed5i r\u1ea5t \u0111\u01a1n gi\u1ea3n, nhanh v\u00e0 mi\u1ec5n ph\u00ed.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>@font-face r\u1ea5t h\u1ee3p n\u1ebfu b\u1ea1n mu\u1ed1n t\u1ea1o phong c\u00e1ch ri\u00eang cho trang, m\u1eb7c d\u00f9 hi\u1ec7n nay c\u00e1c font t\u00f9y ch\u1ec9nh cho ti\u1ebfng Vi\u1ec7t v\u1eabn h\u1ea1n ch\u1ebf v\u1ec1 t\u00ednh \u1ee9ng d\u1ee5ng th\u1ef1c t\u1ebf, nh\u01b0ng c\u0169ng \u0111\u00e3 kh\u00e1 h\u01a1n nhi\u1ec1u so v\u1edbi c\u00e1ch \u0111\u00e2y v\u00e0i n\u0103m. V\u00e0 nh\u00ecn chung \u0111\u1ed1i v\u1edbi c\u00e1c v\u0103n b\u1ea3n ng\u1eafn b\u1ea1n c\u00f3 &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\u1ed1i \u01b0u font t\u00f9y ch\u1ec9nh v\u1edbi @font-face &#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\/toi-uu-font-face\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"T\u1ed1i \u01b0u font t\u00f9y ch\u1ec9nh v\u1edbi @font-face &#8226; Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"og:description\" content=\"@font-face r\u1ea5t h\u1ee3p n\u1ebfu b\u1ea1n mu\u1ed1n t\u1ea1o phong c\u00e1ch ri\u00eang cho trang, m\u1eb7c d\u00f9 hi\u1ec7n nay c\u00e1c font t\u00f9y ch\u1ec9nh cho ti\u1ebfng Vi\u1ec7t v\u1eabn h\u1ea1n ch\u1ebf v\u1ec1 t\u00ednh \u1ee9ng d\u1ee5ng th\u1ef1c t\u1ebf, nh\u01b0ng c\u0169ng \u0111\u00e3 kh\u00e1 h\u01a1n nhi\u1ec1u so v\u1edbi c\u00e1ch \u0111\u00e2y v\u00e0i n\u0103m. V\u00e0 nh\u00ecn chung \u0111\u1ed1i v\u1edbi c\u00e1c v\u0103n b\u1ea3n ng\u1eafn b\u1ea1n c\u00f3 &hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kiencang.net\/toi-uu-font-face\/\" \/>\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-04T10:41:20+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=\"3 ph\u00fat\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"T\u1ed1i \u01b0u font t\u00f9y ch\u1ec9nh v\u1edbi @font-face &#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\/toi-uu-font-face\/","og_locale":"vi_VN","og_type":"article","og_title":"T\u1ed1i \u01b0u font t\u00f9y ch\u1ec9nh v\u1edbi @font-face &#8226; Ki\u1ebfn c\u00e0ng","og_description":"@font-face r\u1ea5t h\u1ee3p n\u1ebfu b\u1ea1n mu\u1ed1n t\u1ea1o phong c\u00e1ch ri\u00eang cho trang, m\u1eb7c d\u00f9 hi\u1ec7n nay c\u00e1c font t\u00f9y ch\u1ec9nh cho ti\u1ebfng Vi\u1ec7t v\u1eabn h\u1ea1n ch\u1ebf v\u1ec1 t\u00ednh \u1ee9ng d\u1ee5ng th\u1ef1c t\u1ebf, nh\u01b0ng c\u0169ng \u0111\u00e3 kh\u00e1 h\u01a1n nhi\u1ec1u so v\u1edbi c\u00e1ch \u0111\u00e2y v\u00e0i n\u0103m. V\u00e0 nh\u00ecn chung \u0111\u1ed1i v\u1edbi c\u00e1c v\u0103n b\u1ea3n ng\u1eafn b\u1ea1n c\u00f3 &hellip;","og_url":"https:\/\/kiencang.net\/toi-uu-font-face\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2021-09-04T10:41:20+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":"3 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/toi-uu-font-face\/","url":"https:\/\/kiencang.net\/toi-uu-font-face\/","name":"T\u1ed1i \u01b0u font t\u00f9y ch\u1ec9nh v\u1edbi @font-face &#8226; Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2021-09-04T10:41:20+00:00","dateModified":"2021-09-04T10:41:20+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/toi-uu-font-face\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/toi-uu-font-face\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/toi-uu-font-face\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"T\u1ed1i \u01b0u font t\u00f9y ch\u1ec9nh v\u1edbi @font-face"}]},{"@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\/20244"}],"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=20244"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/20244\/revisions"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=20244"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=20244"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=20244"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}