{"id":325,"date":"2013-07-10T17:08:00","date_gmt":"2013-07-10T17:08:00","guid":{"rendered":"https:\/\/kiencang.net\/2013\/07\/10\/cach-nhung-font-vao-web-voi-font-face-ky-nguyen-cua-typography-da-den\/"},"modified":"2022-08-20T15:59:14","modified_gmt":"2022-08-20T08:59:14","slug":"nhung-font-web-font-face","status":"publish","type":"post","link":"https:\/\/kiencang.net\/nhung-font-web-font-face\/","title":{"rendered":"C\u00e1ch nh\u00fang font v\u00e0o web v\u1edbi @font-face, k\u1ef7 nguy\u00ean c\u1ee7a Typography \u0111\u00e3 \u0111\u1ebfn"},"content":{"rendered":"\n
Th\u1ef1c ra th\u1ebf gi\u1edbi web kh\u00f4ng d\u00f9ng nhi\u1ec1u font, b\u1ea1n s\u1ebd b\u1ea5t ng\u1edd khi bi\u1ebft c\u00f3 \u0111\u1ebfn 100 ng\u00e0n c\u00e1c lo\u1ea1i font ch\u1eef kh\u00e1c nhau, nh\u01b0ng h\u00e0ng t\u1ef7 trang web m\u00e0 ch\u00fang ta th\u1ea5y ng\u00e0y nay v\u1eabn ch\u1ec9 d\u00f9ng kho\u1ea3ng 10 font ph\u1ed5 bi\u1ebfn – c\u00f2n g\u1ecdi l\u00e0 font web an to\u00e0n (web safe font).<\/p>\n\n\n\n
M\u1ee5c l\u1ee5c<\/p>\nToggle<\/span><\/path><\/svg><\/svg><\/span><\/span><\/label><\/a><\/span><\/div>\nDanh s\u00e1ch c\u00e1c font web an to\u00e0n<\/a><\/li>Code m\u1eabu nh\u00fang font<\/a><\/li>Gi\u1ea3i th\u00edch code<\/a><\/li>Tr\u00ecnh duy\u1ec7t h\u1ed7 tr\u1ee3<\/a><\/li>Nh\u00fang font tr\u1ef1c tuy\u1ebfn<\/a><\/li><\/ul><\/nav><\/div>\n<\/span>Danh s\u00e1ch c\u00e1c font web an to\u00e0n<\/span><\/h2>\n\n\n\nBao g\u1ed3m:<\/p>\n\n\n\nArial;<\/li>Time New Roman;<\/li>Georgia;<\/li>Tahoma;<\/li>Verdana;<\/li>Trebuchet MS;<\/li>Courier New;<\/li>Comic Sans MS;<\/li>IMPACT;<\/li><\/ul>\n\n\n\nTrong thi\u1ebft k\u1ebf web, nhi\u1ec1u khi ch\u00fang ta mu\u1ed1n s\u1eed d\u1ee5ng m\u1ed9t v\u00e0i ph\u00f4ng \u0111\u1ed9c \u0111\u00e1o nh\u1eb1m g\u00e2y hi\u1ec7u \u1ee9ng v\u1ec1 m\u1eb7t th\u1ea9m m\u1ef9 \u0111\u1ed1i v\u1edbi ng\u01b0\u1eddi xem. Nh\u01b0ng tr\u01b0\u1edbc kia khi vi\u1ec7c nh\u00fang font l\u00e0 kh\u00f4ng th\u1ef1c hi\u1ec7n \u0111\u01b0\u1ee3c, ng\u01b0\u1eddi thi\u1ebft k\u1ebf \u0111\u00e0nh ng\u1eadm ng\u00f9i ch\u1ecbu g\u00f2 b\u00f3 ch\u1ec9 s\u1eed d\u1ee5ng c\u00e1c font ch\u1eef m\u00e0 tr\u00ean m\u00e1y t\u00ednh (ho\u1eb7c thi\u1ebft b\u1ecb kh\u00e1c) ng\u01b0\u1eddi truy c\u1eadp web c\u00f3, v\u00e0 \u0111i\u1ec1u \u0111\u1ea5y l\u00e0m n\u1ea3y sinh ra thu\u1eadt ng\u1eef font web an to\u00e0n – ch\u00ednh l\u00e0 c\u00e1c font hay \u0111\u01b0\u1ee3c c\u00e0i nh\u1ea5t tr\u00ean m\u00e1y t\u00ednh to\u00e0n c\u1ea7u.<\/p>\n\n\n\nGi\u1edd \u0111\u00e2y m\u1ecdi chuy\u1ec7n \u0111\u01b0\u1ee3c gi\u1ea3i quy\u1ebft th\u1eadt \u0111\u01a1n gi\u1ea3n, ng\u01b0\u1eddi thi\u1ebft k\u1ebf ch\u1ec9 c\u1ea7n \u0111\u01b0a font \u0111\u1ed9c \u0111\u00e1o c\u1ee7a m\u00ecnh l\u00ean host c\u1ee7a trang web (ho\u1eb7c b\u00ean th\u1ee9 ba). Khi ng\u01b0\u1eddi d\u00f9ng duy\u1ec7t web, h\u1ecd s\u1ebd t\u1ea3i font v\u1ec1 (gi\u1ed1ng nh\u01b0 t\u1ea3i \u1ea3nh v\u1eady) v\u00e0 xem \u0111\u01b0\u1ee3c c\u00e1c hi\u1ec7u \u1ee9ng font l\u1ea1 m\u1eaft tr\u00ean trang web.<\/p>\n\n\n\nNh\u00fang font b\u1eb1ng @font-face<\/code> trong CSS \u0111\u00e3 m\u1edf bung s\u1ee9c s\u00e1ng t\u1ea1o c\u1ee7a nh\u00e0 thi\u1ebft k\u1ebf, k\u1ebft h\u1ee3p v\u1edbi c\u00e1c kh\u1ea3 n\u0103ng c\u1ee7a CSS3, typography<\/b> tr\u00ean web \u0111\u00e3 l\u00ean m\u1ed9t t\u1ea7m cao m\u1edbi.<\/p>\n\n\n\nP\/S: Tuy nhi\u00ean vi\u1ec7c nh\u00fang font web c\u00f3 th\u1ec3 \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn \u00edt nhi\u1ec1u \u0111\u1ebfn t\u1ed1c \u0111\u1ed9 website<\/a>. H\u00e3y c\u00e2n b\u1eb1ng th\u1ea9m m\u1ef9 v\u00e0 t\u1ed1c \u0111\u1ed9, v\u00ec th\u1eddi gian t\u1ea3i trang \u0111\u00f3ng vai tr\u00f2 r\u1ea5t quan tr\u1ecdng trong vi\u1ec7c gi\u1eef ch\u00e2n ng\u01b0\u1eddi d\u00f9ng.<\/p>\n\n\n\n\n\n\n\n<\/span>Code m\u1eabu nh\u00fang font<\/span><\/h2>\n\n\n\n\u0110o\u1ea1n code sau \u0111\u00e2y \u0111\u01b0\u1ee3c \u0111\u01b0a v\u00e0o file CSS, \u0111\u1eebng lo n\u1ebfu b\u1ea1n kh\u00f4ng hi\u1ec3u lu\u00f4n, ngay ph\u00eda d\u01b0\u1edbi c\u00f3 ph\u1ea7n gi\u1ea3i th\u00edch chi ti\u1ebft:<\/p>\n\n\n\n@font-face {\n font-family:font_strong;\n src:url('..\/fonts\/Captureit.ttf') format('truetype'),\n url('..\/fonts\/Captureit.eot#iefix') format('embedded-opentype'),\n url('..\/fonts\/Captureit.woff') format('woff');\n font-weight:normal;\n font-style:normal;\n}<\/code><\/pre>\n\n\n\nV\u1edbi code tr\u00ean th\u00ec c\u1ea5u tr\u00fac th\u01b0 m\u1ee5c trang web c\u1ee7a b\u1ea1n ph\u1ea3i gi\u1ed1ng nh\u01b0 h\u00ecnh sau:<\/p>\n\n\n\n<\/figure><\/div>\n\n\n\u0110\u00e2y l\u00e0 c\u1ea5u tr\u00fac m\u00e0 \u0111a s\u1ed1 m\u1ecdi ng\u01b0\u1eddi th\u01b0\u1eddng d\u00f9ng, trong \u0111\u00f3 c\u00e1c file html \u1edf b\u00ean ngo\u00e0i, v\u00e0 t\u1eebng ph\u1ea7n chuy\u00ean bi\u1ec7t c\u00f3 th\u01b0 m\u1ee5c ri\u00eang nh\u01b0 css \u0111\u1ec3 ch\u1ee9a c\u00e1c file CSS, fonts \u0111\u1ec3 ch\u1ee9a c\u00e1c Fonts l\u1ea1 m\u1eaft c\u1ee7a ch\u00fang ta…<\/p>\n\n\n\n\n\n\n\n<\/span>Gi\u1ea3i th\u00edch code<\/span><\/h2>\n\n\n\nD\u00f2ng \u0111\u1ea7u ti\u00ean: font-family:font_strong<\/code><\/span> l\u00e0 t\u00ean m\u00e0 ta mu\u1ed1n \u0111\u1eb7t cho font m\u00ecnh nh\u00fang, b\u1ea1n \u0111\u1eb7t t\u00ean nh\u01b0 th\u1ebf n\u00e0o l\u00e0 t\u00f9y \u00fd b\u1ea1n.<\/li>D\u00f2ng th\u1ee9 hai src:url('..\/fonts\/Captureit.ttf')<\/code><\/span> \u0111\u00e2y l\u00e0 ngu\u1ed3n d\u1eabn c\u1ee7a font. B\u1ea1n ch\u00fa \u00fd 2 d\u1ea5u ch\u1ea5m v\u00e0 thanh xu\u1ed9c. \u0110\u01b0\u1eddng d\u1eabn sai th\u00ec ch\u1eafc ch\u1eafn s\u1ebd kh\u00f4ng l\u00ean cho n\u00ean ph\u1ea7n n\u00e0y ph\u1ea3i \u0111\u1eb7c bi\u1ec7t ch\u00fa \u00fd th\u1ef1c hi\u1ec7n th\u1eadt ch\u00ednh x\u00e1c. format('truetype')<\/code><\/span> l\u00e0 \u0111\u1ecbnh d\u1ea1ng c\u1ee7a font, \u0111u\u00f4i .ttf l\u00e0 truetype.<\/li>C\u00e1c d\u00f2ng ti\u1ebfp theo url('..\/fonts\/Captureit.eot#iefix') format('embedded-opentype') url('..\/fonts\/Captureit.woff') format('woff');<\/code><\/span> c\u0169ng t\u01b0\u01a1ng t\u1ef1, ch\u1ec9 kh\u00e1c \u0111\u00e2y l\u00e0 \u0111\u1ecbnh d\u1ea1ng font kh\u00e1c. N\u1ebfu b\u1ea1n ch\u1ec9 c\u00f3 font .ttf th\u00ec ch\u1ea1y tr\u00ean Google Chrome v\u00e0 FireFox th\u00ec \u0111\u01b0\u1ee3c nh\u01b0ng s\u1ebd kh\u00f4ng ch\u1ea1y \u0111\u01b0\u1ee3c tr\u00ean IE. \u0110\u1ec3 ch\u1ea1y \u0111\u01b0\u1ee3c tr\u00ean IE ph\u1ea3i c\u00f3 font d\u1ea1ng .eot<\/li>font-weight:normal; font-style:normal;<\/code><\/span> ngh\u0129a l\u00e0 b\u1ea1n \u0111\u1ec3 font \u1edf d\u1ea1ng th\u01b0\u1eddng (regular), kh\u00f4ng \u0111\u1eadm, kh\u00f4ng nh\u1ea1t.<\/li><\/ul>\n\n\n\nV\u1eady l\u00e0 xong, gi\u1edd ta d\u00f9ng font c\u0169ng y nh\u01b0 b\u00ecnh th\u01b0\u1eddng, ngh\u0129a l\u00e0 ch\u1ed7 n\u00e0o c\u1ea7n d\u00f9ng font nh\u00fang ta khai b\u00e1o font-family l\u00e0 t\u00ean font m\u00e0 ta \u0111\u00e3 \u0111\u1eb7t v\u1eeba n\u00e3y l\u00e0 \u0111\u01b0\u1ee3c, gi\u1ea3 d\u1ee5 gi\u1edd t\u00f4i \u0111\u1eb7t c\u00e1c ti\u00eau \u0111\u1ec1 .title l\u00e0 font nh\u00fang \u1edf tr\u00ean th\u00ec t\u00f4i vi\u1ebft nh\u01b0 sau trong CSS:<\/p>\n\n\n\n.title {font-family:font_strong;}<\/code><\/pre>\n\n\n\n\n\n\n\n<\/span>Tr\u00ecnh duy\u1ec7t h\u1ed7 tr\u1ee3<\/span><\/h2>\n\n\n\nT\u1ea5t c\u1ea3 c\u00e1c tr\u00ecnh duy\u1ec7t ph\u1ed5 th\u00f4ng g\u1ed3m Chrome, FireFox, Opera, Safari v\u00e0 IE \u0111\u1ec1u h\u1ed7 tr\u1ee3 nh\u00fang font, tuy nhi\u00ean lo\u1ea1i font m\u00e0 ch\u00fang support th\u00ec c\u00f3 kh\u00e1c nhau.<\/p>\n\n\n\nInternet Explorer 9+, Firefox, Chrome, Safari v\u00e0 Opera h\u1ed7 tr\u1ee3 WOFF (Web Open Font Format) font.<\/li>Firefox, Chrome, Safari v\u00e0 Opera c\u0169ng h\u1ed7 tr\u1ee3 TTF (True Type Fonts) v\u00e0 OTF (OpenType Fonts).<\/li>Chrome, Safari v\u00e0 Opera h\u1ed7 tr\u1ee3 SVG fonts\/shapes.<\/li>Internet Explorer h\u1ed7 tr\u1ee3 EOT (Embedded OpenType) fonts.<\/li><\/ul>\n\n\n\n\n\n\n\n<\/span>Nh\u00fang font tr\u1ef1c tuy\u1ebfn<\/span><\/h2>\n\n\n\nC\u00e1i n\u00e0y v\u1eeba c\u00f3 \u0111i\u1ec3m gi\u1ed1ng v\u1edbi @font-face m\u00e0 c\u0169ng v\u1eeba kh\u00e1c n\u1eefa:<\/p>\n\n\n\nGi\u1ed1ng \u1edf ch\u1ed7, font s\u1eed d\u1ee5ng \u0111\u1ec1u t\u1ea3i t\u1eeb n\u01a1i kh\u00e1c v\u1ec1, v\u00e0 \u0111\u01b0\u1ee3c d\u1ef1 tr\u00f9 l\u00e0 kh\u00f4ng c\u00f3 tr\u00ean m\u00e1y ng\u01b0\u1eddi d\u00f9ng<\/li>Kh\u00e1c \u1edf ch\u1ed7, @font-face l\u00e0 t\u1ea3i t\u1eeb host c\u1ee7a b\u1ea1n, trong khi nh\u00fang font tr\u1ef1c tuy\u1ebfn th\u00ec t\u1ea3i t\u1eeb server d\u1ecbch v\u1ee5 ri\u00eang<\/li><\/ul>\n\n\n\nH\u00f4m nay t\u00f4i s\u1ebd gi\u1edbi thi\u1ec7u v\u1edbi c\u00e1c b\u1ea1n c\u00e1ch nh\u00fang font b\u1eb1ng Google Font, \u01b0u \u0111i\u1ec3m: <\/p>\n\n\n\nNhanh, \u0111\u1ea3m b\u1ea3o: V\u00e2ng, v\u00ec n\u00f3 l\u00e0 host c\u1ee7a Google, n\u00ean t\u1ed1c \u0111\u1ed9 \u1ed5n \u0111\u1ecbnh, h\u1ea7u nh\u01b0 kh\u00f4ng b\u1ecb h\u1ecfng h\u00f3c, n\u00ean b\u1ea1n c\u00f3 th\u1ec3 an t\u00e2m g\u1ea7n nh\u01b0 100%<\/li>Mi\u1ec5n ph\u00ed: B\u1ea1n kh\u00f4ng ph\u1ea3i m\u1ea5t ti\u1ec1n \u0111\u1ec3 s\u1eed d\u1ee5ng d\u1ecbch v\u1ee5 n\u00e0y. Th\u00eam v\u00e0o \u0111\u00f3 b\u1ea1n c\u0169ng gi\u00fap gi\u1ea3m b\u0103ng th\u00f4ng cho host c\u1ee7a b\u1ea1n<\/li>\u0110\u01a1n gi\u1ea3n: Code nh\u00fang c\u1ee7a n\u00f3 th\u1eadm ch\u00ed c\u00f2n \u0111\u01a1n gi\u1ea3n h\u01a1n @font-face. K\u1ebft qu\u1ea3 demo b\u1ea1n c\u00f3 th\u1ec3 xem ngay \u1edf d\u01b0\u1edbi.<\/li><\/ul>\n\n\n\nBlog Duc Anh Plus – Nguyen Duc Anh<\/div>\n\n\n\nC\u00e1ch l\u00e0m: <\/p>\n\n\n\nTruy c\u1eadp trang web <\/a>https:\/\/fonts.google.com\/<\/a> \u0111\u1ec3 ch\u1ecdn font m\u00e0 b\u1ea1n th\u00edch. Sau \u0111\u00f3 nh\u1ea5n v\u00e0o h\u00ecnh m\u0169i t\u00ean tr\u1ecf (Quick-use)<\/li><\/ul>\n\n\n\n<\/figure><\/div>\n\n\nM\u1ed9t c\u1eeda s\u1ed5 b\u1eadt ra, v\u00e0 Google cho b\u1ea1n \u0111o\u1ea1n code \u0111\u1ec3 \u0111\u01b0a v\u00e0o trong th\u1ebb head c\u1ee7a trang HTML (n\u00f3 g\u1ea7n gi\u1ed1ng v\u1edbi li\u00ean k\u1ebft CSS), code \u0111\u00f3 c\u00f3 d\u1ea1ng nh\u01b0 sau: <link href=\u2019http:\/\/fonts.googleapis.com\/css?family=Ruge+Boogie\u2019 rel=\u2019stylesheet\u2019 type=\u2019text\/css\u2019> <\/strong><\/li>B\u1ea1n c\u00f3 th\u1ec3 th\u1ea5y t\u00ean font trong v\u00ed d\u1ee5 n\u00e0y l\u00e0 Ruge Boogie, ti\u1ebfp theo, mu\u1ed1n s\u1eed d\u1ee5ng font n\u00e0y, th\u00ec trong CSS, b\u1ea1n vi\u1ebft nh\u01b0 sau: body {font-family: \u2018Ruge Boogie\u2019, cursive;font-size:20px;}<\/strong><\/li>Nh\u01b0 v\u1eady l\u00e0 \u0111\u00e3 xong r\u1ed3i, r\u1ea5t \u0111\u01a1n gi\u1ea3n ph\u1ea3i kh\u00f4ng. Th\u00f4ng tin th\u00eam l\u00e0 Google Font c\u00f3 kho\u1ea3ng h\u01a1n 600 font, nh\u01b0ng font ti\u1ebfng Vi\u1ec7t th\u00ec kh\u00f4ng nhi\u1ec1u l\u1eafm<\/li><\/ul>\n\n\n\nM\u1ed9t s\u1ed1 l\u01b0u \u00fd:<\/p>\n\n\n\nGoogle Font c\u00f3 \u0111\u1ebfn 3 ki\u1ec3u nh\u00fang: ti\u00eau chu\u1ea9n l\u00e0 ki\u1ec3u link \u1edf tr\u00ean, th\u1ee9 hai l\u00e0 @import v\u00e0 cu\u1ed1i c\u00f9ng l\u00e0 d\u00f9ng JavaScript \u2013 c\u1ea3 3 \u0111\u1ec1u cho k\u1ebft qu\u1ea3 t\u01b0\u01a1ng \u0111\u01b0\u01a1ng nhau, nh\u01b0ng ki\u1ec3u \u0111\u1ea7u ti\u00ean \u0111\u01b0\u1ee3c khuy\u00ean d\u00f9ng.<\/li>N\u1ebfu mu\u1ed1n \u0111\u1ed3ng b\u1ed9 h\u00f3a font tr\u00ean Google Font v\u1edbi Desktop h\u00e3y s\u1eed d\u1ee5ng ti\u1ec7n \u00edch SkyFonts<\/a>.<\/li>L\u1eddi cu\u1ed1i: h\u00e3y th\u1eadn tr\u1ecdng v\u1edbi nh\u00fang font t\u00f9y ch\u1ec9nh, \u0111\u1eebng nh\u00fang qu\u00e1 nhi\u1ec1u font kh\u00e1c nhau, v\u00ec nh\u00fang font ngh\u0129a l\u00e0 ng\u01b0\u1eddi d\u00f9ng ph\u1ea3i t\u1ea3i font v\u1ec1, nh\u00fang c\u00e1c font qu\u00e1 n\u1eb7ng ch\u1eafc ch\u1eafn l\u00e0m t\u0103ng th\u1eddi gian t\u1ea3i trang, c\u00e1i n\u00e0y l\u00e0 \u00e1p d\u1ee5ng chung ch\u1ee9 kh\u00f4ng ri\u00eang g\u00ec cho Google Font. Ngo\u00e0i ra qu\u00e1 nhi\u1ec1u font kh\u00e1c nhau tr\u00ean trang s\u1ebd g\u00e2y t\u00e1c d\u1ee5ng ng\u01b0\u1ee3c v\u1ec1 m\u1eb7t th\u1ea9m m\u1ef9.<\/li><\/ul>\n\n\n\nTr\u1ea3 l\u1eddi c\u00e2u h\u1ecfi ph\u1ee5 (M\u00e0 c\u0169ng c\u00f3 khi l\u00e0 ch\u00ednh)<\/h3>\n\n\n\nT\u00f4i c\u00f3 th\u1ec3 t\u00ecm font \u0111\u1ed9c v\u00e0 l\u1ea1 \u1edf \u0111\u00e2u?<\/strong> => Tr\u00ean m\u1ea1ng c\u00f3 r\u1ea5t nhi\u1ec1u trang web cung c\u1ea5p font mi\u1ec5n ph\u00ed cho ph\u00e9p b\u1ea1n t\u1ea3i v\u1ec1. B\u1ea1n kh\u00f4ng n\u00ean t\u1ea3i font c\u00f3 ph\u00ed b\u1ea5t h\u1ee3p ph\u00e1p v\u00ec n\u00f3 c\u00f3 th\u1ec3 l\u00e0m \u1ea3nh h\u01b0\u1edfng r\u1ea5t x\u1ea5u \u0111\u1ebfn trang web c\u1ee7a b\u1ea1n n\u1ebfu ch\u1ee7 s\u1edf h\u1eefu font kh\u1edfi ki\u1ec7n. Nhi\u1ec1u font mi\u1ec5n ph\u00ed ch\u1ea5t l\u01b0\u1ee3ng t\u01b0\u01a1ng \u0111\u01b0\u01a1ng th\u00ec t\u1ed9i g\u00ec ch\u00fang ta t\u1ea3i l\u1eadu \u0111\u00fang kh\u00f4ng \u1ea1? B\u1ea1n c\u00f3 th\u1ec3 v\u00e0o trang http:\/\/www.dafont.com\/<\/a> \u0111\u1ec3 t\u00ecm font \u01b0a th\u00edch nh\u00e9.<\/li>Font \u0111\u1eb9p cho ti\u1ebfng Vi\u1ec7t c\u00f3 nhi\u1ec1u kh\u00f4ng? <\/strong>=> \u0110\u00e1ng ti\u1ebfc l\u00e0 kh\u00f4ng! B\u1ea1n c\u00f3 kh\u00e1 \u00edt l\u1ef1a ch\u1ecdn \u0111\u1ed9c \u0111\u00e1o v\u1edbi ti\u1ebfng Vi\u1ec7t. \u1ede ph\u00eda ng\u01b0\u1ee3c l\u1ea1i, ti\u1ebfng Anh v\u00e0 c\u00e1c ng\u00f4n ng\u1eef ch\u00e2u \u00c2u n\u00f3i chung l\u1ea1i r\u1ea5t phong ph\u00fa.<\/li>T\u1ea1i sao t\u00f4i nh\u00fang m\u00e3i font m\u00e0 ch\u1eb3ng \u0111\u01b0\u1ee3c, tr\u00ecnh duy\u1ec7t l\u1edfm r\u1ed3i, b\u1ef1c m\u00ecnh qu\u00e1!<\/strong> => B\u1ea1n n\u00ean d\u00f9ng Google Chrome ho\u1eb7c FireFox \u0111\u1ec3 ki\u1ec3m tra nh\u00fang th\u00e0nh c\u00f4ng hay ch\u01b0a. C\u1ea3 2 tr\u00ecnh duy\u1ec7t n\u00e0y m\u00e0 kh\u00f4ng th\u00e0nh c\u00f4ng th\u00ec l\u00e0 t\u1ea1i b\u1ea1n nh\u00fang sai ch\u1ee9 kh\u00f4ng ph\u1ea3i t\u1ea1i tr\u00ecnh duy\u1ec7t. L\u1ed7i kh\u00f4ng nh\u00fang \u0111\u01b0\u1ee3c font, 10 ng\u01b0\u1eddi th\u00ec 9 ng\u01b0\u1eddi l\u00e0 do sai \u0111\u01b0\u1eddng d\u1eabn \u1edf c\u00e1i src: url<\/em>(\u2018\u0111\u01b0\u1eddng d\u1eabn font\u2019). N\u1ebfu Font nh\u00fang \u0111\u1ec3 c\u00f9ng c\u1ea5p v\u1edbi file HTML \u0111\u01b0\u1eddng d\u1eabn s\u1ebd kh\u00e1c v\u1edbi Font nh\u00fang b\u1ea1n \u0111\u1ec3 \u1edf trong th\u01b0 m\u1ee5c Font ri\u00eang. M\u00ecnh t\u1eebng b\u1ecb r\u1ed3i, kh\u00f4ng bi\u1ebft th\u1ebf l\u00e0 loay hoay c\u1ea3 ti\u1ebfng!<\/li>T\u00f4i c\u00f3 m\u1ed7i font \u0111\u1ecbnh d\u1ea1ng .ttf, l\u00e0m sao \u0111\u1ec3 t\u00f4i c\u00f3 \u0111\u1ecbnh d\u1ea1ng .eot cho \u00f4ng b\u1ea1n IE b\u00e2y gi\u1edd?<\/strong> => Gi\u1ed1ng nh\u01b0 video c\u00f3 th\u1ec3 chuy\u1ec3n \u0111\u1ed5i (convert) \u0111\u1ecbnh d\u1ea1ng, font c\u0169ng v\u1eady. B\u1ea1n c\u00f3 th\u1ec3 search tr\u00ean m\u1ea1ng ho\u1eb7c v\u00f4 trang n\u00e0y \u0111\u1ec3 chuy\u1ec3n \u0111\u1ed5i: http:\/\/www.fontsquirrel.com\/tools\/webfont-generator<\/a><\/li>T\u00f4i th\u1ea5y v\u00e0i font r\u1ea5t \u0111\u1eb9p tr\u00ean m\u1ed9t s\u1ed1 trang web, t\u00f4i mu\u1ed1n d\u00f9ng m\u1ea5y font \u0111\u00f3 nh\u01b0ng kh\u00f4ng bi\u1ebft th\u00f4ng tin v\u1ec1 n\u00f3, v\u1eady t\u00f4i ph\u1ea3i l\u00e0m g\u00ec?<\/strong> => \u0110\u1ec3 t\u00ecm m\u1ed9t font n\u00e0o \u0111\u00f3 th\u00ec c\u00e1ch \u0111\u01a1n gi\u1ea3n nh\u1ea5t l\u00e0 bi\u1ebft t\u00ean c\u1ee7a font, r\u1ed3i google \u0111\u1ec3 t\u1ea3i v\u1ec1. C\u00f3 m\u1ed9t ti\u1ec7n \u00edch m\u1edf r\u1ed9ng cho tr\u00ecnh duy\u1ec7t Google Chrome t\u00ean l\u00e0 WhatFont<\/a> gi\u00fap b\u1ea1n l\u00e0m \u0111\u01b0\u1ee3c \u0111i\u1ec1u \u0111\u00f3. \u0110\u1ecba ch\u1ec9 \u1edf link v\u1eeba d\u1eabn. C\u00e1ch s\u1eed d\u1ee5ng r\u1ea5t \u0111\u01a1n gi\u1ea3n, b\u1ea1n ch\u1ec9 c\u1ea7n di chu\u1ed9t qua ch\u1eef c\u1ea7n bi\u1ebft font, n\u00f3 s\u1ebd th\u00f4ng b\u00e1o t\u00ean font cho b\u1ea1n, ngo\u00e0i ra b\u1ea1n s\u1ebd bi\u1ebft th\u00eam c\u00e1c th\u00f4ng tin kh\u00e1c nh\u01b0 k\u00edch c\u1ee1, line height v\u00e0 m\u00e0u ch\u1eef \u0111ang d\u00f9ng.<\/li><\/ul>\n\n\n\n<\/figure><\/div>\n\n\n<\/p>\n","protected":false},"excerpt":{"rendered":"Th\u1ef1c ra th\u1ebf gi\u1edbi web kh\u00f4ng d\u00f9ng nhi\u1ec1u font, b\u1ea1n s\u1ebd b\u1ea5t ng\u1edd khi bi\u1ebft c\u00f3 \u0111\u1ebfn 100 ng\u00e0n c\u00e1c lo\u1ea1i font ch\u1eef kh\u00e1c nhau, nh\u01b0ng h\u00e0ng t\u1ef7 trang web m\u00e0 ch\u00fang ta th\u1ea5y ng\u00e0y nay v\u1eabn ch\u1ec9 d\u00f9ng kho\u1ea3ng 10 font ph\u1ed5 bi\u1ebfn – c\u00f2n g\u1ecdi l\u00e0 font web an to\u00e0n (web safe font). …<\/p>\n","protected":false},"author":1,"featured_media":1205,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[229],"tags":[],"yoast_head":"\nC\u00e1ch nh\u00fang font v\u00e0o web v\u1edbi @font-face, k\u1ef7 nguy\u00ean c\u1ee7a Typography \u0111\u00e3 \u0111\u1ebfn • Ki\u1ebfn c\u00e0ng<\/title>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\t\n","yoast_head_json":{"title":"C\u00e1ch nh\u00fang font v\u00e0o web v\u1edbi @font-face, k\u1ef7 nguy\u00ean c\u1ee7a Typography \u0111\u00e3 \u0111\u1ebfn • 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\/nhung-font-web-font-face\/","og_locale":"vi_VN","og_type":"article","og_title":"C\u00e1ch nh\u00fang font v\u00e0o web v\u1edbi @font-face, k\u1ef7 nguy\u00ean c\u1ee7a Typography \u0111\u00e3 \u0111\u1ebfn • Ki\u1ebfn c\u00e0ng","og_description":"Th\u1ef1c ra th\u1ebf gi\u1edbi web kh\u00f4ng d\u00f9ng nhi\u1ec1u font, b\u1ea1n s\u1ebd b\u1ea5t ng\u1edd khi bi\u1ebft c\u00f3 \u0111\u1ebfn 100 ng\u00e0n c\u00e1c lo\u1ea1i font ch\u1eef kh\u00e1c nhau, nh\u01b0ng h\u00e0ng t\u1ef7 trang web m\u00e0 ch\u00fang ta th\u1ea5y ng\u00e0y nay v\u1eabn ch\u1ec9 d\u00f9ng kho\u1ea3ng 10 font ph\u1ed5 bi\u1ebfn – c\u00f2n g\u1ecdi l\u00e0 font web an to\u00e0n (web safe font). …","og_url":"https:\/\/kiencang.net\/nhung-font-web-font-face\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2013-07-10T17:08:00+00:00","article_modified_time":"2022-08-20T08:59:14+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":"8 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/nhung-font-web-font-face\/","url":"https:\/\/kiencang.net\/nhung-font-web-font-face\/","name":"C\u00e1ch nh\u00fang font v\u00e0o web v\u1edbi @font-face, k\u1ef7 nguy\u00ean c\u1ee7a Typography \u0111\u00e3 \u0111\u1ebfn • Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2013-07-10T17:08:00+00:00","dateModified":"2022-08-20T08:59:14+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/nhung-font-web-font-face\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/nhung-font-web-font-face\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/nhung-font-web-font-face\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"C\u00e1ch nh\u00fang font v\u00e0o web v\u1edbi @font-face, k\u1ef7 nguy\u00ean c\u1ee7a Typography \u0111\u00e3 \u0111\u1ebfn"}]},{"@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\/325"}],"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=325"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/325\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=325"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=325"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=325"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Bao g\u1ed3m:<\/p>\n\n\n\n
Trong thi\u1ebft k\u1ebf web, nhi\u1ec1u khi ch\u00fang ta mu\u1ed1n s\u1eed d\u1ee5ng m\u1ed9t v\u00e0i ph\u00f4ng \u0111\u1ed9c \u0111\u00e1o nh\u1eb1m g\u00e2y hi\u1ec7u \u1ee9ng v\u1ec1 m\u1eb7t th\u1ea9m m\u1ef9 \u0111\u1ed1i v\u1edbi ng\u01b0\u1eddi xem. Nh\u01b0ng tr\u01b0\u1edbc kia khi vi\u1ec7c nh\u00fang font l\u00e0 kh\u00f4ng th\u1ef1c hi\u1ec7n \u0111\u01b0\u1ee3c, ng\u01b0\u1eddi thi\u1ebft k\u1ebf \u0111\u00e0nh ng\u1eadm ng\u00f9i ch\u1ecbu g\u00f2 b\u00f3 ch\u1ec9 s\u1eed d\u1ee5ng c\u00e1c font ch\u1eef m\u00e0 tr\u00ean m\u00e1y t\u00ednh (ho\u1eb7c thi\u1ebft b\u1ecb kh\u00e1c) ng\u01b0\u1eddi truy c\u1eadp web c\u00f3, v\u00e0 \u0111i\u1ec1u \u0111\u1ea5y l\u00e0m n\u1ea3y sinh ra thu\u1eadt ng\u1eef font web an to\u00e0n – ch\u00ednh l\u00e0 c\u00e1c font hay \u0111\u01b0\u1ee3c c\u00e0i nh\u1ea5t tr\u00ean m\u00e1y t\u00ednh to\u00e0n c\u1ea7u.<\/p>\n\n\n\n
Gi\u1edd \u0111\u00e2y m\u1ecdi chuy\u1ec7n \u0111\u01b0\u1ee3c gi\u1ea3i quy\u1ebft th\u1eadt \u0111\u01a1n gi\u1ea3n, ng\u01b0\u1eddi thi\u1ebft k\u1ebf ch\u1ec9 c\u1ea7n \u0111\u01b0a font \u0111\u1ed9c \u0111\u00e1o c\u1ee7a m\u00ecnh l\u00ean host c\u1ee7a trang web (ho\u1eb7c b\u00ean th\u1ee9 ba). Khi ng\u01b0\u1eddi d\u00f9ng duy\u1ec7t web, h\u1ecd s\u1ebd t\u1ea3i font v\u1ec1 (gi\u1ed1ng nh\u01b0 t\u1ea3i \u1ea3nh v\u1eady) v\u00e0 xem \u0111\u01b0\u1ee3c c\u00e1c hi\u1ec7u \u1ee9ng font l\u1ea1 m\u1eaft tr\u00ean trang web.<\/p>\n\n\n\n
Nh\u00fang font b\u1eb1ng @font-face<\/code> trong CSS \u0111\u00e3 m\u1edf bung s\u1ee9c s\u00e1ng t\u1ea1o c\u1ee7a nh\u00e0 thi\u1ebft k\u1ebf, k\u1ebft h\u1ee3p v\u1edbi c\u00e1c kh\u1ea3 n\u0103ng c\u1ee7a CSS3, typography<\/b> tr\u00ean web \u0111\u00e3 l\u00ean m\u1ed9t t\u1ea7m cao m\u1edbi.<\/p>\n\n\n\nP\/S: Tuy nhi\u00ean vi\u1ec7c nh\u00fang font web c\u00f3 th\u1ec3 \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn \u00edt nhi\u1ec1u \u0111\u1ebfn t\u1ed1c \u0111\u1ed9 website<\/a>. H\u00e3y c\u00e2n b\u1eb1ng th\u1ea9m m\u1ef9 v\u00e0 t\u1ed1c \u0111\u1ed9, v\u00ec th\u1eddi gian t\u1ea3i trang \u0111\u00f3ng vai tr\u00f2 r\u1ea5t quan tr\u1ecdng trong vi\u1ec7c gi\u1eef ch\u00e2n ng\u01b0\u1eddi d\u00f9ng.<\/p>\n\n\n\n\n\n\n\n<\/span>Code m\u1eabu nh\u00fang font<\/span><\/h2>\n\n\n\n\u0110o\u1ea1n code sau \u0111\u00e2y \u0111\u01b0\u1ee3c \u0111\u01b0a v\u00e0o file CSS, \u0111\u1eebng lo n\u1ebfu b\u1ea1n kh\u00f4ng hi\u1ec3u lu\u00f4n, ngay ph\u00eda d\u01b0\u1edbi c\u00f3 ph\u1ea7n gi\u1ea3i th\u00edch chi ti\u1ebft:<\/p>\n\n\n\n@font-face {\n font-family:font_strong;\n src:url('..\/fonts\/Captureit.ttf') format('truetype'),\n url('..\/fonts\/Captureit.eot#iefix') format('embedded-opentype'),\n url('..\/fonts\/Captureit.woff') format('woff');\n font-weight:normal;\n font-style:normal;\n}<\/code><\/pre>\n\n\n\nV\u1edbi code tr\u00ean th\u00ec c\u1ea5u tr\u00fac th\u01b0 m\u1ee5c trang web c\u1ee7a b\u1ea1n ph\u1ea3i gi\u1ed1ng nh\u01b0 h\u00ecnh sau:<\/p>\n\n\n\n<\/figure><\/div>\n\n\n\u0110\u00e2y l\u00e0 c\u1ea5u tr\u00fac m\u00e0 \u0111a s\u1ed1 m\u1ecdi ng\u01b0\u1eddi th\u01b0\u1eddng d\u00f9ng, trong \u0111\u00f3 c\u00e1c file html \u1edf b\u00ean ngo\u00e0i, v\u00e0 t\u1eebng ph\u1ea7n chuy\u00ean bi\u1ec7t c\u00f3 th\u01b0 m\u1ee5c ri\u00eang nh\u01b0 css \u0111\u1ec3 ch\u1ee9a c\u00e1c file CSS, fonts \u0111\u1ec3 ch\u1ee9a c\u00e1c Fonts l\u1ea1 m\u1eaft c\u1ee7a ch\u00fang ta…<\/p>\n\n\n\n\n\n\n\n<\/span>Gi\u1ea3i th\u00edch code<\/span><\/h2>\n\n\n\nD\u00f2ng \u0111\u1ea7u ti\u00ean: font-family:font_strong<\/code><\/span> l\u00e0 t\u00ean m\u00e0 ta mu\u1ed1n \u0111\u1eb7t cho font m\u00ecnh nh\u00fang, b\u1ea1n \u0111\u1eb7t t\u00ean nh\u01b0 th\u1ebf n\u00e0o l\u00e0 t\u00f9y \u00fd b\u1ea1n.<\/li>D\u00f2ng th\u1ee9 hai src:url('..\/fonts\/Captureit.ttf')<\/code><\/span> \u0111\u00e2y l\u00e0 ngu\u1ed3n d\u1eabn c\u1ee7a font. B\u1ea1n ch\u00fa \u00fd 2 d\u1ea5u ch\u1ea5m v\u00e0 thanh xu\u1ed9c. \u0110\u01b0\u1eddng d\u1eabn sai th\u00ec ch\u1eafc ch\u1eafn s\u1ebd kh\u00f4ng l\u00ean cho n\u00ean ph\u1ea7n n\u00e0y ph\u1ea3i \u0111\u1eb7c bi\u1ec7t ch\u00fa \u00fd th\u1ef1c hi\u1ec7n th\u1eadt ch\u00ednh x\u00e1c. format('truetype')<\/code><\/span> l\u00e0 \u0111\u1ecbnh d\u1ea1ng c\u1ee7a font, \u0111u\u00f4i .ttf l\u00e0 truetype.<\/li>C\u00e1c d\u00f2ng ti\u1ebfp theo url('..\/fonts\/Captureit.eot#iefix') format('embedded-opentype') url('..\/fonts\/Captureit.woff') format('woff');<\/code><\/span> c\u0169ng t\u01b0\u01a1ng t\u1ef1, ch\u1ec9 kh\u00e1c \u0111\u00e2y l\u00e0 \u0111\u1ecbnh d\u1ea1ng font kh\u00e1c. N\u1ebfu b\u1ea1n ch\u1ec9 c\u00f3 font .ttf th\u00ec ch\u1ea1y tr\u00ean Google Chrome v\u00e0 FireFox th\u00ec \u0111\u01b0\u1ee3c nh\u01b0ng s\u1ebd kh\u00f4ng ch\u1ea1y \u0111\u01b0\u1ee3c tr\u00ean IE. \u0110\u1ec3 ch\u1ea1y \u0111\u01b0\u1ee3c tr\u00ean IE ph\u1ea3i c\u00f3 font d\u1ea1ng .eot<\/li>font-weight:normal; font-style:normal;<\/code><\/span> ngh\u0129a l\u00e0 b\u1ea1n \u0111\u1ec3 font \u1edf d\u1ea1ng th\u01b0\u1eddng (regular), kh\u00f4ng \u0111\u1eadm, kh\u00f4ng nh\u1ea1t.<\/li><\/ul>\n\n\n\nV\u1eady l\u00e0 xong, gi\u1edd ta d\u00f9ng font c\u0169ng y nh\u01b0 b\u00ecnh th\u01b0\u1eddng, ngh\u0129a l\u00e0 ch\u1ed7 n\u00e0o c\u1ea7n d\u00f9ng font nh\u00fang ta khai b\u00e1o font-family l\u00e0 t\u00ean font m\u00e0 ta \u0111\u00e3 \u0111\u1eb7t v\u1eeba n\u00e3y l\u00e0 \u0111\u01b0\u1ee3c, gi\u1ea3 d\u1ee5 gi\u1edd t\u00f4i \u0111\u1eb7t c\u00e1c ti\u00eau \u0111\u1ec1 .title l\u00e0 font nh\u00fang \u1edf tr\u00ean th\u00ec t\u00f4i vi\u1ebft nh\u01b0 sau trong CSS:<\/p>\n\n\n\n.title {font-family:font_strong;}<\/code><\/pre>\n\n\n\n\n\n\n\n<\/span>Tr\u00ecnh duy\u1ec7t h\u1ed7 tr\u1ee3<\/span><\/h2>\n\n\n\nT\u1ea5t c\u1ea3 c\u00e1c tr\u00ecnh duy\u1ec7t ph\u1ed5 th\u00f4ng g\u1ed3m Chrome, FireFox, Opera, Safari v\u00e0 IE \u0111\u1ec1u h\u1ed7 tr\u1ee3 nh\u00fang font, tuy nhi\u00ean lo\u1ea1i font m\u00e0 ch\u00fang support th\u00ec c\u00f3 kh\u00e1c nhau.<\/p>\n\n\n\nInternet Explorer 9+, Firefox, Chrome, Safari v\u00e0 Opera h\u1ed7 tr\u1ee3 WOFF (Web Open Font Format) font.<\/li>Firefox, Chrome, Safari v\u00e0 Opera c\u0169ng h\u1ed7 tr\u1ee3 TTF (True Type Fonts) v\u00e0 OTF (OpenType Fonts).<\/li>Chrome, Safari v\u00e0 Opera h\u1ed7 tr\u1ee3 SVG fonts\/shapes.<\/li>Internet Explorer h\u1ed7 tr\u1ee3 EOT (Embedded OpenType) fonts.<\/li><\/ul>\n\n\n\n\n\n\n\n<\/span>Nh\u00fang font tr\u1ef1c tuy\u1ebfn<\/span><\/h2>\n\n\n\nC\u00e1i n\u00e0y v\u1eeba c\u00f3 \u0111i\u1ec3m gi\u1ed1ng v\u1edbi @font-face m\u00e0 c\u0169ng v\u1eeba kh\u00e1c n\u1eefa:<\/p>\n\n\n\nGi\u1ed1ng \u1edf ch\u1ed7, font s\u1eed d\u1ee5ng \u0111\u1ec1u t\u1ea3i t\u1eeb n\u01a1i kh\u00e1c v\u1ec1, v\u00e0 \u0111\u01b0\u1ee3c d\u1ef1 tr\u00f9 l\u00e0 kh\u00f4ng c\u00f3 tr\u00ean m\u00e1y ng\u01b0\u1eddi d\u00f9ng<\/li>Kh\u00e1c \u1edf ch\u1ed7, @font-face l\u00e0 t\u1ea3i t\u1eeb host c\u1ee7a b\u1ea1n, trong khi nh\u00fang font tr\u1ef1c tuy\u1ebfn th\u00ec t\u1ea3i t\u1eeb server d\u1ecbch v\u1ee5 ri\u00eang<\/li><\/ul>\n\n\n\nH\u00f4m nay t\u00f4i s\u1ebd gi\u1edbi thi\u1ec7u v\u1edbi c\u00e1c b\u1ea1n c\u00e1ch nh\u00fang font b\u1eb1ng Google Font, \u01b0u \u0111i\u1ec3m: <\/p>\n\n\n\nNhanh, \u0111\u1ea3m b\u1ea3o: V\u00e2ng, v\u00ec n\u00f3 l\u00e0 host c\u1ee7a Google, n\u00ean t\u1ed1c \u0111\u1ed9 \u1ed5n \u0111\u1ecbnh, h\u1ea7u nh\u01b0 kh\u00f4ng b\u1ecb h\u1ecfng h\u00f3c, n\u00ean b\u1ea1n c\u00f3 th\u1ec3 an t\u00e2m g\u1ea7n nh\u01b0 100%<\/li>Mi\u1ec5n ph\u00ed: B\u1ea1n kh\u00f4ng ph\u1ea3i m\u1ea5t ti\u1ec1n \u0111\u1ec3 s\u1eed d\u1ee5ng d\u1ecbch v\u1ee5 n\u00e0y. Th\u00eam v\u00e0o \u0111\u00f3 b\u1ea1n c\u0169ng gi\u00fap gi\u1ea3m b\u0103ng th\u00f4ng cho host c\u1ee7a b\u1ea1n<\/li>\u0110\u01a1n gi\u1ea3n: Code nh\u00fang c\u1ee7a n\u00f3 th\u1eadm ch\u00ed c\u00f2n \u0111\u01a1n gi\u1ea3n h\u01a1n @font-face. K\u1ebft qu\u1ea3 demo b\u1ea1n c\u00f3 th\u1ec3 xem ngay \u1edf d\u01b0\u1edbi.<\/li><\/ul>\n\n\n\nBlog Duc Anh Plus – Nguyen Duc Anh<\/div>\n\n\n\nC\u00e1ch l\u00e0m: <\/p>\n\n\n\nTruy c\u1eadp trang web <\/a>https:\/\/fonts.google.com\/<\/a> \u0111\u1ec3 ch\u1ecdn font m\u00e0 b\u1ea1n th\u00edch. Sau \u0111\u00f3 nh\u1ea5n v\u00e0o h\u00ecnh m\u0169i t\u00ean tr\u1ecf (Quick-use)<\/li><\/ul>\n\n\n\n<\/figure><\/div>\n\n\nM\u1ed9t c\u1eeda s\u1ed5 b\u1eadt ra, v\u00e0 Google cho b\u1ea1n \u0111o\u1ea1n code \u0111\u1ec3 \u0111\u01b0a v\u00e0o trong th\u1ebb head c\u1ee7a trang HTML (n\u00f3 g\u1ea7n gi\u1ed1ng v\u1edbi li\u00ean k\u1ebft CSS), code \u0111\u00f3 c\u00f3 d\u1ea1ng nh\u01b0 sau: <link href=\u2019http:\/\/fonts.googleapis.com\/css?family=Ruge+Boogie\u2019 rel=\u2019stylesheet\u2019 type=\u2019text\/css\u2019> <\/strong><\/li>B\u1ea1n c\u00f3 th\u1ec3 th\u1ea5y t\u00ean font trong v\u00ed d\u1ee5 n\u00e0y l\u00e0 Ruge Boogie, ti\u1ebfp theo, mu\u1ed1n s\u1eed d\u1ee5ng font n\u00e0y, th\u00ec trong CSS, b\u1ea1n vi\u1ebft nh\u01b0 sau: body {font-family: \u2018Ruge Boogie\u2019, cursive;font-size:20px;}<\/strong><\/li>Nh\u01b0 v\u1eady l\u00e0 \u0111\u00e3 xong r\u1ed3i, r\u1ea5t \u0111\u01a1n gi\u1ea3n ph\u1ea3i kh\u00f4ng. Th\u00f4ng tin th\u00eam l\u00e0 Google Font c\u00f3 kho\u1ea3ng h\u01a1n 600 font, nh\u01b0ng font ti\u1ebfng Vi\u1ec7t th\u00ec kh\u00f4ng nhi\u1ec1u l\u1eafm<\/li><\/ul>\n\n\n\nM\u1ed9t s\u1ed1 l\u01b0u \u00fd:<\/p>\n\n\n\nGoogle Font c\u00f3 \u0111\u1ebfn 3 ki\u1ec3u nh\u00fang: ti\u00eau chu\u1ea9n l\u00e0 ki\u1ec3u link \u1edf tr\u00ean, th\u1ee9 hai l\u00e0 @import v\u00e0 cu\u1ed1i c\u00f9ng l\u00e0 d\u00f9ng JavaScript \u2013 c\u1ea3 3 \u0111\u1ec1u cho k\u1ebft qu\u1ea3 t\u01b0\u01a1ng \u0111\u01b0\u01a1ng nhau, nh\u01b0ng ki\u1ec3u \u0111\u1ea7u ti\u00ean \u0111\u01b0\u1ee3c khuy\u00ean d\u00f9ng.<\/li>N\u1ebfu mu\u1ed1n \u0111\u1ed3ng b\u1ed9 h\u00f3a font tr\u00ean Google Font v\u1edbi Desktop h\u00e3y s\u1eed d\u1ee5ng ti\u1ec7n \u00edch SkyFonts<\/a>.<\/li>L\u1eddi cu\u1ed1i: h\u00e3y th\u1eadn tr\u1ecdng v\u1edbi nh\u00fang font t\u00f9y ch\u1ec9nh, \u0111\u1eebng nh\u00fang qu\u00e1 nhi\u1ec1u font kh\u00e1c nhau, v\u00ec nh\u00fang font ngh\u0129a l\u00e0 ng\u01b0\u1eddi d\u00f9ng ph\u1ea3i t\u1ea3i font v\u1ec1, nh\u00fang c\u00e1c font qu\u00e1 n\u1eb7ng ch\u1eafc ch\u1eafn l\u00e0m t\u0103ng th\u1eddi gian t\u1ea3i trang, c\u00e1i n\u00e0y l\u00e0 \u00e1p d\u1ee5ng chung ch\u1ee9 kh\u00f4ng ri\u00eang g\u00ec cho Google Font. Ngo\u00e0i ra qu\u00e1 nhi\u1ec1u font kh\u00e1c nhau tr\u00ean trang s\u1ebd g\u00e2y t\u00e1c d\u1ee5ng ng\u01b0\u1ee3c v\u1ec1 m\u1eb7t th\u1ea9m m\u1ef9.<\/li><\/ul>\n\n\n\nTr\u1ea3 l\u1eddi c\u00e2u h\u1ecfi ph\u1ee5 (M\u00e0 c\u0169ng c\u00f3 khi l\u00e0 ch\u00ednh)<\/h3>\n\n\n\nT\u00f4i c\u00f3 th\u1ec3 t\u00ecm font \u0111\u1ed9c v\u00e0 l\u1ea1 \u1edf \u0111\u00e2u?<\/strong> => Tr\u00ean m\u1ea1ng c\u00f3 r\u1ea5t nhi\u1ec1u trang web cung c\u1ea5p font mi\u1ec5n ph\u00ed cho ph\u00e9p b\u1ea1n t\u1ea3i v\u1ec1. B\u1ea1n kh\u00f4ng n\u00ean t\u1ea3i font c\u00f3 ph\u00ed b\u1ea5t h\u1ee3p ph\u00e1p v\u00ec n\u00f3 c\u00f3 th\u1ec3 l\u00e0m \u1ea3nh h\u01b0\u1edfng r\u1ea5t x\u1ea5u \u0111\u1ebfn trang web c\u1ee7a b\u1ea1n n\u1ebfu ch\u1ee7 s\u1edf h\u1eefu font kh\u1edfi ki\u1ec7n. Nhi\u1ec1u font mi\u1ec5n ph\u00ed ch\u1ea5t l\u01b0\u1ee3ng t\u01b0\u01a1ng \u0111\u01b0\u01a1ng th\u00ec t\u1ed9i g\u00ec ch\u00fang ta t\u1ea3i l\u1eadu \u0111\u00fang kh\u00f4ng \u1ea1? B\u1ea1n c\u00f3 th\u1ec3 v\u00e0o trang http:\/\/www.dafont.com\/<\/a> \u0111\u1ec3 t\u00ecm font \u01b0a th\u00edch nh\u00e9.<\/li>Font \u0111\u1eb9p cho ti\u1ebfng Vi\u1ec7t c\u00f3 nhi\u1ec1u kh\u00f4ng? <\/strong>=> \u0110\u00e1ng ti\u1ebfc l\u00e0 kh\u00f4ng! B\u1ea1n c\u00f3 kh\u00e1 \u00edt l\u1ef1a ch\u1ecdn \u0111\u1ed9c \u0111\u00e1o v\u1edbi ti\u1ebfng Vi\u1ec7t. \u1ede ph\u00eda ng\u01b0\u1ee3c l\u1ea1i, ti\u1ebfng Anh v\u00e0 c\u00e1c ng\u00f4n ng\u1eef ch\u00e2u \u00c2u n\u00f3i chung l\u1ea1i r\u1ea5t phong ph\u00fa.<\/li>T\u1ea1i sao t\u00f4i nh\u00fang m\u00e3i font m\u00e0 ch\u1eb3ng \u0111\u01b0\u1ee3c, tr\u00ecnh duy\u1ec7t l\u1edfm r\u1ed3i, b\u1ef1c m\u00ecnh qu\u00e1!<\/strong> => B\u1ea1n n\u00ean d\u00f9ng Google Chrome ho\u1eb7c FireFox \u0111\u1ec3 ki\u1ec3m tra nh\u00fang th\u00e0nh c\u00f4ng hay ch\u01b0a. C\u1ea3 2 tr\u00ecnh duy\u1ec7t n\u00e0y m\u00e0 kh\u00f4ng th\u00e0nh c\u00f4ng th\u00ec l\u00e0 t\u1ea1i b\u1ea1n nh\u00fang sai ch\u1ee9 kh\u00f4ng ph\u1ea3i t\u1ea1i tr\u00ecnh duy\u1ec7t. L\u1ed7i kh\u00f4ng nh\u00fang \u0111\u01b0\u1ee3c font, 10 ng\u01b0\u1eddi th\u00ec 9 ng\u01b0\u1eddi l\u00e0 do sai \u0111\u01b0\u1eddng d\u1eabn \u1edf c\u00e1i src: url<\/em>(\u2018\u0111\u01b0\u1eddng d\u1eabn font\u2019). N\u1ebfu Font nh\u00fang \u0111\u1ec3 c\u00f9ng c\u1ea5p v\u1edbi file HTML \u0111\u01b0\u1eddng d\u1eabn s\u1ebd kh\u00e1c v\u1edbi Font nh\u00fang b\u1ea1n \u0111\u1ec3 \u1edf trong th\u01b0 m\u1ee5c Font ri\u00eang. M\u00ecnh t\u1eebng b\u1ecb r\u1ed3i, kh\u00f4ng bi\u1ebft th\u1ebf l\u00e0 loay hoay c\u1ea3 ti\u1ebfng!<\/li>T\u00f4i c\u00f3 m\u1ed7i font \u0111\u1ecbnh d\u1ea1ng .ttf, l\u00e0m sao \u0111\u1ec3 t\u00f4i c\u00f3 \u0111\u1ecbnh d\u1ea1ng .eot cho \u00f4ng b\u1ea1n IE b\u00e2y gi\u1edd?<\/strong> => Gi\u1ed1ng nh\u01b0 video c\u00f3 th\u1ec3 chuy\u1ec3n \u0111\u1ed5i (convert) \u0111\u1ecbnh d\u1ea1ng, font c\u0169ng v\u1eady. B\u1ea1n c\u00f3 th\u1ec3 search tr\u00ean m\u1ea1ng ho\u1eb7c v\u00f4 trang n\u00e0y \u0111\u1ec3 chuy\u1ec3n \u0111\u1ed5i: http:\/\/www.fontsquirrel.com\/tools\/webfont-generator<\/a><\/li>T\u00f4i th\u1ea5y v\u00e0i font r\u1ea5t \u0111\u1eb9p tr\u00ean m\u1ed9t s\u1ed1 trang web, t\u00f4i mu\u1ed1n d\u00f9ng m\u1ea5y font \u0111\u00f3 nh\u01b0ng kh\u00f4ng bi\u1ebft th\u00f4ng tin v\u1ec1 n\u00f3, v\u1eady t\u00f4i ph\u1ea3i l\u00e0m g\u00ec?<\/strong> => \u0110\u1ec3 t\u00ecm m\u1ed9t font n\u00e0o \u0111\u00f3 th\u00ec c\u00e1ch \u0111\u01a1n gi\u1ea3n nh\u1ea5t l\u00e0 bi\u1ebft t\u00ean c\u1ee7a font, r\u1ed3i google \u0111\u1ec3 t\u1ea3i v\u1ec1. C\u00f3 m\u1ed9t ti\u1ec7n \u00edch m\u1edf r\u1ed9ng cho tr\u00ecnh duy\u1ec7t Google Chrome t\u00ean l\u00e0 WhatFont<\/a> gi\u00fap b\u1ea1n l\u00e0m \u0111\u01b0\u1ee3c \u0111i\u1ec1u \u0111\u00f3. \u0110\u1ecba ch\u1ec9 \u1edf link v\u1eeba d\u1eabn. C\u00e1ch s\u1eed d\u1ee5ng r\u1ea5t \u0111\u01a1n gi\u1ea3n, b\u1ea1n ch\u1ec9 c\u1ea7n di chu\u1ed9t qua ch\u1eef c\u1ea7n bi\u1ebft font, n\u00f3 s\u1ebd th\u00f4ng b\u00e1o t\u00ean font cho b\u1ea1n, ngo\u00e0i ra b\u1ea1n s\u1ebd bi\u1ebft th\u00eam c\u00e1c th\u00f4ng tin kh\u00e1c nh\u01b0 k\u00edch c\u1ee1, line height v\u00e0 m\u00e0u ch\u1eef \u0111ang d\u00f9ng.<\/li><\/ul>\n\n\n\n<\/figure><\/div>\n\n\n<\/p>\n","protected":false},"excerpt":{"rendered":"Th\u1ef1c ra th\u1ebf gi\u1edbi web kh\u00f4ng d\u00f9ng nhi\u1ec1u font, b\u1ea1n s\u1ebd b\u1ea5t ng\u1edd khi bi\u1ebft c\u00f3 \u0111\u1ebfn 100 ng\u00e0n c\u00e1c lo\u1ea1i font ch\u1eef kh\u00e1c nhau, nh\u01b0ng h\u00e0ng t\u1ef7 trang web m\u00e0 ch\u00fang ta th\u1ea5y ng\u00e0y nay v\u1eabn ch\u1ec9 d\u00f9ng kho\u1ea3ng 10 font ph\u1ed5 bi\u1ebfn – c\u00f2n g\u1ecdi l\u00e0 font web an to\u00e0n (web safe font). …<\/p>\n","protected":false},"author":1,"featured_media":1205,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[229],"tags":[],"yoast_head":"\nC\u00e1ch nh\u00fang font v\u00e0o web v\u1edbi @font-face, k\u1ef7 nguy\u00ean c\u1ee7a Typography \u0111\u00e3 \u0111\u1ebfn • Ki\u1ebfn c\u00e0ng<\/title>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\t\n","yoast_head_json":{"title":"C\u00e1ch nh\u00fang font v\u00e0o web v\u1edbi @font-face, k\u1ef7 nguy\u00ean c\u1ee7a Typography \u0111\u00e3 \u0111\u1ebfn • 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\/nhung-font-web-font-face\/","og_locale":"vi_VN","og_type":"article","og_title":"C\u00e1ch nh\u00fang font v\u00e0o web v\u1edbi @font-face, k\u1ef7 nguy\u00ean c\u1ee7a Typography \u0111\u00e3 \u0111\u1ebfn • Ki\u1ebfn c\u00e0ng","og_description":"Th\u1ef1c ra th\u1ebf gi\u1edbi web kh\u00f4ng d\u00f9ng nhi\u1ec1u font, b\u1ea1n s\u1ebd b\u1ea5t ng\u1edd khi bi\u1ebft c\u00f3 \u0111\u1ebfn 100 ng\u00e0n c\u00e1c lo\u1ea1i font ch\u1eef kh\u00e1c nhau, nh\u01b0ng h\u00e0ng t\u1ef7 trang web m\u00e0 ch\u00fang ta th\u1ea5y ng\u00e0y nay v\u1eabn ch\u1ec9 d\u00f9ng kho\u1ea3ng 10 font ph\u1ed5 bi\u1ebfn – c\u00f2n g\u1ecdi l\u00e0 font web an to\u00e0n (web safe font). …","og_url":"https:\/\/kiencang.net\/nhung-font-web-font-face\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2013-07-10T17:08:00+00:00","article_modified_time":"2022-08-20T08:59:14+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":"8 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/nhung-font-web-font-face\/","url":"https:\/\/kiencang.net\/nhung-font-web-font-face\/","name":"C\u00e1ch nh\u00fang font v\u00e0o web v\u1edbi @font-face, k\u1ef7 nguy\u00ean c\u1ee7a Typography \u0111\u00e3 \u0111\u1ebfn • Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2013-07-10T17:08:00+00:00","dateModified":"2022-08-20T08:59:14+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/nhung-font-web-font-face\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/nhung-font-web-font-face\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/nhung-font-web-font-face\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"C\u00e1ch nh\u00fang font v\u00e0o web v\u1edbi @font-face, k\u1ef7 nguy\u00ean c\u1ee7a Typography \u0111\u00e3 \u0111\u1ebfn"}]},{"@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\/325"}],"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=325"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/325\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=325"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=325"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=325"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
@font-face<\/code> trong CSS \u0111\u00e3 m\u1edf bung s\u1ee9c s\u00e1ng t\u1ea1o c\u1ee7a nh\u00e0 thi\u1ebft k\u1ebf, k\u1ebft h\u1ee3p v\u1edbi c\u00e1c kh\u1ea3 n\u0103ng c\u1ee7a CSS3, typography<\/b> tr\u00ean web \u0111\u00e3 l\u00ean m\u1ed9t t\u1ea7m cao m\u1edbi.<\/p>\n\n\n\nP\/S: Tuy nhi\u00ean vi\u1ec7c nh\u00fang font web c\u00f3 th\u1ec3 \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn \u00edt nhi\u1ec1u \u0111\u1ebfn t\u1ed1c \u0111\u1ed9 website<\/a>. H\u00e3y c\u00e2n b\u1eb1ng th\u1ea9m m\u1ef9 v\u00e0 t\u1ed1c \u0111\u1ed9, v\u00ec th\u1eddi gian t\u1ea3i trang \u0111\u00f3ng vai tr\u00f2 r\u1ea5t quan tr\u1ecdng trong vi\u1ec7c gi\u1eef ch\u00e2n ng\u01b0\u1eddi d\u00f9ng.<\/p>\n\n\n\n\n\n\n\n<\/span>Code m\u1eabu nh\u00fang font<\/span><\/h2>\n\n\n\n\u0110o\u1ea1n code sau \u0111\u00e2y \u0111\u01b0\u1ee3c \u0111\u01b0a v\u00e0o file CSS, \u0111\u1eebng lo n\u1ebfu b\u1ea1n kh\u00f4ng hi\u1ec3u lu\u00f4n, ngay ph\u00eda d\u01b0\u1edbi c\u00f3 ph\u1ea7n gi\u1ea3i th\u00edch chi ti\u1ebft:<\/p>\n\n\n\n@font-face {\n font-family:font_strong;\n src:url('..\/fonts\/Captureit.ttf') format('truetype'),\n url('..\/fonts\/Captureit.eot#iefix') format('embedded-opentype'),\n url('..\/fonts\/Captureit.woff') format('woff');\n font-weight:normal;\n font-style:normal;\n}<\/code><\/pre>\n\n\n\nV\u1edbi code tr\u00ean th\u00ec c\u1ea5u tr\u00fac th\u01b0 m\u1ee5c trang web c\u1ee7a b\u1ea1n ph\u1ea3i gi\u1ed1ng nh\u01b0 h\u00ecnh sau:<\/p>\n\n\n\n<\/figure><\/div>\n\n\n\u0110\u00e2y l\u00e0 c\u1ea5u tr\u00fac m\u00e0 \u0111a s\u1ed1 m\u1ecdi ng\u01b0\u1eddi th\u01b0\u1eddng d\u00f9ng, trong \u0111\u00f3 c\u00e1c file html \u1edf b\u00ean ngo\u00e0i, v\u00e0 t\u1eebng ph\u1ea7n chuy\u00ean bi\u1ec7t c\u00f3 th\u01b0 m\u1ee5c ri\u00eang nh\u01b0 css \u0111\u1ec3 ch\u1ee9a c\u00e1c file CSS, fonts \u0111\u1ec3 ch\u1ee9a c\u00e1c Fonts l\u1ea1 m\u1eaft c\u1ee7a ch\u00fang ta…<\/p>\n\n\n\n\n\n\n\n<\/span>Gi\u1ea3i th\u00edch code<\/span><\/h2>\n\n\n\nD\u00f2ng \u0111\u1ea7u ti\u00ean: font-family:font_strong<\/code><\/span> l\u00e0 t\u00ean m\u00e0 ta mu\u1ed1n \u0111\u1eb7t cho font m\u00ecnh nh\u00fang, b\u1ea1n \u0111\u1eb7t t\u00ean nh\u01b0 th\u1ebf n\u00e0o l\u00e0 t\u00f9y \u00fd b\u1ea1n.<\/li>D\u00f2ng th\u1ee9 hai src:url('..\/fonts\/Captureit.ttf')<\/code><\/span> \u0111\u00e2y l\u00e0 ngu\u1ed3n d\u1eabn c\u1ee7a font. B\u1ea1n ch\u00fa \u00fd 2 d\u1ea5u ch\u1ea5m v\u00e0 thanh xu\u1ed9c. \u0110\u01b0\u1eddng d\u1eabn sai th\u00ec ch\u1eafc ch\u1eafn s\u1ebd kh\u00f4ng l\u00ean cho n\u00ean ph\u1ea7n n\u00e0y ph\u1ea3i \u0111\u1eb7c bi\u1ec7t ch\u00fa \u00fd th\u1ef1c hi\u1ec7n th\u1eadt ch\u00ednh x\u00e1c. format('truetype')<\/code><\/span> l\u00e0 \u0111\u1ecbnh d\u1ea1ng c\u1ee7a font, \u0111u\u00f4i .ttf l\u00e0 truetype.<\/li>C\u00e1c d\u00f2ng ti\u1ebfp theo url('..\/fonts\/Captureit.eot#iefix') format('embedded-opentype') url('..\/fonts\/Captureit.woff') format('woff');<\/code><\/span> c\u0169ng t\u01b0\u01a1ng t\u1ef1, ch\u1ec9 kh\u00e1c \u0111\u00e2y l\u00e0 \u0111\u1ecbnh d\u1ea1ng font kh\u00e1c. N\u1ebfu b\u1ea1n ch\u1ec9 c\u00f3 font .ttf th\u00ec ch\u1ea1y tr\u00ean Google Chrome v\u00e0 FireFox th\u00ec \u0111\u01b0\u1ee3c nh\u01b0ng s\u1ebd kh\u00f4ng ch\u1ea1y \u0111\u01b0\u1ee3c tr\u00ean IE. \u0110\u1ec3 ch\u1ea1y \u0111\u01b0\u1ee3c tr\u00ean IE ph\u1ea3i c\u00f3 font d\u1ea1ng .eot<\/li>font-weight:normal; font-style:normal;<\/code><\/span> ngh\u0129a l\u00e0 b\u1ea1n \u0111\u1ec3 font \u1edf d\u1ea1ng th\u01b0\u1eddng (regular), kh\u00f4ng \u0111\u1eadm, kh\u00f4ng nh\u1ea1t.<\/li><\/ul>\n\n\n\nV\u1eady l\u00e0 xong, gi\u1edd ta d\u00f9ng font c\u0169ng y nh\u01b0 b\u00ecnh th\u01b0\u1eddng, ngh\u0129a l\u00e0 ch\u1ed7 n\u00e0o c\u1ea7n d\u00f9ng font nh\u00fang ta khai b\u00e1o font-family l\u00e0 t\u00ean font m\u00e0 ta \u0111\u00e3 \u0111\u1eb7t v\u1eeba n\u00e3y l\u00e0 \u0111\u01b0\u1ee3c, gi\u1ea3 d\u1ee5 gi\u1edd t\u00f4i \u0111\u1eb7t c\u00e1c ti\u00eau \u0111\u1ec1 .title l\u00e0 font nh\u00fang \u1edf tr\u00ean th\u00ec t\u00f4i vi\u1ebft nh\u01b0 sau trong CSS:<\/p>\n\n\n\n.title {font-family:font_strong;}<\/code><\/pre>\n\n\n\n\n\n\n\n<\/span>Tr\u00ecnh duy\u1ec7t h\u1ed7 tr\u1ee3<\/span><\/h2>\n\n\n\nT\u1ea5t c\u1ea3 c\u00e1c tr\u00ecnh duy\u1ec7t ph\u1ed5 th\u00f4ng g\u1ed3m Chrome, FireFox, Opera, Safari v\u00e0 IE \u0111\u1ec1u h\u1ed7 tr\u1ee3 nh\u00fang font, tuy nhi\u00ean lo\u1ea1i font m\u00e0 ch\u00fang support th\u00ec c\u00f3 kh\u00e1c nhau.<\/p>\n\n\n\nInternet Explorer 9+, Firefox, Chrome, Safari v\u00e0 Opera h\u1ed7 tr\u1ee3 WOFF (Web Open Font Format) font.<\/li>Firefox, Chrome, Safari v\u00e0 Opera c\u0169ng h\u1ed7 tr\u1ee3 TTF (True Type Fonts) v\u00e0 OTF (OpenType Fonts).<\/li>Chrome, Safari v\u00e0 Opera h\u1ed7 tr\u1ee3 SVG fonts\/shapes.<\/li>Internet Explorer h\u1ed7 tr\u1ee3 EOT (Embedded OpenType) fonts.<\/li><\/ul>\n\n\n\n\n\n\n\n<\/span>Nh\u00fang font tr\u1ef1c tuy\u1ebfn<\/span><\/h2>\n\n\n\nC\u00e1i n\u00e0y v\u1eeba c\u00f3 \u0111i\u1ec3m gi\u1ed1ng v\u1edbi @font-face m\u00e0 c\u0169ng v\u1eeba kh\u00e1c n\u1eefa:<\/p>\n\n\n\nGi\u1ed1ng \u1edf ch\u1ed7, font s\u1eed d\u1ee5ng \u0111\u1ec1u t\u1ea3i t\u1eeb n\u01a1i kh\u00e1c v\u1ec1, v\u00e0 \u0111\u01b0\u1ee3c d\u1ef1 tr\u00f9 l\u00e0 kh\u00f4ng c\u00f3 tr\u00ean m\u00e1y ng\u01b0\u1eddi d\u00f9ng<\/li>Kh\u00e1c \u1edf ch\u1ed7, @font-face l\u00e0 t\u1ea3i t\u1eeb host c\u1ee7a b\u1ea1n, trong khi nh\u00fang font tr\u1ef1c tuy\u1ebfn th\u00ec t\u1ea3i t\u1eeb server d\u1ecbch v\u1ee5 ri\u00eang<\/li><\/ul>\n\n\n\nH\u00f4m nay t\u00f4i s\u1ebd gi\u1edbi thi\u1ec7u v\u1edbi c\u00e1c b\u1ea1n c\u00e1ch nh\u00fang font b\u1eb1ng Google Font, \u01b0u \u0111i\u1ec3m: <\/p>\n\n\n\nNhanh, \u0111\u1ea3m b\u1ea3o: V\u00e2ng, v\u00ec n\u00f3 l\u00e0 host c\u1ee7a Google, n\u00ean t\u1ed1c \u0111\u1ed9 \u1ed5n \u0111\u1ecbnh, h\u1ea7u nh\u01b0 kh\u00f4ng b\u1ecb h\u1ecfng h\u00f3c, n\u00ean b\u1ea1n c\u00f3 th\u1ec3 an t\u00e2m g\u1ea7n nh\u01b0 100%<\/li>Mi\u1ec5n ph\u00ed: B\u1ea1n kh\u00f4ng ph\u1ea3i m\u1ea5t ti\u1ec1n \u0111\u1ec3 s\u1eed d\u1ee5ng d\u1ecbch v\u1ee5 n\u00e0y. Th\u00eam v\u00e0o \u0111\u00f3 b\u1ea1n c\u0169ng gi\u00fap gi\u1ea3m b\u0103ng th\u00f4ng cho host c\u1ee7a b\u1ea1n<\/li>\u0110\u01a1n gi\u1ea3n: Code nh\u00fang c\u1ee7a n\u00f3 th\u1eadm ch\u00ed c\u00f2n \u0111\u01a1n gi\u1ea3n h\u01a1n @font-face. K\u1ebft qu\u1ea3 demo b\u1ea1n c\u00f3 th\u1ec3 xem ngay \u1edf d\u01b0\u1edbi.<\/li><\/ul>\n\n\n\nBlog Duc Anh Plus – Nguyen Duc Anh<\/div>\n\n\n\nC\u00e1ch l\u00e0m: <\/p>\n\n\n\nTruy c\u1eadp trang web <\/a>https:\/\/fonts.google.com\/<\/a> \u0111\u1ec3 ch\u1ecdn font m\u00e0 b\u1ea1n th\u00edch. Sau \u0111\u00f3 nh\u1ea5n v\u00e0o h\u00ecnh m\u0169i t\u00ean tr\u1ecf (Quick-use)<\/li><\/ul>\n\n\n\n<\/figure><\/div>\n\n\nM\u1ed9t c\u1eeda s\u1ed5 b\u1eadt ra, v\u00e0 Google cho b\u1ea1n \u0111o\u1ea1n code \u0111\u1ec3 \u0111\u01b0a v\u00e0o trong th\u1ebb head c\u1ee7a trang HTML (n\u00f3 g\u1ea7n gi\u1ed1ng v\u1edbi li\u00ean k\u1ebft CSS), code \u0111\u00f3 c\u00f3 d\u1ea1ng nh\u01b0 sau: <link href=\u2019http:\/\/fonts.googleapis.com\/css?family=Ruge+Boogie\u2019 rel=\u2019stylesheet\u2019 type=\u2019text\/css\u2019> <\/strong><\/li>B\u1ea1n c\u00f3 th\u1ec3 th\u1ea5y t\u00ean font trong v\u00ed d\u1ee5 n\u00e0y l\u00e0 Ruge Boogie, ti\u1ebfp theo, mu\u1ed1n s\u1eed d\u1ee5ng font n\u00e0y, th\u00ec trong CSS, b\u1ea1n vi\u1ebft nh\u01b0 sau: body {font-family: \u2018Ruge Boogie\u2019, cursive;font-size:20px;}<\/strong><\/li>Nh\u01b0 v\u1eady l\u00e0 \u0111\u00e3 xong r\u1ed3i, r\u1ea5t \u0111\u01a1n gi\u1ea3n ph\u1ea3i kh\u00f4ng. Th\u00f4ng tin th\u00eam l\u00e0 Google Font c\u00f3 kho\u1ea3ng h\u01a1n 600 font, nh\u01b0ng font ti\u1ebfng Vi\u1ec7t th\u00ec kh\u00f4ng nhi\u1ec1u l\u1eafm<\/li><\/ul>\n\n\n\nM\u1ed9t s\u1ed1 l\u01b0u \u00fd:<\/p>\n\n\n\nGoogle Font c\u00f3 \u0111\u1ebfn 3 ki\u1ec3u nh\u00fang: ti\u00eau chu\u1ea9n l\u00e0 ki\u1ec3u link \u1edf tr\u00ean, th\u1ee9 hai l\u00e0 @import v\u00e0 cu\u1ed1i c\u00f9ng l\u00e0 d\u00f9ng JavaScript \u2013 c\u1ea3 3 \u0111\u1ec1u cho k\u1ebft qu\u1ea3 t\u01b0\u01a1ng \u0111\u01b0\u01a1ng nhau, nh\u01b0ng ki\u1ec3u \u0111\u1ea7u ti\u00ean \u0111\u01b0\u1ee3c khuy\u00ean d\u00f9ng.<\/li>N\u1ebfu mu\u1ed1n \u0111\u1ed3ng b\u1ed9 h\u00f3a font tr\u00ean Google Font v\u1edbi Desktop h\u00e3y s\u1eed d\u1ee5ng ti\u1ec7n \u00edch SkyFonts<\/a>.<\/li>L\u1eddi cu\u1ed1i: h\u00e3y th\u1eadn tr\u1ecdng v\u1edbi nh\u00fang font t\u00f9y ch\u1ec9nh, \u0111\u1eebng nh\u00fang qu\u00e1 nhi\u1ec1u font kh\u00e1c nhau, v\u00ec nh\u00fang font ngh\u0129a l\u00e0 ng\u01b0\u1eddi d\u00f9ng ph\u1ea3i t\u1ea3i font v\u1ec1, nh\u00fang c\u00e1c font qu\u00e1 n\u1eb7ng ch\u1eafc ch\u1eafn l\u00e0m t\u0103ng th\u1eddi gian t\u1ea3i trang, c\u00e1i n\u00e0y l\u00e0 \u00e1p d\u1ee5ng chung ch\u1ee9 kh\u00f4ng ri\u00eang g\u00ec cho Google Font. Ngo\u00e0i ra qu\u00e1 nhi\u1ec1u font kh\u00e1c nhau tr\u00ean trang s\u1ebd g\u00e2y t\u00e1c d\u1ee5ng ng\u01b0\u1ee3c v\u1ec1 m\u1eb7t th\u1ea9m m\u1ef9.<\/li><\/ul>\n\n\n\nTr\u1ea3 l\u1eddi c\u00e2u h\u1ecfi ph\u1ee5 (M\u00e0 c\u0169ng c\u00f3 khi l\u00e0 ch\u00ednh)<\/h3>\n\n\n\nT\u00f4i c\u00f3 th\u1ec3 t\u00ecm font \u0111\u1ed9c v\u00e0 l\u1ea1 \u1edf \u0111\u00e2u?<\/strong> => Tr\u00ean m\u1ea1ng c\u00f3 r\u1ea5t nhi\u1ec1u trang web cung c\u1ea5p font mi\u1ec5n ph\u00ed cho ph\u00e9p b\u1ea1n t\u1ea3i v\u1ec1. B\u1ea1n kh\u00f4ng n\u00ean t\u1ea3i font c\u00f3 ph\u00ed b\u1ea5t h\u1ee3p ph\u00e1p v\u00ec n\u00f3 c\u00f3 th\u1ec3 l\u00e0m \u1ea3nh h\u01b0\u1edfng r\u1ea5t x\u1ea5u \u0111\u1ebfn trang web c\u1ee7a b\u1ea1n n\u1ebfu ch\u1ee7 s\u1edf h\u1eefu font kh\u1edfi ki\u1ec7n. Nhi\u1ec1u font mi\u1ec5n ph\u00ed ch\u1ea5t l\u01b0\u1ee3ng t\u01b0\u01a1ng \u0111\u01b0\u01a1ng th\u00ec t\u1ed9i g\u00ec ch\u00fang ta t\u1ea3i l\u1eadu \u0111\u00fang kh\u00f4ng \u1ea1? B\u1ea1n c\u00f3 th\u1ec3 v\u00e0o trang http:\/\/www.dafont.com\/<\/a> \u0111\u1ec3 t\u00ecm font \u01b0a th\u00edch nh\u00e9.<\/li>Font \u0111\u1eb9p cho ti\u1ebfng Vi\u1ec7t c\u00f3 nhi\u1ec1u kh\u00f4ng? <\/strong>=> \u0110\u00e1ng ti\u1ebfc l\u00e0 kh\u00f4ng! B\u1ea1n c\u00f3 kh\u00e1 \u00edt l\u1ef1a ch\u1ecdn \u0111\u1ed9c \u0111\u00e1o v\u1edbi ti\u1ebfng Vi\u1ec7t. \u1ede ph\u00eda ng\u01b0\u1ee3c l\u1ea1i, ti\u1ebfng Anh v\u00e0 c\u00e1c ng\u00f4n ng\u1eef ch\u00e2u \u00c2u n\u00f3i chung l\u1ea1i r\u1ea5t phong ph\u00fa.<\/li>T\u1ea1i sao t\u00f4i nh\u00fang m\u00e3i font m\u00e0 ch\u1eb3ng \u0111\u01b0\u1ee3c, tr\u00ecnh duy\u1ec7t l\u1edfm r\u1ed3i, b\u1ef1c m\u00ecnh qu\u00e1!<\/strong> => B\u1ea1n n\u00ean d\u00f9ng Google Chrome ho\u1eb7c FireFox \u0111\u1ec3 ki\u1ec3m tra nh\u00fang th\u00e0nh c\u00f4ng hay ch\u01b0a. C\u1ea3 2 tr\u00ecnh duy\u1ec7t n\u00e0y m\u00e0 kh\u00f4ng th\u00e0nh c\u00f4ng th\u00ec l\u00e0 t\u1ea1i b\u1ea1n nh\u00fang sai ch\u1ee9 kh\u00f4ng ph\u1ea3i t\u1ea1i tr\u00ecnh duy\u1ec7t. L\u1ed7i kh\u00f4ng nh\u00fang \u0111\u01b0\u1ee3c font, 10 ng\u01b0\u1eddi th\u00ec 9 ng\u01b0\u1eddi l\u00e0 do sai \u0111\u01b0\u1eddng d\u1eabn \u1edf c\u00e1i src: url<\/em>(\u2018\u0111\u01b0\u1eddng d\u1eabn font\u2019). N\u1ebfu Font nh\u00fang \u0111\u1ec3 c\u00f9ng c\u1ea5p v\u1edbi file HTML \u0111\u01b0\u1eddng d\u1eabn s\u1ebd kh\u00e1c v\u1edbi Font nh\u00fang b\u1ea1n \u0111\u1ec3 \u1edf trong th\u01b0 m\u1ee5c Font ri\u00eang. M\u00ecnh t\u1eebng b\u1ecb r\u1ed3i, kh\u00f4ng bi\u1ebft th\u1ebf l\u00e0 loay hoay c\u1ea3 ti\u1ebfng!<\/li>T\u00f4i c\u00f3 m\u1ed7i font \u0111\u1ecbnh d\u1ea1ng .ttf, l\u00e0m sao \u0111\u1ec3 t\u00f4i c\u00f3 \u0111\u1ecbnh d\u1ea1ng .eot cho \u00f4ng b\u1ea1n IE b\u00e2y gi\u1edd?<\/strong> => Gi\u1ed1ng nh\u01b0 video c\u00f3 th\u1ec3 chuy\u1ec3n \u0111\u1ed5i (convert) \u0111\u1ecbnh d\u1ea1ng, font c\u0169ng v\u1eady. B\u1ea1n c\u00f3 th\u1ec3 search tr\u00ean m\u1ea1ng ho\u1eb7c v\u00f4 trang n\u00e0y \u0111\u1ec3 chuy\u1ec3n \u0111\u1ed5i: http:\/\/www.fontsquirrel.com\/tools\/webfont-generator<\/a><\/li>T\u00f4i th\u1ea5y v\u00e0i font r\u1ea5t \u0111\u1eb9p tr\u00ean m\u1ed9t s\u1ed1 trang web, t\u00f4i mu\u1ed1n d\u00f9ng m\u1ea5y font \u0111\u00f3 nh\u01b0ng kh\u00f4ng bi\u1ebft th\u00f4ng tin v\u1ec1 n\u00f3, v\u1eady t\u00f4i ph\u1ea3i l\u00e0m g\u00ec?<\/strong> => \u0110\u1ec3 t\u00ecm m\u1ed9t font n\u00e0o \u0111\u00f3 th\u00ec c\u00e1ch \u0111\u01a1n gi\u1ea3n nh\u1ea5t l\u00e0 bi\u1ebft t\u00ean c\u1ee7a font, r\u1ed3i google \u0111\u1ec3 t\u1ea3i v\u1ec1. C\u00f3 m\u1ed9t ti\u1ec7n \u00edch m\u1edf r\u1ed9ng cho tr\u00ecnh duy\u1ec7t Google Chrome t\u00ean l\u00e0 WhatFont<\/a> gi\u00fap b\u1ea1n l\u00e0m \u0111\u01b0\u1ee3c \u0111i\u1ec1u \u0111\u00f3. \u0110\u1ecba ch\u1ec9 \u1edf link v\u1eeba d\u1eabn. C\u00e1ch s\u1eed d\u1ee5ng r\u1ea5t \u0111\u01a1n gi\u1ea3n, b\u1ea1n ch\u1ec9 c\u1ea7n di chu\u1ed9t qua ch\u1eef c\u1ea7n bi\u1ebft font, n\u00f3 s\u1ebd th\u00f4ng b\u00e1o t\u00ean font cho b\u1ea1n, ngo\u00e0i ra b\u1ea1n s\u1ebd bi\u1ebft th\u00eam c\u00e1c th\u00f4ng tin kh\u00e1c nh\u01b0 k\u00edch c\u1ee1, line height v\u00e0 m\u00e0u ch\u1eef \u0111ang d\u00f9ng.<\/li><\/ul>\n\n\n\n<\/figure><\/div>\n\n\n<\/p>\n","protected":false},"excerpt":{"rendered":"Th\u1ef1c ra th\u1ebf gi\u1edbi web kh\u00f4ng d\u00f9ng nhi\u1ec1u font, b\u1ea1n s\u1ebd b\u1ea5t ng\u1edd khi bi\u1ebft c\u00f3 \u0111\u1ebfn 100 ng\u00e0n c\u00e1c lo\u1ea1i font ch\u1eef kh\u00e1c nhau, nh\u01b0ng h\u00e0ng t\u1ef7 trang web m\u00e0 ch\u00fang ta th\u1ea5y ng\u00e0y nay v\u1eabn ch\u1ec9 d\u00f9ng kho\u1ea3ng 10 font ph\u1ed5 bi\u1ebfn – c\u00f2n g\u1ecdi l\u00e0 font web an to\u00e0n (web safe font). …<\/p>\n","protected":false},"author":1,"featured_media":1205,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[229],"tags":[],"yoast_head":"\nC\u00e1ch nh\u00fang font v\u00e0o web v\u1edbi @font-face, k\u1ef7 nguy\u00ean c\u1ee7a Typography \u0111\u00e3 \u0111\u1ebfn • Ki\u1ebfn c\u00e0ng<\/title>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\t\n","yoast_head_json":{"title":"C\u00e1ch nh\u00fang font v\u00e0o web v\u1edbi @font-face, k\u1ef7 nguy\u00ean c\u1ee7a Typography \u0111\u00e3 \u0111\u1ebfn • 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\/nhung-font-web-font-face\/","og_locale":"vi_VN","og_type":"article","og_title":"C\u00e1ch nh\u00fang font v\u00e0o web v\u1edbi @font-face, k\u1ef7 nguy\u00ean c\u1ee7a Typography \u0111\u00e3 \u0111\u1ebfn • Ki\u1ebfn c\u00e0ng","og_description":"Th\u1ef1c ra th\u1ebf gi\u1edbi web kh\u00f4ng d\u00f9ng nhi\u1ec1u font, b\u1ea1n s\u1ebd b\u1ea5t ng\u1edd khi bi\u1ebft c\u00f3 \u0111\u1ebfn 100 ng\u00e0n c\u00e1c lo\u1ea1i font ch\u1eef kh\u00e1c nhau, nh\u01b0ng h\u00e0ng t\u1ef7 trang web m\u00e0 ch\u00fang ta th\u1ea5y ng\u00e0y nay v\u1eabn ch\u1ec9 d\u00f9ng kho\u1ea3ng 10 font ph\u1ed5 bi\u1ebfn – c\u00f2n g\u1ecdi l\u00e0 font web an to\u00e0n (web safe font). …","og_url":"https:\/\/kiencang.net\/nhung-font-web-font-face\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2013-07-10T17:08:00+00:00","article_modified_time":"2022-08-20T08:59:14+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":"8 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/nhung-font-web-font-face\/","url":"https:\/\/kiencang.net\/nhung-font-web-font-face\/","name":"C\u00e1ch nh\u00fang font v\u00e0o web v\u1edbi @font-face, k\u1ef7 nguy\u00ean c\u1ee7a Typography \u0111\u00e3 \u0111\u1ebfn • Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2013-07-10T17:08:00+00:00","dateModified":"2022-08-20T08:59:14+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/nhung-font-web-font-face\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/nhung-font-web-font-face\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/nhung-font-web-font-face\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"C\u00e1ch nh\u00fang font v\u00e0o web v\u1edbi @font-face, k\u1ef7 nguy\u00ean c\u1ee7a Typography \u0111\u00e3 \u0111\u1ebfn"}]},{"@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\/325"}],"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=325"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/325\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=325"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=325"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=325"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
P\/S: Tuy nhi\u00ean vi\u1ec7c nh\u00fang font web c\u00f3 th\u1ec3 \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn \u00edt nhi\u1ec1u \u0111\u1ebfn t\u1ed1c \u0111\u1ed9 website<\/a>. H\u00e3y c\u00e2n b\u1eb1ng th\u1ea9m m\u1ef9 v\u00e0 t\u1ed1c \u0111\u1ed9, v\u00ec th\u1eddi gian t\u1ea3i trang \u0111\u00f3ng vai tr\u00f2 r\u1ea5t quan tr\u1ecdng trong vi\u1ec7c gi\u1eef ch\u00e2n ng\u01b0\u1eddi d\u00f9ng.<\/p>\n\n\n\n\n\n\n\n<\/span>Code m\u1eabu nh\u00fang font<\/span><\/h2>\n\n\n\n\u0110o\u1ea1n code sau \u0111\u00e2y \u0111\u01b0\u1ee3c \u0111\u01b0a v\u00e0o file CSS, \u0111\u1eebng lo n\u1ebfu b\u1ea1n kh\u00f4ng hi\u1ec3u lu\u00f4n, ngay ph\u00eda d\u01b0\u1edbi c\u00f3 ph\u1ea7n gi\u1ea3i th\u00edch chi ti\u1ebft:<\/p>\n\n\n\n@font-face {\n font-family:font_strong;\n src:url('..\/fonts\/Captureit.ttf') format('truetype'),\n url('..\/fonts\/Captureit.eot#iefix') format('embedded-opentype'),\n url('..\/fonts\/Captureit.woff') format('woff');\n font-weight:normal;\n font-style:normal;\n}<\/code><\/pre>\n\n\n\nV\u1edbi code tr\u00ean th\u00ec c\u1ea5u tr\u00fac th\u01b0 m\u1ee5c trang web c\u1ee7a b\u1ea1n ph\u1ea3i gi\u1ed1ng nh\u01b0 h\u00ecnh sau:<\/p>\n\n\n\n<\/figure><\/div>\n\n\n\u0110\u00e2y l\u00e0 c\u1ea5u tr\u00fac m\u00e0 \u0111a s\u1ed1 m\u1ecdi ng\u01b0\u1eddi th\u01b0\u1eddng d\u00f9ng, trong \u0111\u00f3 c\u00e1c file html \u1edf b\u00ean ngo\u00e0i, v\u00e0 t\u1eebng ph\u1ea7n chuy\u00ean bi\u1ec7t c\u00f3 th\u01b0 m\u1ee5c ri\u00eang nh\u01b0 css \u0111\u1ec3 ch\u1ee9a c\u00e1c file CSS, fonts \u0111\u1ec3 ch\u1ee9a c\u00e1c Fonts l\u1ea1 m\u1eaft c\u1ee7a ch\u00fang ta…<\/p>\n\n\n\n\n\n\n\n<\/span>Gi\u1ea3i th\u00edch code<\/span><\/h2>\n\n\n\nD\u00f2ng \u0111\u1ea7u ti\u00ean: font-family:font_strong<\/code><\/span> l\u00e0 t\u00ean m\u00e0 ta mu\u1ed1n \u0111\u1eb7t cho font m\u00ecnh nh\u00fang, b\u1ea1n \u0111\u1eb7t t\u00ean nh\u01b0 th\u1ebf n\u00e0o l\u00e0 t\u00f9y \u00fd b\u1ea1n.<\/li>D\u00f2ng th\u1ee9 hai src:url('..\/fonts\/Captureit.ttf')<\/code><\/span> \u0111\u00e2y l\u00e0 ngu\u1ed3n d\u1eabn c\u1ee7a font. B\u1ea1n ch\u00fa \u00fd 2 d\u1ea5u ch\u1ea5m v\u00e0 thanh xu\u1ed9c. \u0110\u01b0\u1eddng d\u1eabn sai th\u00ec ch\u1eafc ch\u1eafn s\u1ebd kh\u00f4ng l\u00ean cho n\u00ean ph\u1ea7n n\u00e0y ph\u1ea3i \u0111\u1eb7c bi\u1ec7t ch\u00fa \u00fd th\u1ef1c hi\u1ec7n th\u1eadt ch\u00ednh x\u00e1c. format('truetype')<\/code><\/span> l\u00e0 \u0111\u1ecbnh d\u1ea1ng c\u1ee7a font, \u0111u\u00f4i .ttf l\u00e0 truetype.<\/li>C\u00e1c d\u00f2ng ti\u1ebfp theo url('..\/fonts\/Captureit.eot#iefix') format('embedded-opentype') url('..\/fonts\/Captureit.woff') format('woff');<\/code><\/span> c\u0169ng t\u01b0\u01a1ng t\u1ef1, ch\u1ec9 kh\u00e1c \u0111\u00e2y l\u00e0 \u0111\u1ecbnh d\u1ea1ng font kh\u00e1c. N\u1ebfu b\u1ea1n ch\u1ec9 c\u00f3 font .ttf th\u00ec ch\u1ea1y tr\u00ean Google Chrome v\u00e0 FireFox th\u00ec \u0111\u01b0\u1ee3c nh\u01b0ng s\u1ebd kh\u00f4ng ch\u1ea1y \u0111\u01b0\u1ee3c tr\u00ean IE. \u0110\u1ec3 ch\u1ea1y \u0111\u01b0\u1ee3c tr\u00ean IE ph\u1ea3i c\u00f3 font d\u1ea1ng .eot<\/li>font-weight:normal; font-style:normal;<\/code><\/span> ngh\u0129a l\u00e0 b\u1ea1n \u0111\u1ec3 font \u1edf d\u1ea1ng th\u01b0\u1eddng (regular), kh\u00f4ng \u0111\u1eadm, kh\u00f4ng nh\u1ea1t.<\/li><\/ul>\n\n\n\nV\u1eady l\u00e0 xong, gi\u1edd ta d\u00f9ng font c\u0169ng y nh\u01b0 b\u00ecnh th\u01b0\u1eddng, ngh\u0129a l\u00e0 ch\u1ed7 n\u00e0o c\u1ea7n d\u00f9ng font nh\u00fang ta khai b\u00e1o font-family l\u00e0 t\u00ean font m\u00e0 ta \u0111\u00e3 \u0111\u1eb7t v\u1eeba n\u00e3y l\u00e0 \u0111\u01b0\u1ee3c, gi\u1ea3 d\u1ee5 gi\u1edd t\u00f4i \u0111\u1eb7t c\u00e1c ti\u00eau \u0111\u1ec1 .title l\u00e0 font nh\u00fang \u1edf tr\u00ean th\u00ec t\u00f4i vi\u1ebft nh\u01b0 sau trong CSS:<\/p>\n\n\n\n.title {font-family:font_strong;}<\/code><\/pre>\n\n\n\n\n\n\n\n<\/span>Tr\u00ecnh duy\u1ec7t h\u1ed7 tr\u1ee3<\/span><\/h2>\n\n\n\nT\u1ea5t c\u1ea3 c\u00e1c tr\u00ecnh duy\u1ec7t ph\u1ed5 th\u00f4ng g\u1ed3m Chrome, FireFox, Opera, Safari v\u00e0 IE \u0111\u1ec1u h\u1ed7 tr\u1ee3 nh\u00fang font, tuy nhi\u00ean lo\u1ea1i font m\u00e0 ch\u00fang support th\u00ec c\u00f3 kh\u00e1c nhau.<\/p>\n\n\n\nInternet Explorer 9+, Firefox, Chrome, Safari v\u00e0 Opera h\u1ed7 tr\u1ee3 WOFF (Web Open Font Format) font.<\/li>Firefox, Chrome, Safari v\u00e0 Opera c\u0169ng h\u1ed7 tr\u1ee3 TTF (True Type Fonts) v\u00e0 OTF (OpenType Fonts).<\/li>Chrome, Safari v\u00e0 Opera h\u1ed7 tr\u1ee3 SVG fonts\/shapes.<\/li>Internet Explorer h\u1ed7 tr\u1ee3 EOT (Embedded OpenType) fonts.<\/li><\/ul>\n\n\n\n\n\n\n\n<\/span>Nh\u00fang font tr\u1ef1c tuy\u1ebfn<\/span><\/h2>\n\n\n\nC\u00e1i n\u00e0y v\u1eeba c\u00f3 \u0111i\u1ec3m gi\u1ed1ng v\u1edbi @font-face m\u00e0 c\u0169ng v\u1eeba kh\u00e1c n\u1eefa:<\/p>\n\n\n\nGi\u1ed1ng \u1edf ch\u1ed7, font s\u1eed d\u1ee5ng \u0111\u1ec1u t\u1ea3i t\u1eeb n\u01a1i kh\u00e1c v\u1ec1, v\u00e0 \u0111\u01b0\u1ee3c d\u1ef1 tr\u00f9 l\u00e0 kh\u00f4ng c\u00f3 tr\u00ean m\u00e1y ng\u01b0\u1eddi d\u00f9ng<\/li>Kh\u00e1c \u1edf ch\u1ed7, @font-face l\u00e0 t\u1ea3i t\u1eeb host c\u1ee7a b\u1ea1n, trong khi nh\u00fang font tr\u1ef1c tuy\u1ebfn th\u00ec t\u1ea3i t\u1eeb server d\u1ecbch v\u1ee5 ri\u00eang<\/li><\/ul>\n\n\n\nH\u00f4m nay t\u00f4i s\u1ebd gi\u1edbi thi\u1ec7u v\u1edbi c\u00e1c b\u1ea1n c\u00e1ch nh\u00fang font b\u1eb1ng Google Font, \u01b0u \u0111i\u1ec3m: <\/p>\n\n\n\nNhanh, \u0111\u1ea3m b\u1ea3o: V\u00e2ng, v\u00ec n\u00f3 l\u00e0 host c\u1ee7a Google, n\u00ean t\u1ed1c \u0111\u1ed9 \u1ed5n \u0111\u1ecbnh, h\u1ea7u nh\u01b0 kh\u00f4ng b\u1ecb h\u1ecfng h\u00f3c, n\u00ean b\u1ea1n c\u00f3 th\u1ec3 an t\u00e2m g\u1ea7n nh\u01b0 100%<\/li>Mi\u1ec5n ph\u00ed: B\u1ea1n kh\u00f4ng ph\u1ea3i m\u1ea5t ti\u1ec1n \u0111\u1ec3 s\u1eed d\u1ee5ng d\u1ecbch v\u1ee5 n\u00e0y. Th\u00eam v\u00e0o \u0111\u00f3 b\u1ea1n c\u0169ng gi\u00fap gi\u1ea3m b\u0103ng th\u00f4ng cho host c\u1ee7a b\u1ea1n<\/li>\u0110\u01a1n gi\u1ea3n: Code nh\u00fang c\u1ee7a n\u00f3 th\u1eadm ch\u00ed c\u00f2n \u0111\u01a1n gi\u1ea3n h\u01a1n @font-face. K\u1ebft qu\u1ea3 demo b\u1ea1n c\u00f3 th\u1ec3 xem ngay \u1edf d\u01b0\u1edbi.<\/li><\/ul>\n\n\n\nBlog Duc Anh Plus – Nguyen Duc Anh<\/div>\n\n\n\nC\u00e1ch l\u00e0m: <\/p>\n\n\n\nTruy c\u1eadp trang web <\/a>https:\/\/fonts.google.com\/<\/a> \u0111\u1ec3 ch\u1ecdn font m\u00e0 b\u1ea1n th\u00edch. Sau \u0111\u00f3 nh\u1ea5n v\u00e0o h\u00ecnh m\u0169i t\u00ean tr\u1ecf (Quick-use)<\/li><\/ul>\n\n\n\n<\/figure><\/div>\n\n\nM\u1ed9t c\u1eeda s\u1ed5 b\u1eadt ra, v\u00e0 Google cho b\u1ea1n \u0111o\u1ea1n code \u0111\u1ec3 \u0111\u01b0a v\u00e0o trong th\u1ebb head c\u1ee7a trang HTML (n\u00f3 g\u1ea7n gi\u1ed1ng v\u1edbi li\u00ean k\u1ebft CSS), code \u0111\u00f3 c\u00f3 d\u1ea1ng nh\u01b0 sau: <link href=\u2019http:\/\/fonts.googleapis.com\/css?family=Ruge+Boogie\u2019 rel=\u2019stylesheet\u2019 type=\u2019text\/css\u2019> <\/strong><\/li>B\u1ea1n c\u00f3 th\u1ec3 th\u1ea5y t\u00ean font trong v\u00ed d\u1ee5 n\u00e0y l\u00e0 Ruge Boogie, ti\u1ebfp theo, mu\u1ed1n s\u1eed d\u1ee5ng font n\u00e0y, th\u00ec trong CSS, b\u1ea1n vi\u1ebft nh\u01b0 sau: body {font-family: \u2018Ruge Boogie\u2019, cursive;font-size:20px;}<\/strong><\/li>Nh\u01b0 v\u1eady l\u00e0 \u0111\u00e3 xong r\u1ed3i, r\u1ea5t \u0111\u01a1n gi\u1ea3n ph\u1ea3i kh\u00f4ng. Th\u00f4ng tin th\u00eam l\u00e0 Google Font c\u00f3 kho\u1ea3ng h\u01a1n 600 font, nh\u01b0ng font ti\u1ebfng Vi\u1ec7t th\u00ec kh\u00f4ng nhi\u1ec1u l\u1eafm<\/li><\/ul>\n\n\n\nM\u1ed9t s\u1ed1 l\u01b0u \u00fd:<\/p>\n\n\n\nGoogle Font c\u00f3 \u0111\u1ebfn 3 ki\u1ec3u nh\u00fang: ti\u00eau chu\u1ea9n l\u00e0 ki\u1ec3u link \u1edf tr\u00ean, th\u1ee9 hai l\u00e0 @import v\u00e0 cu\u1ed1i c\u00f9ng l\u00e0 d\u00f9ng JavaScript \u2013 c\u1ea3 3 \u0111\u1ec1u cho k\u1ebft qu\u1ea3 t\u01b0\u01a1ng \u0111\u01b0\u01a1ng nhau, nh\u01b0ng ki\u1ec3u \u0111\u1ea7u ti\u00ean \u0111\u01b0\u1ee3c khuy\u00ean d\u00f9ng.<\/li>N\u1ebfu mu\u1ed1n \u0111\u1ed3ng b\u1ed9 h\u00f3a font tr\u00ean Google Font v\u1edbi Desktop h\u00e3y s\u1eed d\u1ee5ng ti\u1ec7n \u00edch SkyFonts<\/a>.<\/li>L\u1eddi cu\u1ed1i: h\u00e3y th\u1eadn tr\u1ecdng v\u1edbi nh\u00fang font t\u00f9y ch\u1ec9nh, \u0111\u1eebng nh\u00fang qu\u00e1 nhi\u1ec1u font kh\u00e1c nhau, v\u00ec nh\u00fang font ngh\u0129a l\u00e0 ng\u01b0\u1eddi d\u00f9ng ph\u1ea3i t\u1ea3i font v\u1ec1, nh\u00fang c\u00e1c font qu\u00e1 n\u1eb7ng ch\u1eafc ch\u1eafn l\u00e0m t\u0103ng th\u1eddi gian t\u1ea3i trang, c\u00e1i n\u00e0y l\u00e0 \u00e1p d\u1ee5ng chung ch\u1ee9 kh\u00f4ng ri\u00eang g\u00ec cho Google Font. Ngo\u00e0i ra qu\u00e1 nhi\u1ec1u font kh\u00e1c nhau tr\u00ean trang s\u1ebd g\u00e2y t\u00e1c d\u1ee5ng ng\u01b0\u1ee3c v\u1ec1 m\u1eb7t th\u1ea9m m\u1ef9.<\/li><\/ul>\n\n\n\nTr\u1ea3 l\u1eddi c\u00e2u h\u1ecfi ph\u1ee5 (M\u00e0 c\u0169ng c\u00f3 khi l\u00e0 ch\u00ednh)<\/h3>\n\n\n\nT\u00f4i c\u00f3 th\u1ec3 t\u00ecm font \u0111\u1ed9c v\u00e0 l\u1ea1 \u1edf \u0111\u00e2u?<\/strong> => Tr\u00ean m\u1ea1ng c\u00f3 r\u1ea5t nhi\u1ec1u trang web cung c\u1ea5p font mi\u1ec5n ph\u00ed cho ph\u00e9p b\u1ea1n t\u1ea3i v\u1ec1. B\u1ea1n kh\u00f4ng n\u00ean t\u1ea3i font c\u00f3 ph\u00ed b\u1ea5t h\u1ee3p ph\u00e1p v\u00ec n\u00f3 c\u00f3 th\u1ec3 l\u00e0m \u1ea3nh h\u01b0\u1edfng r\u1ea5t x\u1ea5u \u0111\u1ebfn trang web c\u1ee7a b\u1ea1n n\u1ebfu ch\u1ee7 s\u1edf h\u1eefu font kh\u1edfi ki\u1ec7n. Nhi\u1ec1u font mi\u1ec5n ph\u00ed ch\u1ea5t l\u01b0\u1ee3ng t\u01b0\u01a1ng \u0111\u01b0\u01a1ng th\u00ec t\u1ed9i g\u00ec ch\u00fang ta t\u1ea3i l\u1eadu \u0111\u00fang kh\u00f4ng \u1ea1? B\u1ea1n c\u00f3 th\u1ec3 v\u00e0o trang http:\/\/www.dafont.com\/<\/a> \u0111\u1ec3 t\u00ecm font \u01b0a th\u00edch nh\u00e9.<\/li>Font \u0111\u1eb9p cho ti\u1ebfng Vi\u1ec7t c\u00f3 nhi\u1ec1u kh\u00f4ng? <\/strong>=> \u0110\u00e1ng ti\u1ebfc l\u00e0 kh\u00f4ng! B\u1ea1n c\u00f3 kh\u00e1 \u00edt l\u1ef1a ch\u1ecdn \u0111\u1ed9c \u0111\u00e1o v\u1edbi ti\u1ebfng Vi\u1ec7t. \u1ede ph\u00eda ng\u01b0\u1ee3c l\u1ea1i, ti\u1ebfng Anh v\u00e0 c\u00e1c ng\u00f4n ng\u1eef ch\u00e2u \u00c2u n\u00f3i chung l\u1ea1i r\u1ea5t phong ph\u00fa.<\/li>T\u1ea1i sao t\u00f4i nh\u00fang m\u00e3i font m\u00e0 ch\u1eb3ng \u0111\u01b0\u1ee3c, tr\u00ecnh duy\u1ec7t l\u1edfm r\u1ed3i, b\u1ef1c m\u00ecnh qu\u00e1!<\/strong> => B\u1ea1n n\u00ean d\u00f9ng Google Chrome ho\u1eb7c FireFox \u0111\u1ec3 ki\u1ec3m tra nh\u00fang th\u00e0nh c\u00f4ng hay ch\u01b0a. C\u1ea3 2 tr\u00ecnh duy\u1ec7t n\u00e0y m\u00e0 kh\u00f4ng th\u00e0nh c\u00f4ng th\u00ec l\u00e0 t\u1ea1i b\u1ea1n nh\u00fang sai ch\u1ee9 kh\u00f4ng ph\u1ea3i t\u1ea1i tr\u00ecnh duy\u1ec7t. L\u1ed7i kh\u00f4ng nh\u00fang \u0111\u01b0\u1ee3c font, 10 ng\u01b0\u1eddi th\u00ec 9 ng\u01b0\u1eddi l\u00e0 do sai \u0111\u01b0\u1eddng d\u1eabn \u1edf c\u00e1i src: url<\/em>(\u2018\u0111\u01b0\u1eddng d\u1eabn font\u2019). N\u1ebfu Font nh\u00fang \u0111\u1ec3 c\u00f9ng c\u1ea5p v\u1edbi file HTML \u0111\u01b0\u1eddng d\u1eabn s\u1ebd kh\u00e1c v\u1edbi Font nh\u00fang b\u1ea1n \u0111\u1ec3 \u1edf trong th\u01b0 m\u1ee5c Font ri\u00eang. M\u00ecnh t\u1eebng b\u1ecb r\u1ed3i, kh\u00f4ng bi\u1ebft th\u1ebf l\u00e0 loay hoay c\u1ea3 ti\u1ebfng!<\/li>T\u00f4i c\u00f3 m\u1ed7i font \u0111\u1ecbnh d\u1ea1ng .ttf, l\u00e0m sao \u0111\u1ec3 t\u00f4i c\u00f3 \u0111\u1ecbnh d\u1ea1ng .eot cho \u00f4ng b\u1ea1n IE b\u00e2y gi\u1edd?<\/strong> => Gi\u1ed1ng nh\u01b0 video c\u00f3 th\u1ec3 chuy\u1ec3n \u0111\u1ed5i (convert) \u0111\u1ecbnh d\u1ea1ng, font c\u0169ng v\u1eady. B\u1ea1n c\u00f3 th\u1ec3 search tr\u00ean m\u1ea1ng ho\u1eb7c v\u00f4 trang n\u00e0y \u0111\u1ec3 chuy\u1ec3n \u0111\u1ed5i: http:\/\/www.fontsquirrel.com\/tools\/webfont-generator<\/a><\/li>T\u00f4i th\u1ea5y v\u00e0i font r\u1ea5t \u0111\u1eb9p tr\u00ean m\u1ed9t s\u1ed1 trang web, t\u00f4i mu\u1ed1n d\u00f9ng m\u1ea5y font \u0111\u00f3 nh\u01b0ng kh\u00f4ng bi\u1ebft th\u00f4ng tin v\u1ec1 n\u00f3, v\u1eady t\u00f4i ph\u1ea3i l\u00e0m g\u00ec?<\/strong> => \u0110\u1ec3 t\u00ecm m\u1ed9t font n\u00e0o \u0111\u00f3 th\u00ec c\u00e1ch \u0111\u01a1n gi\u1ea3n nh\u1ea5t l\u00e0 bi\u1ebft t\u00ean c\u1ee7a font, r\u1ed3i google \u0111\u1ec3 t\u1ea3i v\u1ec1. C\u00f3 m\u1ed9t ti\u1ec7n \u00edch m\u1edf r\u1ed9ng cho tr\u00ecnh duy\u1ec7t Google Chrome t\u00ean l\u00e0 WhatFont<\/a> gi\u00fap b\u1ea1n l\u00e0m \u0111\u01b0\u1ee3c \u0111i\u1ec1u \u0111\u00f3. \u0110\u1ecba ch\u1ec9 \u1edf link v\u1eeba d\u1eabn. C\u00e1ch s\u1eed d\u1ee5ng r\u1ea5t \u0111\u01a1n gi\u1ea3n, b\u1ea1n ch\u1ec9 c\u1ea7n di chu\u1ed9t qua ch\u1eef c\u1ea7n bi\u1ebft font, n\u00f3 s\u1ebd th\u00f4ng b\u00e1o t\u00ean font cho b\u1ea1n, ngo\u00e0i ra b\u1ea1n s\u1ebd bi\u1ebft th\u00eam c\u00e1c th\u00f4ng tin kh\u00e1c nh\u01b0 k\u00edch c\u1ee1, line height v\u00e0 m\u00e0u ch\u1eef \u0111ang d\u00f9ng.<\/li><\/ul>\n\n\n\n<\/figure><\/div>\n\n\n<\/p>\n","protected":false},"excerpt":{"rendered":"Th\u1ef1c ra th\u1ebf gi\u1edbi web kh\u00f4ng d\u00f9ng nhi\u1ec1u font, b\u1ea1n s\u1ebd b\u1ea5t ng\u1edd khi bi\u1ebft c\u00f3 \u0111\u1ebfn 100 ng\u00e0n c\u00e1c lo\u1ea1i font ch\u1eef kh\u00e1c nhau, nh\u01b0ng h\u00e0ng t\u1ef7 trang web m\u00e0 ch\u00fang ta th\u1ea5y ng\u00e0y nay v\u1eabn ch\u1ec9 d\u00f9ng kho\u1ea3ng 10 font ph\u1ed5 bi\u1ebfn – c\u00f2n g\u1ecdi l\u00e0 font web an to\u00e0n (web safe font). …<\/p>\n","protected":false},"author":1,"featured_media":1205,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[229],"tags":[],"yoast_head":"\nC\u00e1ch nh\u00fang font v\u00e0o web v\u1edbi @font-face, k\u1ef7 nguy\u00ean c\u1ee7a Typography \u0111\u00e3 \u0111\u1ebfn • Ki\u1ebfn c\u00e0ng<\/title>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\t\n","yoast_head_json":{"title":"C\u00e1ch nh\u00fang font v\u00e0o web v\u1edbi @font-face, k\u1ef7 nguy\u00ean c\u1ee7a Typography \u0111\u00e3 \u0111\u1ebfn • 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\/nhung-font-web-font-face\/","og_locale":"vi_VN","og_type":"article","og_title":"C\u00e1ch nh\u00fang font v\u00e0o web v\u1edbi @font-face, k\u1ef7 nguy\u00ean c\u1ee7a Typography \u0111\u00e3 \u0111\u1ebfn • Ki\u1ebfn c\u00e0ng","og_description":"Th\u1ef1c ra th\u1ebf gi\u1edbi web kh\u00f4ng d\u00f9ng nhi\u1ec1u font, b\u1ea1n s\u1ebd b\u1ea5t ng\u1edd khi bi\u1ebft c\u00f3 \u0111\u1ebfn 100 ng\u00e0n c\u00e1c lo\u1ea1i font ch\u1eef kh\u00e1c nhau, nh\u01b0ng h\u00e0ng t\u1ef7 trang web m\u00e0 ch\u00fang ta th\u1ea5y ng\u00e0y nay v\u1eabn ch\u1ec9 d\u00f9ng kho\u1ea3ng 10 font ph\u1ed5 bi\u1ebfn – c\u00f2n g\u1ecdi l\u00e0 font web an to\u00e0n (web safe font). …","og_url":"https:\/\/kiencang.net\/nhung-font-web-font-face\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2013-07-10T17:08:00+00:00","article_modified_time":"2022-08-20T08:59:14+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":"8 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/nhung-font-web-font-face\/","url":"https:\/\/kiencang.net\/nhung-font-web-font-face\/","name":"C\u00e1ch nh\u00fang font v\u00e0o web v\u1edbi @font-face, k\u1ef7 nguy\u00ean c\u1ee7a Typography \u0111\u00e3 \u0111\u1ebfn • Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2013-07-10T17:08:00+00:00","dateModified":"2022-08-20T08:59:14+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/nhung-font-web-font-face\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/nhung-font-web-font-face\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/nhung-font-web-font-face\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"C\u00e1ch nh\u00fang font v\u00e0o web v\u1edbi @font-face, k\u1ef7 nguy\u00ean c\u1ee7a Typography \u0111\u00e3 \u0111\u1ebfn"}]},{"@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\/325"}],"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=325"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/325\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=325"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=325"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=325"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\u0110o\u1ea1n code sau \u0111\u00e2y \u0111\u01b0\u1ee3c \u0111\u01b0a v\u00e0o file CSS, \u0111\u1eebng lo n\u1ebfu b\u1ea1n kh\u00f4ng hi\u1ec3u lu\u00f4n, ngay ph\u00eda d\u01b0\u1edbi c\u00f3 ph\u1ea7n gi\u1ea3i th\u00edch chi ti\u1ebft:<\/p>\n\n\n\n
@font-face {\n font-family:font_strong;\n src:url('..\/fonts\/Captureit.ttf') format('truetype'),\n url('..\/fonts\/Captureit.eot#iefix') format('embedded-opentype'),\n url('..\/fonts\/Captureit.woff') format('woff');\n font-weight:normal;\n font-style:normal;\n}<\/code><\/pre>\n\n\n\nV\u1edbi code tr\u00ean th\u00ec c\u1ea5u tr\u00fac th\u01b0 m\u1ee5c trang web c\u1ee7a b\u1ea1n ph\u1ea3i gi\u1ed1ng nh\u01b0 h\u00ecnh sau:<\/p>\n\n\n\n<\/figure><\/div>\n\n\n\u0110\u00e2y l\u00e0 c\u1ea5u tr\u00fac m\u00e0 \u0111a s\u1ed1 m\u1ecdi ng\u01b0\u1eddi th\u01b0\u1eddng d\u00f9ng, trong \u0111\u00f3 c\u00e1c file html \u1edf b\u00ean ngo\u00e0i, v\u00e0 t\u1eebng ph\u1ea7n chuy\u00ean bi\u1ec7t c\u00f3 th\u01b0 m\u1ee5c ri\u00eang nh\u01b0 css \u0111\u1ec3 ch\u1ee9a c\u00e1c file CSS, fonts \u0111\u1ec3 ch\u1ee9a c\u00e1c Fonts l\u1ea1 m\u1eaft c\u1ee7a ch\u00fang ta…<\/p>\n\n\n\n\n\n\n\n<\/span>Gi\u1ea3i th\u00edch code<\/span><\/h2>\n\n\n\nD\u00f2ng \u0111\u1ea7u ti\u00ean: font-family:font_strong<\/code><\/span> l\u00e0 t\u00ean m\u00e0 ta mu\u1ed1n \u0111\u1eb7t cho font m\u00ecnh nh\u00fang, b\u1ea1n \u0111\u1eb7t t\u00ean nh\u01b0 th\u1ebf n\u00e0o l\u00e0 t\u00f9y \u00fd b\u1ea1n.<\/li>D\u00f2ng th\u1ee9 hai src:url('..\/fonts\/Captureit.ttf')<\/code><\/span> \u0111\u00e2y l\u00e0 ngu\u1ed3n d\u1eabn c\u1ee7a font. B\u1ea1n ch\u00fa \u00fd 2 d\u1ea5u ch\u1ea5m v\u00e0 thanh xu\u1ed9c. \u0110\u01b0\u1eddng d\u1eabn sai th\u00ec ch\u1eafc ch\u1eafn s\u1ebd kh\u00f4ng l\u00ean cho n\u00ean ph\u1ea7n n\u00e0y ph\u1ea3i \u0111\u1eb7c bi\u1ec7t ch\u00fa \u00fd th\u1ef1c hi\u1ec7n th\u1eadt ch\u00ednh x\u00e1c. format('truetype')<\/code><\/span> l\u00e0 \u0111\u1ecbnh d\u1ea1ng c\u1ee7a font, \u0111u\u00f4i .ttf l\u00e0 truetype.<\/li>C\u00e1c d\u00f2ng ti\u1ebfp theo url('..\/fonts\/Captureit.eot#iefix') format('embedded-opentype') url('..\/fonts\/Captureit.woff') format('woff');<\/code><\/span> c\u0169ng t\u01b0\u01a1ng t\u1ef1, ch\u1ec9 kh\u00e1c \u0111\u00e2y l\u00e0 \u0111\u1ecbnh d\u1ea1ng font kh\u00e1c. N\u1ebfu b\u1ea1n ch\u1ec9 c\u00f3 font .ttf th\u00ec ch\u1ea1y tr\u00ean Google Chrome v\u00e0 FireFox th\u00ec \u0111\u01b0\u1ee3c nh\u01b0ng s\u1ebd kh\u00f4ng ch\u1ea1y \u0111\u01b0\u1ee3c tr\u00ean IE. \u0110\u1ec3 ch\u1ea1y \u0111\u01b0\u1ee3c tr\u00ean IE ph\u1ea3i c\u00f3 font d\u1ea1ng .eot<\/li>font-weight:normal; font-style:normal;<\/code><\/span> ngh\u0129a l\u00e0 b\u1ea1n \u0111\u1ec3 font \u1edf d\u1ea1ng th\u01b0\u1eddng (regular), kh\u00f4ng \u0111\u1eadm, kh\u00f4ng nh\u1ea1t.<\/li><\/ul>\n\n\n\nV\u1eady l\u00e0 xong, gi\u1edd ta d\u00f9ng font c\u0169ng y nh\u01b0 b\u00ecnh th\u01b0\u1eddng, ngh\u0129a l\u00e0 ch\u1ed7 n\u00e0o c\u1ea7n d\u00f9ng font nh\u00fang ta khai b\u00e1o font-family l\u00e0 t\u00ean font m\u00e0 ta \u0111\u00e3 \u0111\u1eb7t v\u1eeba n\u00e3y l\u00e0 \u0111\u01b0\u1ee3c, gi\u1ea3 d\u1ee5 gi\u1edd t\u00f4i \u0111\u1eb7t c\u00e1c ti\u00eau \u0111\u1ec1 .title l\u00e0 font nh\u00fang \u1edf tr\u00ean th\u00ec t\u00f4i vi\u1ebft nh\u01b0 sau trong CSS:<\/p>\n\n\n\n.title {font-family:font_strong;}<\/code><\/pre>\n\n\n\n\n\n\n\n<\/span>Tr\u00ecnh duy\u1ec7t h\u1ed7 tr\u1ee3<\/span><\/h2>\n\n\n\nT\u1ea5t c\u1ea3 c\u00e1c tr\u00ecnh duy\u1ec7t ph\u1ed5 th\u00f4ng g\u1ed3m Chrome, FireFox, Opera, Safari v\u00e0 IE \u0111\u1ec1u h\u1ed7 tr\u1ee3 nh\u00fang font, tuy nhi\u00ean lo\u1ea1i font m\u00e0 ch\u00fang support th\u00ec c\u00f3 kh\u00e1c nhau.<\/p>\n\n\n\nInternet Explorer 9+, Firefox, Chrome, Safari v\u00e0 Opera h\u1ed7 tr\u1ee3 WOFF (Web Open Font Format) font.<\/li>Firefox, Chrome, Safari v\u00e0 Opera c\u0169ng h\u1ed7 tr\u1ee3 TTF (True Type Fonts) v\u00e0 OTF (OpenType Fonts).<\/li>Chrome, Safari v\u00e0 Opera h\u1ed7 tr\u1ee3 SVG fonts\/shapes.<\/li>Internet Explorer h\u1ed7 tr\u1ee3 EOT (Embedded OpenType) fonts.<\/li><\/ul>\n\n\n\n\n\n\n\n<\/span>Nh\u00fang font tr\u1ef1c tuy\u1ebfn<\/span><\/h2>\n\n\n\nC\u00e1i n\u00e0y v\u1eeba c\u00f3 \u0111i\u1ec3m gi\u1ed1ng v\u1edbi @font-face m\u00e0 c\u0169ng v\u1eeba kh\u00e1c n\u1eefa:<\/p>\n\n\n\nGi\u1ed1ng \u1edf ch\u1ed7, font s\u1eed d\u1ee5ng \u0111\u1ec1u t\u1ea3i t\u1eeb n\u01a1i kh\u00e1c v\u1ec1, v\u00e0 \u0111\u01b0\u1ee3c d\u1ef1 tr\u00f9 l\u00e0 kh\u00f4ng c\u00f3 tr\u00ean m\u00e1y ng\u01b0\u1eddi d\u00f9ng<\/li>Kh\u00e1c \u1edf ch\u1ed7, @font-face l\u00e0 t\u1ea3i t\u1eeb host c\u1ee7a b\u1ea1n, trong khi nh\u00fang font tr\u1ef1c tuy\u1ebfn th\u00ec t\u1ea3i t\u1eeb server d\u1ecbch v\u1ee5 ri\u00eang<\/li><\/ul>\n\n\n\nH\u00f4m nay t\u00f4i s\u1ebd gi\u1edbi thi\u1ec7u v\u1edbi c\u00e1c b\u1ea1n c\u00e1ch nh\u00fang font b\u1eb1ng Google Font, \u01b0u \u0111i\u1ec3m: <\/p>\n\n\n\nNhanh, \u0111\u1ea3m b\u1ea3o: V\u00e2ng, v\u00ec n\u00f3 l\u00e0 host c\u1ee7a Google, n\u00ean t\u1ed1c \u0111\u1ed9 \u1ed5n \u0111\u1ecbnh, h\u1ea7u nh\u01b0 kh\u00f4ng b\u1ecb h\u1ecfng h\u00f3c, n\u00ean b\u1ea1n c\u00f3 th\u1ec3 an t\u00e2m g\u1ea7n nh\u01b0 100%<\/li>Mi\u1ec5n ph\u00ed: B\u1ea1n kh\u00f4ng ph\u1ea3i m\u1ea5t ti\u1ec1n \u0111\u1ec3 s\u1eed d\u1ee5ng d\u1ecbch v\u1ee5 n\u00e0y. Th\u00eam v\u00e0o \u0111\u00f3 b\u1ea1n c\u0169ng gi\u00fap gi\u1ea3m b\u0103ng th\u00f4ng cho host c\u1ee7a b\u1ea1n<\/li>\u0110\u01a1n gi\u1ea3n: Code nh\u00fang c\u1ee7a n\u00f3 th\u1eadm ch\u00ed c\u00f2n \u0111\u01a1n gi\u1ea3n h\u01a1n @font-face. K\u1ebft qu\u1ea3 demo b\u1ea1n c\u00f3 th\u1ec3 xem ngay \u1edf d\u01b0\u1edbi.<\/li><\/ul>\n\n\n\nBlog Duc Anh Plus – Nguyen Duc Anh<\/div>\n\n\n\nC\u00e1ch l\u00e0m: <\/p>\n\n\n\nTruy c\u1eadp trang web <\/a>https:\/\/fonts.google.com\/<\/a> \u0111\u1ec3 ch\u1ecdn font m\u00e0 b\u1ea1n th\u00edch. Sau \u0111\u00f3 nh\u1ea5n v\u00e0o h\u00ecnh m\u0169i t\u00ean tr\u1ecf (Quick-use)<\/li><\/ul>\n\n\n\n<\/figure><\/div>\n\n\nM\u1ed9t c\u1eeda s\u1ed5 b\u1eadt ra, v\u00e0 Google cho b\u1ea1n \u0111o\u1ea1n code \u0111\u1ec3 \u0111\u01b0a v\u00e0o trong th\u1ebb head c\u1ee7a trang HTML (n\u00f3 g\u1ea7n gi\u1ed1ng v\u1edbi li\u00ean k\u1ebft CSS), code \u0111\u00f3 c\u00f3 d\u1ea1ng nh\u01b0 sau: <link href=\u2019http:\/\/fonts.googleapis.com\/css?family=Ruge+Boogie\u2019 rel=\u2019stylesheet\u2019 type=\u2019text\/css\u2019> <\/strong><\/li>B\u1ea1n c\u00f3 th\u1ec3 th\u1ea5y t\u00ean font trong v\u00ed d\u1ee5 n\u00e0y l\u00e0 Ruge Boogie, ti\u1ebfp theo, mu\u1ed1n s\u1eed d\u1ee5ng font n\u00e0y, th\u00ec trong CSS, b\u1ea1n vi\u1ebft nh\u01b0 sau: body {font-family: \u2018Ruge Boogie\u2019, cursive;font-size:20px;}<\/strong><\/li>Nh\u01b0 v\u1eady l\u00e0 \u0111\u00e3 xong r\u1ed3i, r\u1ea5t \u0111\u01a1n gi\u1ea3n ph\u1ea3i kh\u00f4ng. Th\u00f4ng tin th\u00eam l\u00e0 Google Font c\u00f3 kho\u1ea3ng h\u01a1n 600 font, nh\u01b0ng font ti\u1ebfng Vi\u1ec7t th\u00ec kh\u00f4ng nhi\u1ec1u l\u1eafm<\/li><\/ul>\n\n\n\nM\u1ed9t s\u1ed1 l\u01b0u \u00fd:<\/p>\n\n\n\nGoogle Font c\u00f3 \u0111\u1ebfn 3 ki\u1ec3u nh\u00fang: ti\u00eau chu\u1ea9n l\u00e0 ki\u1ec3u link \u1edf tr\u00ean, th\u1ee9 hai l\u00e0 @import v\u00e0 cu\u1ed1i c\u00f9ng l\u00e0 d\u00f9ng JavaScript \u2013 c\u1ea3 3 \u0111\u1ec1u cho k\u1ebft qu\u1ea3 t\u01b0\u01a1ng \u0111\u01b0\u01a1ng nhau, nh\u01b0ng ki\u1ec3u \u0111\u1ea7u ti\u00ean \u0111\u01b0\u1ee3c khuy\u00ean d\u00f9ng.<\/li>N\u1ebfu mu\u1ed1n \u0111\u1ed3ng b\u1ed9 h\u00f3a font tr\u00ean Google Font v\u1edbi Desktop h\u00e3y s\u1eed d\u1ee5ng ti\u1ec7n \u00edch SkyFonts<\/a>.<\/li>L\u1eddi cu\u1ed1i: h\u00e3y th\u1eadn tr\u1ecdng v\u1edbi nh\u00fang font t\u00f9y ch\u1ec9nh, \u0111\u1eebng nh\u00fang qu\u00e1 nhi\u1ec1u font kh\u00e1c nhau, v\u00ec nh\u00fang font ngh\u0129a l\u00e0 ng\u01b0\u1eddi d\u00f9ng ph\u1ea3i t\u1ea3i font v\u1ec1, nh\u00fang c\u00e1c font qu\u00e1 n\u1eb7ng ch\u1eafc ch\u1eafn l\u00e0m t\u0103ng th\u1eddi gian t\u1ea3i trang, c\u00e1i n\u00e0y l\u00e0 \u00e1p d\u1ee5ng chung ch\u1ee9 kh\u00f4ng ri\u00eang g\u00ec cho Google Font. Ngo\u00e0i ra qu\u00e1 nhi\u1ec1u font kh\u00e1c nhau tr\u00ean trang s\u1ebd g\u00e2y t\u00e1c d\u1ee5ng ng\u01b0\u1ee3c v\u1ec1 m\u1eb7t th\u1ea9m m\u1ef9.<\/li><\/ul>\n\n\n\nTr\u1ea3 l\u1eddi c\u00e2u h\u1ecfi ph\u1ee5 (M\u00e0 c\u0169ng c\u00f3 khi l\u00e0 ch\u00ednh)<\/h3>\n\n\n\nT\u00f4i c\u00f3 th\u1ec3 t\u00ecm font \u0111\u1ed9c v\u00e0 l\u1ea1 \u1edf \u0111\u00e2u?<\/strong> => Tr\u00ean m\u1ea1ng c\u00f3 r\u1ea5t nhi\u1ec1u trang web cung c\u1ea5p font mi\u1ec5n ph\u00ed cho ph\u00e9p b\u1ea1n t\u1ea3i v\u1ec1. B\u1ea1n kh\u00f4ng n\u00ean t\u1ea3i font c\u00f3 ph\u00ed b\u1ea5t h\u1ee3p ph\u00e1p v\u00ec n\u00f3 c\u00f3 th\u1ec3 l\u00e0m \u1ea3nh h\u01b0\u1edfng r\u1ea5t x\u1ea5u \u0111\u1ebfn trang web c\u1ee7a b\u1ea1n n\u1ebfu ch\u1ee7 s\u1edf h\u1eefu font kh\u1edfi ki\u1ec7n. Nhi\u1ec1u font mi\u1ec5n ph\u00ed ch\u1ea5t l\u01b0\u1ee3ng t\u01b0\u01a1ng \u0111\u01b0\u01a1ng th\u00ec t\u1ed9i g\u00ec ch\u00fang ta t\u1ea3i l\u1eadu \u0111\u00fang kh\u00f4ng \u1ea1? B\u1ea1n c\u00f3 th\u1ec3 v\u00e0o trang http:\/\/www.dafont.com\/<\/a> \u0111\u1ec3 t\u00ecm font \u01b0a th\u00edch nh\u00e9.<\/li>Font \u0111\u1eb9p cho ti\u1ebfng Vi\u1ec7t c\u00f3 nhi\u1ec1u kh\u00f4ng? <\/strong>=> \u0110\u00e1ng ti\u1ebfc l\u00e0 kh\u00f4ng! B\u1ea1n c\u00f3 kh\u00e1 \u00edt l\u1ef1a ch\u1ecdn \u0111\u1ed9c \u0111\u00e1o v\u1edbi ti\u1ebfng Vi\u1ec7t. \u1ede ph\u00eda ng\u01b0\u1ee3c l\u1ea1i, ti\u1ebfng Anh v\u00e0 c\u00e1c ng\u00f4n ng\u1eef ch\u00e2u \u00c2u n\u00f3i chung l\u1ea1i r\u1ea5t phong ph\u00fa.<\/li>T\u1ea1i sao t\u00f4i nh\u00fang m\u00e3i font m\u00e0 ch\u1eb3ng \u0111\u01b0\u1ee3c, tr\u00ecnh duy\u1ec7t l\u1edfm r\u1ed3i, b\u1ef1c m\u00ecnh qu\u00e1!<\/strong> => B\u1ea1n n\u00ean d\u00f9ng Google Chrome ho\u1eb7c FireFox \u0111\u1ec3 ki\u1ec3m tra nh\u00fang th\u00e0nh c\u00f4ng hay ch\u01b0a. C\u1ea3 2 tr\u00ecnh duy\u1ec7t n\u00e0y m\u00e0 kh\u00f4ng th\u00e0nh c\u00f4ng th\u00ec l\u00e0 t\u1ea1i b\u1ea1n nh\u00fang sai ch\u1ee9 kh\u00f4ng ph\u1ea3i t\u1ea1i tr\u00ecnh duy\u1ec7t. L\u1ed7i kh\u00f4ng nh\u00fang \u0111\u01b0\u1ee3c font, 10 ng\u01b0\u1eddi th\u00ec 9 ng\u01b0\u1eddi l\u00e0 do sai \u0111\u01b0\u1eddng d\u1eabn \u1edf c\u00e1i src: url<\/em>(\u2018\u0111\u01b0\u1eddng d\u1eabn font\u2019). N\u1ebfu Font nh\u00fang \u0111\u1ec3 c\u00f9ng c\u1ea5p v\u1edbi file HTML \u0111\u01b0\u1eddng d\u1eabn s\u1ebd kh\u00e1c v\u1edbi Font nh\u00fang b\u1ea1n \u0111\u1ec3 \u1edf trong th\u01b0 m\u1ee5c Font ri\u00eang. M\u00ecnh t\u1eebng b\u1ecb r\u1ed3i, kh\u00f4ng bi\u1ebft th\u1ebf l\u00e0 loay hoay c\u1ea3 ti\u1ebfng!<\/li>T\u00f4i c\u00f3 m\u1ed7i font \u0111\u1ecbnh d\u1ea1ng .ttf, l\u00e0m sao \u0111\u1ec3 t\u00f4i c\u00f3 \u0111\u1ecbnh d\u1ea1ng .eot cho \u00f4ng b\u1ea1n IE b\u00e2y gi\u1edd?<\/strong> => Gi\u1ed1ng nh\u01b0 video c\u00f3 th\u1ec3 chuy\u1ec3n \u0111\u1ed5i (convert) \u0111\u1ecbnh d\u1ea1ng, font c\u0169ng v\u1eady. B\u1ea1n c\u00f3 th\u1ec3 search tr\u00ean m\u1ea1ng ho\u1eb7c v\u00f4 trang n\u00e0y \u0111\u1ec3 chuy\u1ec3n \u0111\u1ed5i: http:\/\/www.fontsquirrel.com\/tools\/webfont-generator<\/a><\/li>T\u00f4i th\u1ea5y v\u00e0i font r\u1ea5t \u0111\u1eb9p tr\u00ean m\u1ed9t s\u1ed1 trang web, t\u00f4i mu\u1ed1n d\u00f9ng m\u1ea5y font \u0111\u00f3 nh\u01b0ng kh\u00f4ng bi\u1ebft th\u00f4ng tin v\u1ec1 n\u00f3, v\u1eady t\u00f4i ph\u1ea3i l\u00e0m g\u00ec?<\/strong> => \u0110\u1ec3 t\u00ecm m\u1ed9t font n\u00e0o \u0111\u00f3 th\u00ec c\u00e1ch \u0111\u01a1n gi\u1ea3n nh\u1ea5t l\u00e0 bi\u1ebft t\u00ean c\u1ee7a font, r\u1ed3i google \u0111\u1ec3 t\u1ea3i v\u1ec1. C\u00f3 m\u1ed9t ti\u1ec7n \u00edch m\u1edf r\u1ed9ng cho tr\u00ecnh duy\u1ec7t Google Chrome t\u00ean l\u00e0 WhatFont<\/a> gi\u00fap b\u1ea1n l\u00e0m \u0111\u01b0\u1ee3c \u0111i\u1ec1u \u0111\u00f3. \u0110\u1ecba ch\u1ec9 \u1edf link v\u1eeba d\u1eabn. C\u00e1ch s\u1eed d\u1ee5ng r\u1ea5t \u0111\u01a1n gi\u1ea3n, b\u1ea1n ch\u1ec9 c\u1ea7n di chu\u1ed9t qua ch\u1eef c\u1ea7n bi\u1ebft font, n\u00f3 s\u1ebd th\u00f4ng b\u00e1o t\u00ean font cho b\u1ea1n, ngo\u00e0i ra b\u1ea1n s\u1ebd bi\u1ebft th\u00eam c\u00e1c th\u00f4ng tin kh\u00e1c nh\u01b0 k\u00edch c\u1ee1, line height v\u00e0 m\u00e0u ch\u1eef \u0111ang d\u00f9ng.<\/li><\/ul>\n\n\n\n<\/figure><\/div>\n\n\n<\/p>\n","protected":false},"excerpt":{"rendered":"Th\u1ef1c ra th\u1ebf gi\u1edbi web kh\u00f4ng d\u00f9ng nhi\u1ec1u font, b\u1ea1n s\u1ebd b\u1ea5t ng\u1edd khi bi\u1ebft c\u00f3 \u0111\u1ebfn 100 ng\u00e0n c\u00e1c lo\u1ea1i font ch\u1eef kh\u00e1c nhau, nh\u01b0ng h\u00e0ng t\u1ef7 trang web m\u00e0 ch\u00fang ta th\u1ea5y ng\u00e0y nay v\u1eabn ch\u1ec9 d\u00f9ng kho\u1ea3ng 10 font ph\u1ed5 bi\u1ebfn – c\u00f2n g\u1ecdi l\u00e0 font web an to\u00e0n (web safe font). …<\/p>\n","protected":false},"author":1,"featured_media":1205,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[229],"tags":[],"yoast_head":"\nC\u00e1ch nh\u00fang font v\u00e0o web v\u1edbi @font-face, k\u1ef7 nguy\u00ean c\u1ee7a Typography \u0111\u00e3 \u0111\u1ebfn • Ki\u1ebfn c\u00e0ng<\/title>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\t\n","yoast_head_json":{"title":"C\u00e1ch nh\u00fang font v\u00e0o web v\u1edbi @font-face, k\u1ef7 nguy\u00ean c\u1ee7a Typography \u0111\u00e3 \u0111\u1ebfn • 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\/nhung-font-web-font-face\/","og_locale":"vi_VN","og_type":"article","og_title":"C\u00e1ch nh\u00fang font v\u00e0o web v\u1edbi @font-face, k\u1ef7 nguy\u00ean c\u1ee7a Typography \u0111\u00e3 \u0111\u1ebfn • Ki\u1ebfn c\u00e0ng","og_description":"Th\u1ef1c ra th\u1ebf gi\u1edbi web kh\u00f4ng d\u00f9ng nhi\u1ec1u font, b\u1ea1n s\u1ebd b\u1ea5t ng\u1edd khi bi\u1ebft c\u00f3 \u0111\u1ebfn 100 ng\u00e0n c\u00e1c lo\u1ea1i font ch\u1eef kh\u00e1c nhau, nh\u01b0ng h\u00e0ng t\u1ef7 trang web m\u00e0 ch\u00fang ta th\u1ea5y ng\u00e0y nay v\u1eabn ch\u1ec9 d\u00f9ng kho\u1ea3ng 10 font ph\u1ed5 bi\u1ebfn – c\u00f2n g\u1ecdi l\u00e0 font web an to\u00e0n (web safe font). …","og_url":"https:\/\/kiencang.net\/nhung-font-web-font-face\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2013-07-10T17:08:00+00:00","article_modified_time":"2022-08-20T08:59:14+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":"8 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/nhung-font-web-font-face\/","url":"https:\/\/kiencang.net\/nhung-font-web-font-face\/","name":"C\u00e1ch nh\u00fang font v\u00e0o web v\u1edbi @font-face, k\u1ef7 nguy\u00ean c\u1ee7a Typography \u0111\u00e3 \u0111\u1ebfn • Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2013-07-10T17:08:00+00:00","dateModified":"2022-08-20T08:59:14+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/nhung-font-web-font-face\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/nhung-font-web-font-face\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/nhung-font-web-font-face\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"C\u00e1ch nh\u00fang font v\u00e0o web v\u1edbi @font-face, k\u1ef7 nguy\u00ean c\u1ee7a Typography \u0111\u00e3 \u0111\u1ebfn"}]},{"@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\/325"}],"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=325"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/325\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=325"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=325"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=325"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
V\u1edbi code tr\u00ean th\u00ec c\u1ea5u tr\u00fac th\u01b0 m\u1ee5c trang web c\u1ee7a b\u1ea1n ph\u1ea3i gi\u1ed1ng nh\u01b0 h\u00ecnh sau:<\/p>\n\n\n
\u0110\u00e2y l\u00e0 c\u1ea5u tr\u00fac m\u00e0 \u0111a s\u1ed1 m\u1ecdi ng\u01b0\u1eddi th\u01b0\u1eddng d\u00f9ng, trong \u0111\u00f3 c\u00e1c file html \u1edf b\u00ean ngo\u00e0i, v\u00e0 t\u1eebng ph\u1ea7n chuy\u00ean bi\u1ec7t c\u00f3 th\u01b0 m\u1ee5c ri\u00eang nh\u01b0 css \u0111\u1ec3 ch\u1ee9a c\u00e1c file CSS, fonts \u0111\u1ec3 ch\u1ee9a c\u00e1c Fonts l\u1ea1 m\u1eaft c\u1ee7a ch\u00fang ta…<\/p>\n\n\n\n
font-family:font_strong<\/code><\/span> l\u00e0 t\u00ean m\u00e0 ta mu\u1ed1n \u0111\u1eb7t cho font m\u00ecnh nh\u00fang, b\u1ea1n \u0111\u1eb7t t\u00ean nh\u01b0 th\u1ebf n\u00e0o l\u00e0 t\u00f9y \u00fd b\u1ea1n.<\/li>D\u00f2ng th\u1ee9 hai src:url('..\/fonts\/Captureit.ttf')<\/code><\/span> \u0111\u00e2y l\u00e0 ngu\u1ed3n d\u1eabn c\u1ee7a font. B\u1ea1n ch\u00fa \u00fd 2 d\u1ea5u ch\u1ea5m v\u00e0 thanh xu\u1ed9c. \u0110\u01b0\u1eddng d\u1eabn sai th\u00ec ch\u1eafc ch\u1eafn s\u1ebd kh\u00f4ng l\u00ean cho n\u00ean ph\u1ea7n n\u00e0y ph\u1ea3i \u0111\u1eb7c bi\u1ec7t ch\u00fa \u00fd th\u1ef1c hi\u1ec7n th\u1eadt ch\u00ednh x\u00e1c. format('truetype')<\/code><\/span> l\u00e0 \u0111\u1ecbnh d\u1ea1ng c\u1ee7a font, \u0111u\u00f4i .ttf l\u00e0 truetype.<\/li>C\u00e1c d\u00f2ng ti\u1ebfp theo url('..\/fonts\/Captureit.eot#iefix') format('embedded-opentype') url('..\/fonts\/Captureit.woff') format('woff');<\/code><\/span> c\u0169ng t\u01b0\u01a1ng t\u1ef1, ch\u1ec9 kh\u00e1c \u0111\u00e2y l\u00e0 \u0111\u1ecbnh d\u1ea1ng font kh\u00e1c. N\u1ebfu b\u1ea1n ch\u1ec9 c\u00f3 font .ttf th\u00ec ch\u1ea1y tr\u00ean Google Chrome v\u00e0 FireFox th\u00ec \u0111\u01b0\u1ee3c nh\u01b0ng s\u1ebd kh\u00f4ng ch\u1ea1y \u0111\u01b0\u1ee3c tr\u00ean IE. \u0110\u1ec3 ch\u1ea1y \u0111\u01b0\u1ee3c tr\u00ean IE ph\u1ea3i c\u00f3 font d\u1ea1ng .eot<\/li>font-weight:normal; font-style:normal;<\/code><\/span> ngh\u0129a l\u00e0 b\u1ea1n \u0111\u1ec3 font \u1edf d\u1ea1ng th\u01b0\u1eddng (regular), kh\u00f4ng \u0111\u1eadm, kh\u00f4ng nh\u1ea1t.<\/li><\/ul>\n\n\n\nV\u1eady l\u00e0 xong, gi\u1edd ta d\u00f9ng font c\u0169ng y nh\u01b0 b\u00ecnh th\u01b0\u1eddng, ngh\u0129a l\u00e0 ch\u1ed7 n\u00e0o c\u1ea7n d\u00f9ng font nh\u00fang ta khai b\u00e1o font-family l\u00e0 t\u00ean font m\u00e0 ta \u0111\u00e3 \u0111\u1eb7t v\u1eeba n\u00e3y l\u00e0 \u0111\u01b0\u1ee3c, gi\u1ea3 d\u1ee5 gi\u1edd t\u00f4i \u0111\u1eb7t c\u00e1c ti\u00eau \u0111\u1ec1 .title l\u00e0 font nh\u00fang \u1edf tr\u00ean th\u00ec t\u00f4i vi\u1ebft nh\u01b0 sau trong CSS:<\/p>\n\n\n\n.title {font-family:font_strong;}<\/code><\/pre>\n\n\n\n\n\n\n\n<\/span>Tr\u00ecnh duy\u1ec7t h\u1ed7 tr\u1ee3<\/span><\/h2>\n\n\n\nT\u1ea5t c\u1ea3 c\u00e1c tr\u00ecnh duy\u1ec7t ph\u1ed5 th\u00f4ng g\u1ed3m Chrome, FireFox, Opera, Safari v\u00e0 IE \u0111\u1ec1u h\u1ed7 tr\u1ee3 nh\u00fang font, tuy nhi\u00ean lo\u1ea1i font m\u00e0 ch\u00fang support th\u00ec c\u00f3 kh\u00e1c nhau.<\/p>\n\n\n\nInternet Explorer 9+, Firefox, Chrome, Safari v\u00e0 Opera h\u1ed7 tr\u1ee3 WOFF (Web Open Font Format) font.<\/li>Firefox, Chrome, Safari v\u00e0 Opera c\u0169ng h\u1ed7 tr\u1ee3 TTF (True Type Fonts) v\u00e0 OTF (OpenType Fonts).<\/li>Chrome, Safari v\u00e0 Opera h\u1ed7 tr\u1ee3 SVG fonts\/shapes.<\/li>Internet Explorer h\u1ed7 tr\u1ee3 EOT (Embedded OpenType) fonts.<\/li><\/ul>\n\n\n\n\n\n\n\n<\/span>Nh\u00fang font tr\u1ef1c tuy\u1ebfn<\/span><\/h2>\n\n\n\nC\u00e1i n\u00e0y v\u1eeba c\u00f3 \u0111i\u1ec3m gi\u1ed1ng v\u1edbi @font-face m\u00e0 c\u0169ng v\u1eeba kh\u00e1c n\u1eefa:<\/p>\n\n\n\nGi\u1ed1ng \u1edf ch\u1ed7, font s\u1eed d\u1ee5ng \u0111\u1ec1u t\u1ea3i t\u1eeb n\u01a1i kh\u00e1c v\u1ec1, v\u00e0 \u0111\u01b0\u1ee3c d\u1ef1 tr\u00f9 l\u00e0 kh\u00f4ng c\u00f3 tr\u00ean m\u00e1y ng\u01b0\u1eddi d\u00f9ng<\/li>Kh\u00e1c \u1edf ch\u1ed7, @font-face l\u00e0 t\u1ea3i t\u1eeb host c\u1ee7a b\u1ea1n, trong khi nh\u00fang font tr\u1ef1c tuy\u1ebfn th\u00ec t\u1ea3i t\u1eeb server d\u1ecbch v\u1ee5 ri\u00eang<\/li><\/ul>\n\n\n\nH\u00f4m nay t\u00f4i s\u1ebd gi\u1edbi thi\u1ec7u v\u1edbi c\u00e1c b\u1ea1n c\u00e1ch nh\u00fang font b\u1eb1ng Google Font, \u01b0u \u0111i\u1ec3m: <\/p>\n\n\n\nNhanh, \u0111\u1ea3m b\u1ea3o: V\u00e2ng, v\u00ec n\u00f3 l\u00e0 host c\u1ee7a Google, n\u00ean t\u1ed1c \u0111\u1ed9 \u1ed5n \u0111\u1ecbnh, h\u1ea7u nh\u01b0 kh\u00f4ng b\u1ecb h\u1ecfng h\u00f3c, n\u00ean b\u1ea1n c\u00f3 th\u1ec3 an t\u00e2m g\u1ea7n nh\u01b0 100%<\/li>Mi\u1ec5n ph\u00ed: B\u1ea1n kh\u00f4ng ph\u1ea3i m\u1ea5t ti\u1ec1n \u0111\u1ec3 s\u1eed d\u1ee5ng d\u1ecbch v\u1ee5 n\u00e0y. Th\u00eam v\u00e0o \u0111\u00f3 b\u1ea1n c\u0169ng gi\u00fap gi\u1ea3m b\u0103ng th\u00f4ng cho host c\u1ee7a b\u1ea1n<\/li>\u0110\u01a1n gi\u1ea3n: Code nh\u00fang c\u1ee7a n\u00f3 th\u1eadm ch\u00ed c\u00f2n \u0111\u01a1n gi\u1ea3n h\u01a1n @font-face. K\u1ebft qu\u1ea3 demo b\u1ea1n c\u00f3 th\u1ec3 xem ngay \u1edf d\u01b0\u1edbi.<\/li><\/ul>\n\n\n\nBlog Duc Anh Plus – Nguyen Duc Anh<\/div>\n\n\n\nC\u00e1ch l\u00e0m: <\/p>\n\n\n\nTruy c\u1eadp trang web <\/a>https:\/\/fonts.google.com\/<\/a> \u0111\u1ec3 ch\u1ecdn font m\u00e0 b\u1ea1n th\u00edch. Sau \u0111\u00f3 nh\u1ea5n v\u00e0o h\u00ecnh m\u0169i t\u00ean tr\u1ecf (Quick-use)<\/li><\/ul>\n\n\n\n<\/figure><\/div>\n\n\nM\u1ed9t c\u1eeda s\u1ed5 b\u1eadt ra, v\u00e0 Google cho b\u1ea1n \u0111o\u1ea1n code \u0111\u1ec3 \u0111\u01b0a v\u00e0o trong th\u1ebb head c\u1ee7a trang HTML (n\u00f3 g\u1ea7n gi\u1ed1ng v\u1edbi li\u00ean k\u1ebft CSS), code \u0111\u00f3 c\u00f3 d\u1ea1ng nh\u01b0 sau: <link href=\u2019http:\/\/fonts.googleapis.com\/css?family=Ruge+Boogie\u2019 rel=\u2019stylesheet\u2019 type=\u2019text\/css\u2019> <\/strong><\/li>B\u1ea1n c\u00f3 th\u1ec3 th\u1ea5y t\u00ean font trong v\u00ed d\u1ee5 n\u00e0y l\u00e0 Ruge Boogie, ti\u1ebfp theo, mu\u1ed1n s\u1eed d\u1ee5ng font n\u00e0y, th\u00ec trong CSS, b\u1ea1n vi\u1ebft nh\u01b0 sau: body {font-family: \u2018Ruge Boogie\u2019, cursive;font-size:20px;}<\/strong><\/li>Nh\u01b0 v\u1eady l\u00e0 \u0111\u00e3 xong r\u1ed3i, r\u1ea5t \u0111\u01a1n gi\u1ea3n ph\u1ea3i kh\u00f4ng. Th\u00f4ng tin th\u00eam l\u00e0 Google Font c\u00f3 kho\u1ea3ng h\u01a1n 600 font, nh\u01b0ng font ti\u1ebfng Vi\u1ec7t th\u00ec kh\u00f4ng nhi\u1ec1u l\u1eafm<\/li><\/ul>\n\n\n\nM\u1ed9t s\u1ed1 l\u01b0u \u00fd:<\/p>\n\n\n\nGoogle Font c\u00f3 \u0111\u1ebfn 3 ki\u1ec3u nh\u00fang: ti\u00eau chu\u1ea9n l\u00e0 ki\u1ec3u link \u1edf tr\u00ean, th\u1ee9 hai l\u00e0 @import v\u00e0 cu\u1ed1i c\u00f9ng l\u00e0 d\u00f9ng JavaScript \u2013 c\u1ea3 3 \u0111\u1ec1u cho k\u1ebft qu\u1ea3 t\u01b0\u01a1ng \u0111\u01b0\u01a1ng nhau, nh\u01b0ng ki\u1ec3u \u0111\u1ea7u ti\u00ean \u0111\u01b0\u1ee3c khuy\u00ean d\u00f9ng.<\/li>N\u1ebfu mu\u1ed1n \u0111\u1ed3ng b\u1ed9 h\u00f3a font tr\u00ean Google Font v\u1edbi Desktop h\u00e3y s\u1eed d\u1ee5ng ti\u1ec7n \u00edch SkyFonts<\/a>.<\/li>L\u1eddi cu\u1ed1i: h\u00e3y th\u1eadn tr\u1ecdng v\u1edbi nh\u00fang font t\u00f9y ch\u1ec9nh, \u0111\u1eebng nh\u00fang qu\u00e1 nhi\u1ec1u font kh\u00e1c nhau, v\u00ec nh\u00fang font ngh\u0129a l\u00e0 ng\u01b0\u1eddi d\u00f9ng ph\u1ea3i t\u1ea3i font v\u1ec1, nh\u00fang c\u00e1c font qu\u00e1 n\u1eb7ng ch\u1eafc ch\u1eafn l\u00e0m t\u0103ng th\u1eddi gian t\u1ea3i trang, c\u00e1i n\u00e0y l\u00e0 \u00e1p d\u1ee5ng chung ch\u1ee9 kh\u00f4ng ri\u00eang g\u00ec cho Google Font. Ngo\u00e0i ra qu\u00e1 nhi\u1ec1u font kh\u00e1c nhau tr\u00ean trang s\u1ebd g\u00e2y t\u00e1c d\u1ee5ng ng\u01b0\u1ee3c v\u1ec1 m\u1eb7t th\u1ea9m m\u1ef9.<\/li><\/ul>\n\n\n\nTr\u1ea3 l\u1eddi c\u00e2u h\u1ecfi ph\u1ee5 (M\u00e0 c\u0169ng c\u00f3 khi l\u00e0 ch\u00ednh)<\/h3>\n\n\n\nT\u00f4i c\u00f3 th\u1ec3 t\u00ecm font \u0111\u1ed9c v\u00e0 l\u1ea1 \u1edf \u0111\u00e2u?<\/strong> => Tr\u00ean m\u1ea1ng c\u00f3 r\u1ea5t nhi\u1ec1u trang web cung c\u1ea5p font mi\u1ec5n ph\u00ed cho ph\u00e9p b\u1ea1n t\u1ea3i v\u1ec1. B\u1ea1n kh\u00f4ng n\u00ean t\u1ea3i font c\u00f3 ph\u00ed b\u1ea5t h\u1ee3p ph\u00e1p v\u00ec n\u00f3 c\u00f3 th\u1ec3 l\u00e0m \u1ea3nh h\u01b0\u1edfng r\u1ea5t x\u1ea5u \u0111\u1ebfn trang web c\u1ee7a b\u1ea1n n\u1ebfu ch\u1ee7 s\u1edf h\u1eefu font kh\u1edfi ki\u1ec7n. Nhi\u1ec1u font mi\u1ec5n ph\u00ed ch\u1ea5t l\u01b0\u1ee3ng t\u01b0\u01a1ng \u0111\u01b0\u01a1ng th\u00ec t\u1ed9i g\u00ec ch\u00fang ta t\u1ea3i l\u1eadu \u0111\u00fang kh\u00f4ng \u1ea1? B\u1ea1n c\u00f3 th\u1ec3 v\u00e0o trang http:\/\/www.dafont.com\/<\/a> \u0111\u1ec3 t\u00ecm font \u01b0a th\u00edch nh\u00e9.<\/li>Font \u0111\u1eb9p cho ti\u1ebfng Vi\u1ec7t c\u00f3 nhi\u1ec1u kh\u00f4ng? <\/strong>=> \u0110\u00e1ng ti\u1ebfc l\u00e0 kh\u00f4ng! B\u1ea1n c\u00f3 kh\u00e1 \u00edt l\u1ef1a ch\u1ecdn \u0111\u1ed9c \u0111\u00e1o v\u1edbi ti\u1ebfng Vi\u1ec7t. \u1ede ph\u00eda ng\u01b0\u1ee3c l\u1ea1i, ti\u1ebfng Anh v\u00e0 c\u00e1c ng\u00f4n ng\u1eef ch\u00e2u \u00c2u n\u00f3i chung l\u1ea1i r\u1ea5t phong ph\u00fa.<\/li>T\u1ea1i sao t\u00f4i nh\u00fang m\u00e3i font m\u00e0 ch\u1eb3ng \u0111\u01b0\u1ee3c, tr\u00ecnh duy\u1ec7t l\u1edfm r\u1ed3i, b\u1ef1c m\u00ecnh qu\u00e1!<\/strong> => B\u1ea1n n\u00ean d\u00f9ng Google Chrome ho\u1eb7c FireFox \u0111\u1ec3 ki\u1ec3m tra nh\u00fang th\u00e0nh c\u00f4ng hay ch\u01b0a. C\u1ea3 2 tr\u00ecnh duy\u1ec7t n\u00e0y m\u00e0 kh\u00f4ng th\u00e0nh c\u00f4ng th\u00ec l\u00e0 t\u1ea1i b\u1ea1n nh\u00fang sai ch\u1ee9 kh\u00f4ng ph\u1ea3i t\u1ea1i tr\u00ecnh duy\u1ec7t. L\u1ed7i kh\u00f4ng nh\u00fang \u0111\u01b0\u1ee3c font, 10 ng\u01b0\u1eddi th\u00ec 9 ng\u01b0\u1eddi l\u00e0 do sai \u0111\u01b0\u1eddng d\u1eabn \u1edf c\u00e1i src: url<\/em>(\u2018\u0111\u01b0\u1eddng d\u1eabn font\u2019). N\u1ebfu Font nh\u00fang \u0111\u1ec3 c\u00f9ng c\u1ea5p v\u1edbi file HTML \u0111\u01b0\u1eddng d\u1eabn s\u1ebd kh\u00e1c v\u1edbi Font nh\u00fang b\u1ea1n \u0111\u1ec3 \u1edf trong th\u01b0 m\u1ee5c Font ri\u00eang. M\u00ecnh t\u1eebng b\u1ecb r\u1ed3i, kh\u00f4ng bi\u1ebft th\u1ebf l\u00e0 loay hoay c\u1ea3 ti\u1ebfng!<\/li>T\u00f4i c\u00f3 m\u1ed7i font \u0111\u1ecbnh d\u1ea1ng .ttf, l\u00e0m sao \u0111\u1ec3 t\u00f4i c\u00f3 \u0111\u1ecbnh d\u1ea1ng .eot cho \u00f4ng b\u1ea1n IE b\u00e2y gi\u1edd?<\/strong> => Gi\u1ed1ng nh\u01b0 video c\u00f3 th\u1ec3 chuy\u1ec3n \u0111\u1ed5i (convert) \u0111\u1ecbnh d\u1ea1ng, font c\u0169ng v\u1eady. B\u1ea1n c\u00f3 th\u1ec3 search tr\u00ean m\u1ea1ng ho\u1eb7c v\u00f4 trang n\u00e0y \u0111\u1ec3 chuy\u1ec3n \u0111\u1ed5i: http:\/\/www.fontsquirrel.com\/tools\/webfont-generator<\/a><\/li>T\u00f4i th\u1ea5y v\u00e0i font r\u1ea5t \u0111\u1eb9p tr\u00ean m\u1ed9t s\u1ed1 trang web, t\u00f4i mu\u1ed1n d\u00f9ng m\u1ea5y font \u0111\u00f3 nh\u01b0ng kh\u00f4ng bi\u1ebft th\u00f4ng tin v\u1ec1 n\u00f3, v\u1eady t\u00f4i ph\u1ea3i l\u00e0m g\u00ec?<\/strong> => \u0110\u1ec3 t\u00ecm m\u1ed9t font n\u00e0o \u0111\u00f3 th\u00ec c\u00e1ch \u0111\u01a1n gi\u1ea3n nh\u1ea5t l\u00e0 bi\u1ebft t\u00ean c\u1ee7a font, r\u1ed3i google \u0111\u1ec3 t\u1ea3i v\u1ec1. C\u00f3 m\u1ed9t ti\u1ec7n \u00edch m\u1edf r\u1ed9ng cho tr\u00ecnh duy\u1ec7t Google Chrome t\u00ean l\u00e0 WhatFont<\/a> gi\u00fap b\u1ea1n l\u00e0m \u0111\u01b0\u1ee3c \u0111i\u1ec1u \u0111\u00f3. \u0110\u1ecba ch\u1ec9 \u1edf link v\u1eeba d\u1eabn. C\u00e1ch s\u1eed d\u1ee5ng r\u1ea5t \u0111\u01a1n gi\u1ea3n, b\u1ea1n ch\u1ec9 c\u1ea7n di chu\u1ed9t qua ch\u1eef c\u1ea7n bi\u1ebft font, n\u00f3 s\u1ebd th\u00f4ng b\u00e1o t\u00ean font cho b\u1ea1n, ngo\u00e0i ra b\u1ea1n s\u1ebd bi\u1ebft th\u00eam c\u00e1c th\u00f4ng tin kh\u00e1c nh\u01b0 k\u00edch c\u1ee1, line height v\u00e0 m\u00e0u ch\u1eef \u0111ang d\u00f9ng.<\/li><\/ul>\n\n\n\n<\/figure><\/div>\n\n\n<\/p>\n","protected":false},"excerpt":{"rendered":"Th\u1ef1c ra th\u1ebf gi\u1edbi web kh\u00f4ng d\u00f9ng nhi\u1ec1u font, b\u1ea1n s\u1ebd b\u1ea5t ng\u1edd khi bi\u1ebft c\u00f3 \u0111\u1ebfn 100 ng\u00e0n c\u00e1c lo\u1ea1i font ch\u1eef kh\u00e1c nhau, nh\u01b0ng h\u00e0ng t\u1ef7 trang web m\u00e0 ch\u00fang ta th\u1ea5y ng\u00e0y nay v\u1eabn ch\u1ec9 d\u00f9ng kho\u1ea3ng 10 font ph\u1ed5 bi\u1ebfn – c\u00f2n g\u1ecdi l\u00e0 font web an to\u00e0n (web safe font). …<\/p>\n","protected":false},"author":1,"featured_media":1205,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[229],"tags":[],"yoast_head":"\nC\u00e1ch nh\u00fang font v\u00e0o web v\u1edbi @font-face, k\u1ef7 nguy\u00ean c\u1ee7a Typography \u0111\u00e3 \u0111\u1ebfn • Ki\u1ebfn c\u00e0ng<\/title>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\t\n","yoast_head_json":{"title":"C\u00e1ch nh\u00fang font v\u00e0o web v\u1edbi @font-face, k\u1ef7 nguy\u00ean c\u1ee7a Typography \u0111\u00e3 \u0111\u1ebfn • 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\/nhung-font-web-font-face\/","og_locale":"vi_VN","og_type":"article","og_title":"C\u00e1ch nh\u00fang font v\u00e0o web v\u1edbi @font-face, k\u1ef7 nguy\u00ean c\u1ee7a Typography \u0111\u00e3 \u0111\u1ebfn • Ki\u1ebfn c\u00e0ng","og_description":"Th\u1ef1c ra th\u1ebf gi\u1edbi web kh\u00f4ng d\u00f9ng nhi\u1ec1u font, b\u1ea1n s\u1ebd b\u1ea5t ng\u1edd khi bi\u1ebft c\u00f3 \u0111\u1ebfn 100 ng\u00e0n c\u00e1c lo\u1ea1i font ch\u1eef kh\u00e1c nhau, nh\u01b0ng h\u00e0ng t\u1ef7 trang web m\u00e0 ch\u00fang ta th\u1ea5y ng\u00e0y nay v\u1eabn ch\u1ec9 d\u00f9ng kho\u1ea3ng 10 font ph\u1ed5 bi\u1ebfn – c\u00f2n g\u1ecdi l\u00e0 font web an to\u00e0n (web safe font). …","og_url":"https:\/\/kiencang.net\/nhung-font-web-font-face\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2013-07-10T17:08:00+00:00","article_modified_time":"2022-08-20T08:59:14+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":"8 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/nhung-font-web-font-face\/","url":"https:\/\/kiencang.net\/nhung-font-web-font-face\/","name":"C\u00e1ch nh\u00fang font v\u00e0o web v\u1edbi @font-face, k\u1ef7 nguy\u00ean c\u1ee7a Typography \u0111\u00e3 \u0111\u1ebfn • Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2013-07-10T17:08:00+00:00","dateModified":"2022-08-20T08:59:14+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/nhung-font-web-font-face\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/nhung-font-web-font-face\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/nhung-font-web-font-face\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"C\u00e1ch nh\u00fang font v\u00e0o web v\u1edbi @font-face, k\u1ef7 nguy\u00ean c\u1ee7a Typography \u0111\u00e3 \u0111\u1ebfn"}]},{"@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\/325"}],"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=325"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/325\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=325"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=325"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=325"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
src:url('..\/fonts\/Captureit.ttf')<\/code><\/span> \u0111\u00e2y l\u00e0 ngu\u1ed3n d\u1eabn c\u1ee7a font. B\u1ea1n ch\u00fa \u00fd 2 d\u1ea5u ch\u1ea5m v\u00e0 thanh xu\u1ed9c. \u0110\u01b0\u1eddng d\u1eabn sai th\u00ec ch\u1eafc ch\u1eafn s\u1ebd kh\u00f4ng l\u00ean cho n\u00ean ph\u1ea7n n\u00e0y ph\u1ea3i \u0111\u1eb7c bi\u1ec7t ch\u00fa \u00fd th\u1ef1c hi\u1ec7n th\u1eadt ch\u00ednh x\u00e1c. format('truetype')<\/code><\/span> l\u00e0 \u0111\u1ecbnh d\u1ea1ng c\u1ee7a font, \u0111u\u00f4i .ttf l\u00e0 truetype.<\/li>C\u00e1c d\u00f2ng ti\u1ebfp theo url('..\/fonts\/Captureit.eot#iefix') format('embedded-opentype') url('..\/fonts\/Captureit.woff') format('woff');<\/code><\/span> c\u0169ng t\u01b0\u01a1ng t\u1ef1, ch\u1ec9 kh\u00e1c \u0111\u00e2y l\u00e0 \u0111\u1ecbnh d\u1ea1ng font kh\u00e1c. N\u1ebfu b\u1ea1n ch\u1ec9 c\u00f3 font .ttf th\u00ec ch\u1ea1y tr\u00ean Google Chrome v\u00e0 FireFox th\u00ec \u0111\u01b0\u1ee3c nh\u01b0ng s\u1ebd kh\u00f4ng ch\u1ea1y \u0111\u01b0\u1ee3c tr\u00ean IE. \u0110\u1ec3 ch\u1ea1y \u0111\u01b0\u1ee3c tr\u00ean IE ph\u1ea3i c\u00f3 font d\u1ea1ng .eot<\/li>font-weight:normal; font-style:normal;<\/code><\/span> ngh\u0129a l\u00e0 b\u1ea1n \u0111\u1ec3 font \u1edf d\u1ea1ng th\u01b0\u1eddng (regular), kh\u00f4ng \u0111\u1eadm, kh\u00f4ng nh\u1ea1t.<\/li><\/ul>\n\n\n\nV\u1eady l\u00e0 xong, gi\u1edd ta d\u00f9ng font c\u0169ng y nh\u01b0 b\u00ecnh th\u01b0\u1eddng, ngh\u0129a l\u00e0 ch\u1ed7 n\u00e0o c\u1ea7n d\u00f9ng font nh\u00fang ta khai b\u00e1o font-family l\u00e0 t\u00ean font m\u00e0 ta \u0111\u00e3 \u0111\u1eb7t v\u1eeba n\u00e3y l\u00e0 \u0111\u01b0\u1ee3c, gi\u1ea3 d\u1ee5 gi\u1edd t\u00f4i \u0111\u1eb7t c\u00e1c ti\u00eau \u0111\u1ec1 .title l\u00e0 font nh\u00fang \u1edf tr\u00ean th\u00ec t\u00f4i vi\u1ebft nh\u01b0 sau trong CSS:<\/p>\n\n\n\n.title {font-family:font_strong;}<\/code><\/pre>\n\n\n\n\n\n\n\n<\/span>Tr\u00ecnh duy\u1ec7t h\u1ed7 tr\u1ee3<\/span><\/h2>\n\n\n\nT\u1ea5t c\u1ea3 c\u00e1c tr\u00ecnh duy\u1ec7t ph\u1ed5 th\u00f4ng g\u1ed3m Chrome, FireFox, Opera, Safari v\u00e0 IE \u0111\u1ec1u h\u1ed7 tr\u1ee3 nh\u00fang font, tuy nhi\u00ean lo\u1ea1i font m\u00e0 ch\u00fang support th\u00ec c\u00f3 kh\u00e1c nhau.<\/p>\n\n\n\nInternet Explorer 9+, Firefox, Chrome, Safari v\u00e0 Opera h\u1ed7 tr\u1ee3 WOFF (Web Open Font Format) font.<\/li>Firefox, Chrome, Safari v\u00e0 Opera c\u0169ng h\u1ed7 tr\u1ee3 TTF (True Type Fonts) v\u00e0 OTF (OpenType Fonts).<\/li>Chrome, Safari v\u00e0 Opera h\u1ed7 tr\u1ee3 SVG fonts\/shapes.<\/li>Internet Explorer h\u1ed7 tr\u1ee3 EOT (Embedded OpenType) fonts.<\/li><\/ul>\n\n\n\n\n\n\n\n<\/span>Nh\u00fang font tr\u1ef1c tuy\u1ebfn<\/span><\/h2>\n\n\n\nC\u00e1i n\u00e0y v\u1eeba c\u00f3 \u0111i\u1ec3m gi\u1ed1ng v\u1edbi @font-face m\u00e0 c\u0169ng v\u1eeba kh\u00e1c n\u1eefa:<\/p>\n\n\n\nGi\u1ed1ng \u1edf ch\u1ed7, font s\u1eed d\u1ee5ng \u0111\u1ec1u t\u1ea3i t\u1eeb n\u01a1i kh\u00e1c v\u1ec1, v\u00e0 \u0111\u01b0\u1ee3c d\u1ef1 tr\u00f9 l\u00e0 kh\u00f4ng c\u00f3 tr\u00ean m\u00e1y ng\u01b0\u1eddi d\u00f9ng<\/li>Kh\u00e1c \u1edf ch\u1ed7, @font-face l\u00e0 t\u1ea3i t\u1eeb host c\u1ee7a b\u1ea1n, trong khi nh\u00fang font tr\u1ef1c tuy\u1ebfn th\u00ec t\u1ea3i t\u1eeb server d\u1ecbch v\u1ee5 ri\u00eang<\/li><\/ul>\n\n\n\nH\u00f4m nay t\u00f4i s\u1ebd gi\u1edbi thi\u1ec7u v\u1edbi c\u00e1c b\u1ea1n c\u00e1ch nh\u00fang font b\u1eb1ng Google Font, \u01b0u \u0111i\u1ec3m: <\/p>\n\n\n\nNhanh, \u0111\u1ea3m b\u1ea3o: V\u00e2ng, v\u00ec n\u00f3 l\u00e0 host c\u1ee7a Google, n\u00ean t\u1ed1c \u0111\u1ed9 \u1ed5n \u0111\u1ecbnh, h\u1ea7u nh\u01b0 kh\u00f4ng b\u1ecb h\u1ecfng h\u00f3c, n\u00ean b\u1ea1n c\u00f3 th\u1ec3 an t\u00e2m g\u1ea7n nh\u01b0 100%<\/li>Mi\u1ec5n ph\u00ed: B\u1ea1n kh\u00f4ng ph\u1ea3i m\u1ea5t ti\u1ec1n \u0111\u1ec3 s\u1eed d\u1ee5ng d\u1ecbch v\u1ee5 n\u00e0y. Th\u00eam v\u00e0o \u0111\u00f3 b\u1ea1n c\u0169ng gi\u00fap gi\u1ea3m b\u0103ng th\u00f4ng cho host c\u1ee7a b\u1ea1n<\/li>\u0110\u01a1n gi\u1ea3n: Code nh\u00fang c\u1ee7a n\u00f3 th\u1eadm ch\u00ed c\u00f2n \u0111\u01a1n gi\u1ea3n h\u01a1n @font-face. K\u1ebft qu\u1ea3 demo b\u1ea1n c\u00f3 th\u1ec3 xem ngay \u1edf d\u01b0\u1edbi.<\/li><\/ul>\n\n\n\nBlog Duc Anh Plus – Nguyen Duc Anh<\/div>\n\n\n\nC\u00e1ch l\u00e0m: <\/p>\n\n\n\nTruy c\u1eadp trang web <\/a>https:\/\/fonts.google.com\/<\/a> \u0111\u1ec3 ch\u1ecdn font m\u00e0 b\u1ea1n th\u00edch. Sau \u0111\u00f3 nh\u1ea5n v\u00e0o h\u00ecnh m\u0169i t\u00ean tr\u1ecf (Quick-use)<\/li><\/ul>\n\n\n\n<\/figure><\/div>\n\n\nM\u1ed9t c\u1eeda s\u1ed5 b\u1eadt ra, v\u00e0 Google cho b\u1ea1n \u0111o\u1ea1n code \u0111\u1ec3 \u0111\u01b0a v\u00e0o trong th\u1ebb head c\u1ee7a trang HTML (n\u00f3 g\u1ea7n gi\u1ed1ng v\u1edbi li\u00ean k\u1ebft CSS), code \u0111\u00f3 c\u00f3 d\u1ea1ng nh\u01b0 sau: <link href=\u2019http:\/\/fonts.googleapis.com\/css?family=Ruge+Boogie\u2019 rel=\u2019stylesheet\u2019 type=\u2019text\/css\u2019> <\/strong><\/li>B\u1ea1n c\u00f3 th\u1ec3 th\u1ea5y t\u00ean font trong v\u00ed d\u1ee5 n\u00e0y l\u00e0 Ruge Boogie, ti\u1ebfp theo, mu\u1ed1n s\u1eed d\u1ee5ng font n\u00e0y, th\u00ec trong CSS, b\u1ea1n vi\u1ebft nh\u01b0 sau: body {font-family: \u2018Ruge Boogie\u2019, cursive;font-size:20px;}<\/strong><\/li>Nh\u01b0 v\u1eady l\u00e0 \u0111\u00e3 xong r\u1ed3i, r\u1ea5t \u0111\u01a1n gi\u1ea3n ph\u1ea3i kh\u00f4ng. Th\u00f4ng tin th\u00eam l\u00e0 Google Font c\u00f3 kho\u1ea3ng h\u01a1n 600 font, nh\u01b0ng font ti\u1ebfng Vi\u1ec7t th\u00ec kh\u00f4ng nhi\u1ec1u l\u1eafm<\/li><\/ul>\n\n\n\nM\u1ed9t s\u1ed1 l\u01b0u \u00fd:<\/p>\n\n\n\nGoogle Font c\u00f3 \u0111\u1ebfn 3 ki\u1ec3u nh\u00fang: ti\u00eau chu\u1ea9n l\u00e0 ki\u1ec3u link \u1edf tr\u00ean, th\u1ee9 hai l\u00e0 @import v\u00e0 cu\u1ed1i c\u00f9ng l\u00e0 d\u00f9ng JavaScript \u2013 c\u1ea3 3 \u0111\u1ec1u cho k\u1ebft qu\u1ea3 t\u01b0\u01a1ng \u0111\u01b0\u01a1ng nhau, nh\u01b0ng ki\u1ec3u \u0111\u1ea7u ti\u00ean \u0111\u01b0\u1ee3c khuy\u00ean d\u00f9ng.<\/li>N\u1ebfu mu\u1ed1n \u0111\u1ed3ng b\u1ed9 h\u00f3a font tr\u00ean Google Font v\u1edbi Desktop h\u00e3y s\u1eed d\u1ee5ng ti\u1ec7n \u00edch SkyFonts<\/a>.<\/li>L\u1eddi cu\u1ed1i: h\u00e3y th\u1eadn tr\u1ecdng v\u1edbi nh\u00fang font t\u00f9y ch\u1ec9nh, \u0111\u1eebng nh\u00fang qu\u00e1 nhi\u1ec1u font kh\u00e1c nhau, v\u00ec nh\u00fang font ngh\u0129a l\u00e0 ng\u01b0\u1eddi d\u00f9ng ph\u1ea3i t\u1ea3i font v\u1ec1, nh\u00fang c\u00e1c font qu\u00e1 n\u1eb7ng ch\u1eafc ch\u1eafn l\u00e0m t\u0103ng th\u1eddi gian t\u1ea3i trang, c\u00e1i n\u00e0y l\u00e0 \u00e1p d\u1ee5ng chung ch\u1ee9 kh\u00f4ng ri\u00eang g\u00ec cho Google Font. Ngo\u00e0i ra qu\u00e1 nhi\u1ec1u font kh\u00e1c nhau tr\u00ean trang s\u1ebd g\u00e2y t\u00e1c d\u1ee5ng ng\u01b0\u1ee3c v\u1ec1 m\u1eb7t th\u1ea9m m\u1ef9.<\/li><\/ul>\n\n\n\nTr\u1ea3 l\u1eddi c\u00e2u h\u1ecfi ph\u1ee5 (M\u00e0 c\u0169ng c\u00f3 khi l\u00e0 ch\u00ednh)<\/h3>\n\n\n\nT\u00f4i c\u00f3 th\u1ec3 t\u00ecm font \u0111\u1ed9c v\u00e0 l\u1ea1 \u1edf \u0111\u00e2u?<\/strong> => Tr\u00ean m\u1ea1ng c\u00f3 r\u1ea5t nhi\u1ec1u trang web cung c\u1ea5p font mi\u1ec5n ph\u00ed cho ph\u00e9p b\u1ea1n t\u1ea3i v\u1ec1. B\u1ea1n kh\u00f4ng n\u00ean t\u1ea3i font c\u00f3 ph\u00ed b\u1ea5t h\u1ee3p ph\u00e1p v\u00ec n\u00f3 c\u00f3 th\u1ec3 l\u00e0m \u1ea3nh h\u01b0\u1edfng r\u1ea5t x\u1ea5u \u0111\u1ebfn trang web c\u1ee7a b\u1ea1n n\u1ebfu ch\u1ee7 s\u1edf h\u1eefu font kh\u1edfi ki\u1ec7n. Nhi\u1ec1u font mi\u1ec5n ph\u00ed ch\u1ea5t l\u01b0\u1ee3ng t\u01b0\u01a1ng \u0111\u01b0\u01a1ng th\u00ec t\u1ed9i g\u00ec ch\u00fang ta t\u1ea3i l\u1eadu \u0111\u00fang kh\u00f4ng \u1ea1? B\u1ea1n c\u00f3 th\u1ec3 v\u00e0o trang http:\/\/www.dafont.com\/<\/a> \u0111\u1ec3 t\u00ecm font \u01b0a th\u00edch nh\u00e9.<\/li>Font \u0111\u1eb9p cho ti\u1ebfng Vi\u1ec7t c\u00f3 nhi\u1ec1u kh\u00f4ng? <\/strong>=> \u0110\u00e1ng ti\u1ebfc l\u00e0 kh\u00f4ng! B\u1ea1n c\u00f3 kh\u00e1 \u00edt l\u1ef1a ch\u1ecdn \u0111\u1ed9c \u0111\u00e1o v\u1edbi ti\u1ebfng Vi\u1ec7t. \u1ede ph\u00eda ng\u01b0\u1ee3c l\u1ea1i, ti\u1ebfng Anh v\u00e0 c\u00e1c ng\u00f4n ng\u1eef ch\u00e2u \u00c2u n\u00f3i chung l\u1ea1i r\u1ea5t phong ph\u00fa.<\/li>T\u1ea1i sao t\u00f4i nh\u00fang m\u00e3i font m\u00e0 ch\u1eb3ng \u0111\u01b0\u1ee3c, tr\u00ecnh duy\u1ec7t l\u1edfm r\u1ed3i, b\u1ef1c m\u00ecnh qu\u00e1!<\/strong> => B\u1ea1n n\u00ean d\u00f9ng Google Chrome ho\u1eb7c FireFox \u0111\u1ec3 ki\u1ec3m tra nh\u00fang th\u00e0nh c\u00f4ng hay ch\u01b0a. C\u1ea3 2 tr\u00ecnh duy\u1ec7t n\u00e0y m\u00e0 kh\u00f4ng th\u00e0nh c\u00f4ng th\u00ec l\u00e0 t\u1ea1i b\u1ea1n nh\u00fang sai ch\u1ee9 kh\u00f4ng ph\u1ea3i t\u1ea1i tr\u00ecnh duy\u1ec7t. L\u1ed7i kh\u00f4ng nh\u00fang \u0111\u01b0\u1ee3c font, 10 ng\u01b0\u1eddi th\u00ec 9 ng\u01b0\u1eddi l\u00e0 do sai \u0111\u01b0\u1eddng d\u1eabn \u1edf c\u00e1i src: url<\/em>(\u2018\u0111\u01b0\u1eddng d\u1eabn font\u2019). N\u1ebfu Font nh\u00fang \u0111\u1ec3 c\u00f9ng c\u1ea5p v\u1edbi file HTML \u0111\u01b0\u1eddng d\u1eabn s\u1ebd kh\u00e1c v\u1edbi Font nh\u00fang b\u1ea1n \u0111\u1ec3 \u1edf trong th\u01b0 m\u1ee5c Font ri\u00eang. M\u00ecnh t\u1eebng b\u1ecb r\u1ed3i, kh\u00f4ng bi\u1ebft th\u1ebf l\u00e0 loay hoay c\u1ea3 ti\u1ebfng!<\/li>T\u00f4i c\u00f3 m\u1ed7i font \u0111\u1ecbnh d\u1ea1ng .ttf, l\u00e0m sao \u0111\u1ec3 t\u00f4i c\u00f3 \u0111\u1ecbnh d\u1ea1ng .eot cho \u00f4ng b\u1ea1n IE b\u00e2y gi\u1edd?<\/strong> => Gi\u1ed1ng nh\u01b0 video c\u00f3 th\u1ec3 chuy\u1ec3n \u0111\u1ed5i (convert) \u0111\u1ecbnh d\u1ea1ng, font c\u0169ng v\u1eady. B\u1ea1n c\u00f3 th\u1ec3 search tr\u00ean m\u1ea1ng ho\u1eb7c v\u00f4 trang n\u00e0y \u0111\u1ec3 chuy\u1ec3n \u0111\u1ed5i: http:\/\/www.fontsquirrel.com\/tools\/webfont-generator<\/a><\/li>T\u00f4i th\u1ea5y v\u00e0i font r\u1ea5t \u0111\u1eb9p tr\u00ean m\u1ed9t s\u1ed1 trang web, t\u00f4i mu\u1ed1n d\u00f9ng m\u1ea5y font \u0111\u00f3 nh\u01b0ng kh\u00f4ng bi\u1ebft th\u00f4ng tin v\u1ec1 n\u00f3, v\u1eady t\u00f4i ph\u1ea3i l\u00e0m g\u00ec?<\/strong> => \u0110\u1ec3 t\u00ecm m\u1ed9t font n\u00e0o \u0111\u00f3 th\u00ec c\u00e1ch \u0111\u01a1n gi\u1ea3n nh\u1ea5t l\u00e0 bi\u1ebft t\u00ean c\u1ee7a font, r\u1ed3i google \u0111\u1ec3 t\u1ea3i v\u1ec1. C\u00f3 m\u1ed9t ti\u1ec7n \u00edch m\u1edf r\u1ed9ng cho tr\u00ecnh duy\u1ec7t Google Chrome t\u00ean l\u00e0 WhatFont<\/a> gi\u00fap b\u1ea1n l\u00e0m \u0111\u01b0\u1ee3c \u0111i\u1ec1u \u0111\u00f3. \u0110\u1ecba ch\u1ec9 \u1edf link v\u1eeba d\u1eabn. C\u00e1ch s\u1eed d\u1ee5ng r\u1ea5t \u0111\u01a1n gi\u1ea3n, b\u1ea1n ch\u1ec9 c\u1ea7n di chu\u1ed9t qua ch\u1eef c\u1ea7n bi\u1ebft font, n\u00f3 s\u1ebd th\u00f4ng b\u00e1o t\u00ean font cho b\u1ea1n, ngo\u00e0i ra b\u1ea1n s\u1ebd bi\u1ebft th\u00eam c\u00e1c th\u00f4ng tin kh\u00e1c nh\u01b0 k\u00edch c\u1ee1, line height v\u00e0 m\u00e0u ch\u1eef \u0111ang d\u00f9ng.<\/li><\/ul>\n\n\n\n<\/figure><\/div>\n\n\n<\/p>\n","protected":false},"excerpt":{"rendered":"Th\u1ef1c ra th\u1ebf gi\u1edbi web kh\u00f4ng d\u00f9ng nhi\u1ec1u font, b\u1ea1n s\u1ebd b\u1ea5t ng\u1edd khi bi\u1ebft c\u00f3 \u0111\u1ebfn 100 ng\u00e0n c\u00e1c lo\u1ea1i font ch\u1eef kh\u00e1c nhau, nh\u01b0ng h\u00e0ng t\u1ef7 trang web m\u00e0 ch\u00fang ta th\u1ea5y ng\u00e0y nay v\u1eabn ch\u1ec9 d\u00f9ng kho\u1ea3ng 10 font ph\u1ed5 bi\u1ebfn – c\u00f2n g\u1ecdi l\u00e0 font web an to\u00e0n (web safe font). …<\/p>\n","protected":false},"author":1,"featured_media":1205,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[229],"tags":[],"yoast_head":"\nC\u00e1ch nh\u00fang font v\u00e0o web v\u1edbi @font-face, k\u1ef7 nguy\u00ean c\u1ee7a Typography \u0111\u00e3 \u0111\u1ebfn • Ki\u1ebfn c\u00e0ng<\/title>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\t\n","yoast_head_json":{"title":"C\u00e1ch nh\u00fang font v\u00e0o web v\u1edbi @font-face, k\u1ef7 nguy\u00ean c\u1ee7a Typography \u0111\u00e3 \u0111\u1ebfn • 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\/nhung-font-web-font-face\/","og_locale":"vi_VN","og_type":"article","og_title":"C\u00e1ch nh\u00fang font v\u00e0o web v\u1edbi @font-face, k\u1ef7 nguy\u00ean c\u1ee7a Typography \u0111\u00e3 \u0111\u1ebfn • Ki\u1ebfn c\u00e0ng","og_description":"Th\u1ef1c ra th\u1ebf gi\u1edbi web kh\u00f4ng d\u00f9ng nhi\u1ec1u font, b\u1ea1n s\u1ebd b\u1ea5t ng\u1edd khi bi\u1ebft c\u00f3 \u0111\u1ebfn 100 ng\u00e0n c\u00e1c lo\u1ea1i font ch\u1eef kh\u00e1c nhau, nh\u01b0ng h\u00e0ng t\u1ef7 trang web m\u00e0 ch\u00fang ta th\u1ea5y ng\u00e0y nay v\u1eabn ch\u1ec9 d\u00f9ng kho\u1ea3ng 10 font ph\u1ed5 bi\u1ebfn – c\u00f2n g\u1ecdi l\u00e0 font web an to\u00e0n (web safe font). …","og_url":"https:\/\/kiencang.net\/nhung-font-web-font-face\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2013-07-10T17:08:00+00:00","article_modified_time":"2022-08-20T08:59:14+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":"8 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/nhung-font-web-font-face\/","url":"https:\/\/kiencang.net\/nhung-font-web-font-face\/","name":"C\u00e1ch nh\u00fang font v\u00e0o web v\u1edbi @font-face, k\u1ef7 nguy\u00ean c\u1ee7a Typography \u0111\u00e3 \u0111\u1ebfn • Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2013-07-10T17:08:00+00:00","dateModified":"2022-08-20T08:59:14+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/nhung-font-web-font-face\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/nhung-font-web-font-face\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/nhung-font-web-font-face\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"C\u00e1ch nh\u00fang font v\u00e0o web v\u1edbi @font-face, k\u1ef7 nguy\u00ean c\u1ee7a Typography \u0111\u00e3 \u0111\u1ebfn"}]},{"@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\/325"}],"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=325"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/325\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=325"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=325"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=325"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
format('truetype')<\/code><\/span> l\u00e0 \u0111\u1ecbnh d\u1ea1ng c\u1ee7a font, \u0111u\u00f4i .ttf l\u00e0 truetype.<\/li>C\u00e1c d\u00f2ng ti\u1ebfp theo url('..\/fonts\/Captureit.eot#iefix') format('embedded-opentype') url('..\/fonts\/Captureit.woff') format('woff');<\/code><\/span> c\u0169ng t\u01b0\u01a1ng t\u1ef1, ch\u1ec9 kh\u00e1c \u0111\u00e2y l\u00e0 \u0111\u1ecbnh d\u1ea1ng font kh\u00e1c. N\u1ebfu b\u1ea1n ch\u1ec9 c\u00f3 font .ttf th\u00ec ch\u1ea1y tr\u00ean Google Chrome v\u00e0 FireFox th\u00ec \u0111\u01b0\u1ee3c nh\u01b0ng s\u1ebd kh\u00f4ng ch\u1ea1y \u0111\u01b0\u1ee3c tr\u00ean IE. \u0110\u1ec3 ch\u1ea1y \u0111\u01b0\u1ee3c tr\u00ean IE ph\u1ea3i c\u00f3 font d\u1ea1ng .eot<\/li>font-weight:normal; font-style:normal;<\/code><\/span> ngh\u0129a l\u00e0 b\u1ea1n \u0111\u1ec3 font \u1edf d\u1ea1ng th\u01b0\u1eddng (regular), kh\u00f4ng \u0111\u1eadm, kh\u00f4ng nh\u1ea1t.<\/li><\/ul>\n\n\n\nV\u1eady l\u00e0 xong, gi\u1edd ta d\u00f9ng font c\u0169ng y nh\u01b0 b\u00ecnh th\u01b0\u1eddng, ngh\u0129a l\u00e0 ch\u1ed7 n\u00e0o c\u1ea7n d\u00f9ng font nh\u00fang ta khai b\u00e1o font-family l\u00e0 t\u00ean font m\u00e0 ta \u0111\u00e3 \u0111\u1eb7t v\u1eeba n\u00e3y l\u00e0 \u0111\u01b0\u1ee3c, gi\u1ea3 d\u1ee5 gi\u1edd t\u00f4i \u0111\u1eb7t c\u00e1c ti\u00eau \u0111\u1ec1 .title l\u00e0 font nh\u00fang \u1edf tr\u00ean th\u00ec t\u00f4i vi\u1ebft nh\u01b0 sau trong CSS:<\/p>\n\n\n\n.title {font-family:font_strong;}<\/code><\/pre>\n\n\n\n\n\n\n\n<\/span>Tr\u00ecnh duy\u1ec7t h\u1ed7 tr\u1ee3<\/span><\/h2>\n\n\n\nT\u1ea5t c\u1ea3 c\u00e1c tr\u00ecnh duy\u1ec7t ph\u1ed5 th\u00f4ng g\u1ed3m Chrome, FireFox, Opera, Safari v\u00e0 IE \u0111\u1ec1u h\u1ed7 tr\u1ee3 nh\u00fang font, tuy nhi\u00ean lo\u1ea1i font m\u00e0 ch\u00fang support th\u00ec c\u00f3 kh\u00e1c nhau.<\/p>\n\n\n\nInternet Explorer 9+, Firefox, Chrome, Safari v\u00e0 Opera h\u1ed7 tr\u1ee3 WOFF (Web Open Font Format) font.<\/li>Firefox, Chrome, Safari v\u00e0 Opera c\u0169ng h\u1ed7 tr\u1ee3 TTF (True Type Fonts) v\u00e0 OTF (OpenType Fonts).<\/li>Chrome, Safari v\u00e0 Opera h\u1ed7 tr\u1ee3 SVG fonts\/shapes.<\/li>Internet Explorer h\u1ed7 tr\u1ee3 EOT (Embedded OpenType) fonts.<\/li><\/ul>\n\n\n\n\n\n\n\n<\/span>Nh\u00fang font tr\u1ef1c tuy\u1ebfn<\/span><\/h2>\n\n\n\nC\u00e1i n\u00e0y v\u1eeba c\u00f3 \u0111i\u1ec3m gi\u1ed1ng v\u1edbi @font-face m\u00e0 c\u0169ng v\u1eeba kh\u00e1c n\u1eefa:<\/p>\n\n\n\nGi\u1ed1ng \u1edf ch\u1ed7, font s\u1eed d\u1ee5ng \u0111\u1ec1u t\u1ea3i t\u1eeb n\u01a1i kh\u00e1c v\u1ec1, v\u00e0 \u0111\u01b0\u1ee3c d\u1ef1 tr\u00f9 l\u00e0 kh\u00f4ng c\u00f3 tr\u00ean m\u00e1y ng\u01b0\u1eddi d\u00f9ng<\/li>Kh\u00e1c \u1edf ch\u1ed7, @font-face l\u00e0 t\u1ea3i t\u1eeb host c\u1ee7a b\u1ea1n, trong khi nh\u00fang font tr\u1ef1c tuy\u1ebfn th\u00ec t\u1ea3i t\u1eeb server d\u1ecbch v\u1ee5 ri\u00eang<\/li><\/ul>\n\n\n\nH\u00f4m nay t\u00f4i s\u1ebd gi\u1edbi thi\u1ec7u v\u1edbi c\u00e1c b\u1ea1n c\u00e1ch nh\u00fang font b\u1eb1ng Google Font, \u01b0u \u0111i\u1ec3m: <\/p>\n\n\n\nNhanh, \u0111\u1ea3m b\u1ea3o: V\u00e2ng, v\u00ec n\u00f3 l\u00e0 host c\u1ee7a Google, n\u00ean t\u1ed1c \u0111\u1ed9 \u1ed5n \u0111\u1ecbnh, h\u1ea7u nh\u01b0 kh\u00f4ng b\u1ecb h\u1ecfng h\u00f3c, n\u00ean b\u1ea1n c\u00f3 th\u1ec3 an t\u00e2m g\u1ea7n nh\u01b0 100%<\/li>Mi\u1ec5n ph\u00ed: B\u1ea1n kh\u00f4ng ph\u1ea3i m\u1ea5t ti\u1ec1n \u0111\u1ec3 s\u1eed d\u1ee5ng d\u1ecbch v\u1ee5 n\u00e0y. Th\u00eam v\u00e0o \u0111\u00f3 b\u1ea1n c\u0169ng gi\u00fap gi\u1ea3m b\u0103ng th\u00f4ng cho host c\u1ee7a b\u1ea1n<\/li>\u0110\u01a1n gi\u1ea3n: Code nh\u00fang c\u1ee7a n\u00f3 th\u1eadm ch\u00ed c\u00f2n \u0111\u01a1n gi\u1ea3n h\u01a1n @font-face. K\u1ebft qu\u1ea3 demo b\u1ea1n c\u00f3 th\u1ec3 xem ngay \u1edf d\u01b0\u1edbi.<\/li><\/ul>\n\n\n\nBlog Duc Anh Plus – Nguyen Duc Anh<\/div>\n\n\n\nC\u00e1ch l\u00e0m: <\/p>\n\n\n\nTruy c\u1eadp trang web <\/a>https:\/\/fonts.google.com\/<\/a> \u0111\u1ec3 ch\u1ecdn font m\u00e0 b\u1ea1n th\u00edch. Sau \u0111\u00f3 nh\u1ea5n v\u00e0o h\u00ecnh m\u0169i t\u00ean tr\u1ecf (Quick-use)<\/li><\/ul>\n\n\n\n<\/figure><\/div>\n\n\nM\u1ed9t c\u1eeda s\u1ed5 b\u1eadt ra, v\u00e0 Google cho b\u1ea1n \u0111o\u1ea1n code \u0111\u1ec3 \u0111\u01b0a v\u00e0o trong th\u1ebb head c\u1ee7a trang HTML (n\u00f3 g\u1ea7n gi\u1ed1ng v\u1edbi li\u00ean k\u1ebft CSS), code \u0111\u00f3 c\u00f3 d\u1ea1ng nh\u01b0 sau: <link href=\u2019http:\/\/fonts.googleapis.com\/css?family=Ruge+Boogie\u2019 rel=\u2019stylesheet\u2019 type=\u2019text\/css\u2019> <\/strong><\/li>B\u1ea1n c\u00f3 th\u1ec3 th\u1ea5y t\u00ean font trong v\u00ed d\u1ee5 n\u00e0y l\u00e0 Ruge Boogie, ti\u1ebfp theo, mu\u1ed1n s\u1eed d\u1ee5ng font n\u00e0y, th\u00ec trong CSS, b\u1ea1n vi\u1ebft nh\u01b0 sau: body {font-family: \u2018Ruge Boogie\u2019, cursive;font-size:20px;}<\/strong><\/li>Nh\u01b0 v\u1eady l\u00e0 \u0111\u00e3 xong r\u1ed3i, r\u1ea5t \u0111\u01a1n gi\u1ea3n ph\u1ea3i kh\u00f4ng. Th\u00f4ng tin th\u00eam l\u00e0 Google Font c\u00f3 kho\u1ea3ng h\u01a1n 600 font, nh\u01b0ng font ti\u1ebfng Vi\u1ec7t th\u00ec kh\u00f4ng nhi\u1ec1u l\u1eafm<\/li><\/ul>\n\n\n\nM\u1ed9t s\u1ed1 l\u01b0u \u00fd:<\/p>\n\n\n\nGoogle Font c\u00f3 \u0111\u1ebfn 3 ki\u1ec3u nh\u00fang: ti\u00eau chu\u1ea9n l\u00e0 ki\u1ec3u link \u1edf tr\u00ean, th\u1ee9 hai l\u00e0 @import v\u00e0 cu\u1ed1i c\u00f9ng l\u00e0 d\u00f9ng JavaScript \u2013 c\u1ea3 3 \u0111\u1ec1u cho k\u1ebft qu\u1ea3 t\u01b0\u01a1ng \u0111\u01b0\u01a1ng nhau, nh\u01b0ng ki\u1ec3u \u0111\u1ea7u ti\u00ean \u0111\u01b0\u1ee3c khuy\u00ean d\u00f9ng.<\/li>N\u1ebfu mu\u1ed1n \u0111\u1ed3ng b\u1ed9 h\u00f3a font tr\u00ean Google Font v\u1edbi Desktop h\u00e3y s\u1eed d\u1ee5ng ti\u1ec7n \u00edch SkyFonts<\/a>.<\/li>L\u1eddi cu\u1ed1i: h\u00e3y th\u1eadn tr\u1ecdng v\u1edbi nh\u00fang font t\u00f9y ch\u1ec9nh, \u0111\u1eebng nh\u00fang qu\u00e1 nhi\u1ec1u font kh\u00e1c nhau, v\u00ec nh\u00fang font ngh\u0129a l\u00e0 ng\u01b0\u1eddi d\u00f9ng ph\u1ea3i t\u1ea3i font v\u1ec1, nh\u00fang c\u00e1c font qu\u00e1 n\u1eb7ng ch\u1eafc ch\u1eafn l\u00e0m t\u0103ng th\u1eddi gian t\u1ea3i trang, c\u00e1i n\u00e0y l\u00e0 \u00e1p d\u1ee5ng chung ch\u1ee9 kh\u00f4ng ri\u00eang g\u00ec cho Google Font. Ngo\u00e0i ra qu\u00e1 nhi\u1ec1u font kh\u00e1c nhau tr\u00ean trang s\u1ebd g\u00e2y t\u00e1c d\u1ee5ng ng\u01b0\u1ee3c v\u1ec1 m\u1eb7t th\u1ea9m m\u1ef9.<\/li><\/ul>\n\n\n\nTr\u1ea3 l\u1eddi c\u00e2u h\u1ecfi ph\u1ee5 (M\u00e0 c\u0169ng c\u00f3 khi l\u00e0 ch\u00ednh)<\/h3>\n\n\n\nT\u00f4i c\u00f3 th\u1ec3 t\u00ecm font \u0111\u1ed9c v\u00e0 l\u1ea1 \u1edf \u0111\u00e2u?<\/strong> => Tr\u00ean m\u1ea1ng c\u00f3 r\u1ea5t nhi\u1ec1u trang web cung c\u1ea5p font mi\u1ec5n ph\u00ed cho ph\u00e9p b\u1ea1n t\u1ea3i v\u1ec1. B\u1ea1n kh\u00f4ng n\u00ean t\u1ea3i font c\u00f3 ph\u00ed b\u1ea5t h\u1ee3p ph\u00e1p v\u00ec n\u00f3 c\u00f3 th\u1ec3 l\u00e0m \u1ea3nh h\u01b0\u1edfng r\u1ea5t x\u1ea5u \u0111\u1ebfn trang web c\u1ee7a b\u1ea1n n\u1ebfu ch\u1ee7 s\u1edf h\u1eefu font kh\u1edfi ki\u1ec7n. Nhi\u1ec1u font mi\u1ec5n ph\u00ed ch\u1ea5t l\u01b0\u1ee3ng t\u01b0\u01a1ng \u0111\u01b0\u01a1ng th\u00ec t\u1ed9i g\u00ec ch\u00fang ta t\u1ea3i l\u1eadu \u0111\u00fang kh\u00f4ng \u1ea1? B\u1ea1n c\u00f3 th\u1ec3 v\u00e0o trang http:\/\/www.dafont.com\/<\/a> \u0111\u1ec3 t\u00ecm font \u01b0a th\u00edch nh\u00e9.<\/li>Font \u0111\u1eb9p cho ti\u1ebfng Vi\u1ec7t c\u00f3 nhi\u1ec1u kh\u00f4ng? <\/strong>=> \u0110\u00e1ng ti\u1ebfc l\u00e0 kh\u00f4ng! B\u1ea1n c\u00f3 kh\u00e1 \u00edt l\u1ef1a ch\u1ecdn \u0111\u1ed9c \u0111\u00e1o v\u1edbi ti\u1ebfng Vi\u1ec7t. \u1ede ph\u00eda ng\u01b0\u1ee3c l\u1ea1i, ti\u1ebfng Anh v\u00e0 c\u00e1c ng\u00f4n ng\u1eef ch\u00e2u \u00c2u n\u00f3i chung l\u1ea1i r\u1ea5t phong ph\u00fa.<\/li>T\u1ea1i sao t\u00f4i nh\u00fang m\u00e3i font m\u00e0 ch\u1eb3ng \u0111\u01b0\u1ee3c, tr\u00ecnh duy\u1ec7t l\u1edfm r\u1ed3i, b\u1ef1c m\u00ecnh qu\u00e1!<\/strong> => B\u1ea1n n\u00ean d\u00f9ng Google Chrome ho\u1eb7c FireFox \u0111\u1ec3 ki\u1ec3m tra nh\u00fang th\u00e0nh c\u00f4ng hay ch\u01b0a. C\u1ea3 2 tr\u00ecnh duy\u1ec7t n\u00e0y m\u00e0 kh\u00f4ng th\u00e0nh c\u00f4ng th\u00ec l\u00e0 t\u1ea1i b\u1ea1n nh\u00fang sai ch\u1ee9 kh\u00f4ng ph\u1ea3i t\u1ea1i tr\u00ecnh duy\u1ec7t. L\u1ed7i kh\u00f4ng nh\u00fang \u0111\u01b0\u1ee3c font, 10 ng\u01b0\u1eddi th\u00ec 9 ng\u01b0\u1eddi l\u00e0 do sai \u0111\u01b0\u1eddng d\u1eabn \u1edf c\u00e1i src: url<\/em>(\u2018\u0111\u01b0\u1eddng d\u1eabn font\u2019). N\u1ebfu Font nh\u00fang \u0111\u1ec3 c\u00f9ng c\u1ea5p v\u1edbi file HTML \u0111\u01b0\u1eddng d\u1eabn s\u1ebd kh\u00e1c v\u1edbi Font nh\u00fang b\u1ea1n \u0111\u1ec3 \u1edf trong th\u01b0 m\u1ee5c Font ri\u00eang. M\u00ecnh t\u1eebng b\u1ecb r\u1ed3i, kh\u00f4ng bi\u1ebft th\u1ebf l\u00e0 loay hoay c\u1ea3 ti\u1ebfng!<\/li>T\u00f4i c\u00f3 m\u1ed7i font \u0111\u1ecbnh d\u1ea1ng .ttf, l\u00e0m sao \u0111\u1ec3 t\u00f4i c\u00f3 \u0111\u1ecbnh d\u1ea1ng .eot cho \u00f4ng b\u1ea1n IE b\u00e2y gi\u1edd?<\/strong> => Gi\u1ed1ng nh\u01b0 video c\u00f3 th\u1ec3 chuy\u1ec3n \u0111\u1ed5i (convert) \u0111\u1ecbnh d\u1ea1ng, font c\u0169ng v\u1eady. B\u1ea1n c\u00f3 th\u1ec3 search tr\u00ean m\u1ea1ng ho\u1eb7c v\u00f4 trang n\u00e0y \u0111\u1ec3 chuy\u1ec3n \u0111\u1ed5i: http:\/\/www.fontsquirrel.com\/tools\/webfont-generator<\/a><\/li>T\u00f4i th\u1ea5y v\u00e0i font r\u1ea5t \u0111\u1eb9p tr\u00ean m\u1ed9t s\u1ed1 trang web, t\u00f4i mu\u1ed1n d\u00f9ng m\u1ea5y font \u0111\u00f3 nh\u01b0ng kh\u00f4ng bi\u1ebft th\u00f4ng tin v\u1ec1 n\u00f3, v\u1eady t\u00f4i ph\u1ea3i l\u00e0m g\u00ec?<\/strong> => \u0110\u1ec3 t\u00ecm m\u1ed9t font n\u00e0o \u0111\u00f3 th\u00ec c\u00e1ch \u0111\u01a1n gi\u1ea3n nh\u1ea5t l\u00e0 bi\u1ebft t\u00ean c\u1ee7a font, r\u1ed3i google \u0111\u1ec3 t\u1ea3i v\u1ec1. C\u00f3 m\u1ed9t ti\u1ec7n \u00edch m\u1edf r\u1ed9ng cho tr\u00ecnh duy\u1ec7t Google Chrome t\u00ean l\u00e0 WhatFont<\/a> gi\u00fap b\u1ea1n l\u00e0m \u0111\u01b0\u1ee3c \u0111i\u1ec1u \u0111\u00f3. \u0110\u1ecba ch\u1ec9 \u1edf link v\u1eeba d\u1eabn. C\u00e1ch s\u1eed d\u1ee5ng r\u1ea5t \u0111\u01a1n gi\u1ea3n, b\u1ea1n ch\u1ec9 c\u1ea7n di chu\u1ed9t qua ch\u1eef c\u1ea7n bi\u1ebft font, n\u00f3 s\u1ebd th\u00f4ng b\u00e1o t\u00ean font cho b\u1ea1n, ngo\u00e0i ra b\u1ea1n s\u1ebd bi\u1ebft th\u00eam c\u00e1c th\u00f4ng tin kh\u00e1c nh\u01b0 k\u00edch c\u1ee1, line height v\u00e0 m\u00e0u ch\u1eef \u0111ang d\u00f9ng.<\/li><\/ul>\n\n\n\n<\/figure><\/div>\n\n\n<\/p>\n","protected":false},"excerpt":{"rendered":"Th\u1ef1c ra th\u1ebf gi\u1edbi web kh\u00f4ng d\u00f9ng nhi\u1ec1u font, b\u1ea1n s\u1ebd b\u1ea5t ng\u1edd khi bi\u1ebft c\u00f3 \u0111\u1ebfn 100 ng\u00e0n c\u00e1c lo\u1ea1i font ch\u1eef kh\u00e1c nhau, nh\u01b0ng h\u00e0ng t\u1ef7 trang web m\u00e0 ch\u00fang ta th\u1ea5y ng\u00e0y nay v\u1eabn ch\u1ec9 d\u00f9ng kho\u1ea3ng 10 font ph\u1ed5 bi\u1ebfn – c\u00f2n g\u1ecdi l\u00e0 font web an to\u00e0n (web safe font). …<\/p>\n","protected":false},"author":1,"featured_media":1205,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[229],"tags":[],"yoast_head":"\nC\u00e1ch nh\u00fang font v\u00e0o web v\u1edbi @font-face, k\u1ef7 nguy\u00ean c\u1ee7a Typography \u0111\u00e3 \u0111\u1ebfn • Ki\u1ebfn c\u00e0ng<\/title>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\t\n","yoast_head_json":{"title":"C\u00e1ch nh\u00fang font v\u00e0o web v\u1edbi @font-face, k\u1ef7 nguy\u00ean c\u1ee7a Typography \u0111\u00e3 \u0111\u1ebfn • 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\/nhung-font-web-font-face\/","og_locale":"vi_VN","og_type":"article","og_title":"C\u00e1ch nh\u00fang font v\u00e0o web v\u1edbi @font-face, k\u1ef7 nguy\u00ean c\u1ee7a Typography \u0111\u00e3 \u0111\u1ebfn • Ki\u1ebfn c\u00e0ng","og_description":"Th\u1ef1c ra th\u1ebf gi\u1edbi web kh\u00f4ng d\u00f9ng nhi\u1ec1u font, b\u1ea1n s\u1ebd b\u1ea5t ng\u1edd khi bi\u1ebft c\u00f3 \u0111\u1ebfn 100 ng\u00e0n c\u00e1c lo\u1ea1i font ch\u1eef kh\u00e1c nhau, nh\u01b0ng h\u00e0ng t\u1ef7 trang web m\u00e0 ch\u00fang ta th\u1ea5y ng\u00e0y nay v\u1eabn ch\u1ec9 d\u00f9ng kho\u1ea3ng 10 font ph\u1ed5 bi\u1ebfn – c\u00f2n g\u1ecdi l\u00e0 font web an to\u00e0n (web safe font). …","og_url":"https:\/\/kiencang.net\/nhung-font-web-font-face\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2013-07-10T17:08:00+00:00","article_modified_time":"2022-08-20T08:59:14+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":"8 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/nhung-font-web-font-face\/","url":"https:\/\/kiencang.net\/nhung-font-web-font-face\/","name":"C\u00e1ch nh\u00fang font v\u00e0o web v\u1edbi @font-face, k\u1ef7 nguy\u00ean c\u1ee7a Typography \u0111\u00e3 \u0111\u1ebfn • Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2013-07-10T17:08:00+00:00","dateModified":"2022-08-20T08:59:14+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/nhung-font-web-font-face\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/nhung-font-web-font-face\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/nhung-font-web-font-face\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"C\u00e1ch nh\u00fang font v\u00e0o web v\u1edbi @font-face, k\u1ef7 nguy\u00ean c\u1ee7a Typography \u0111\u00e3 \u0111\u1ebfn"}]},{"@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\/325"}],"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=325"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/325\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=325"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=325"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=325"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
url('..\/fonts\/Captureit.eot#iefix') format('embedded-opentype') url('..\/fonts\/Captureit.woff') format('woff');<\/code><\/span> c\u0169ng t\u01b0\u01a1ng t\u1ef1, ch\u1ec9 kh\u00e1c \u0111\u00e2y l\u00e0 \u0111\u1ecbnh d\u1ea1ng font kh\u00e1c. N\u1ebfu b\u1ea1n ch\u1ec9 c\u00f3 font .ttf th\u00ec ch\u1ea1y tr\u00ean Google Chrome v\u00e0 FireFox th\u00ec \u0111\u01b0\u1ee3c nh\u01b0ng s\u1ebd kh\u00f4ng ch\u1ea1y \u0111\u01b0\u1ee3c tr\u00ean IE. \u0110\u1ec3 ch\u1ea1y \u0111\u01b0\u1ee3c tr\u00ean IE ph\u1ea3i c\u00f3 font d\u1ea1ng .eot<\/li>font-weight:normal; font-style:normal;<\/code><\/span> ngh\u0129a l\u00e0 b\u1ea1n \u0111\u1ec3 font \u1edf d\u1ea1ng th\u01b0\u1eddng (regular), kh\u00f4ng \u0111\u1eadm, kh\u00f4ng nh\u1ea1t.<\/li><\/ul>\n\n\n\nV\u1eady l\u00e0 xong, gi\u1edd ta d\u00f9ng font c\u0169ng y nh\u01b0 b\u00ecnh th\u01b0\u1eddng, ngh\u0129a l\u00e0 ch\u1ed7 n\u00e0o c\u1ea7n d\u00f9ng font nh\u00fang ta khai b\u00e1o font-family l\u00e0 t\u00ean font m\u00e0 ta \u0111\u00e3 \u0111\u1eb7t v\u1eeba n\u00e3y l\u00e0 \u0111\u01b0\u1ee3c, gi\u1ea3 d\u1ee5 gi\u1edd t\u00f4i \u0111\u1eb7t c\u00e1c ti\u00eau \u0111\u1ec1 .title l\u00e0 font nh\u00fang \u1edf tr\u00ean th\u00ec t\u00f4i vi\u1ebft nh\u01b0 sau trong CSS:<\/p>\n\n\n\n.title {font-family:font_strong;}<\/code><\/pre>\n\n\n\n\n\n\n\n<\/span>Tr\u00ecnh duy\u1ec7t h\u1ed7 tr\u1ee3<\/span><\/h2>\n\n\n\nT\u1ea5t c\u1ea3 c\u00e1c tr\u00ecnh duy\u1ec7t ph\u1ed5 th\u00f4ng g\u1ed3m Chrome, FireFox, Opera, Safari v\u00e0 IE \u0111\u1ec1u h\u1ed7 tr\u1ee3 nh\u00fang font, tuy nhi\u00ean lo\u1ea1i font m\u00e0 ch\u00fang support th\u00ec c\u00f3 kh\u00e1c nhau.<\/p>\n\n\n\nInternet Explorer 9+, Firefox, Chrome, Safari v\u00e0 Opera h\u1ed7 tr\u1ee3 WOFF (Web Open Font Format) font.<\/li>Firefox, Chrome, Safari v\u00e0 Opera c\u0169ng h\u1ed7 tr\u1ee3 TTF (True Type Fonts) v\u00e0 OTF (OpenType Fonts).<\/li>Chrome, Safari v\u00e0 Opera h\u1ed7 tr\u1ee3 SVG fonts\/shapes.<\/li>Internet Explorer h\u1ed7 tr\u1ee3 EOT (Embedded OpenType) fonts.<\/li><\/ul>\n\n\n\n\n\n\n\n<\/span>Nh\u00fang font tr\u1ef1c tuy\u1ebfn<\/span><\/h2>\n\n\n\nC\u00e1i n\u00e0y v\u1eeba c\u00f3 \u0111i\u1ec3m gi\u1ed1ng v\u1edbi @font-face m\u00e0 c\u0169ng v\u1eeba kh\u00e1c n\u1eefa:<\/p>\n\n\n\nGi\u1ed1ng \u1edf ch\u1ed7, font s\u1eed d\u1ee5ng \u0111\u1ec1u t\u1ea3i t\u1eeb n\u01a1i kh\u00e1c v\u1ec1, v\u00e0 \u0111\u01b0\u1ee3c d\u1ef1 tr\u00f9 l\u00e0 kh\u00f4ng c\u00f3 tr\u00ean m\u00e1y ng\u01b0\u1eddi d\u00f9ng<\/li>Kh\u00e1c \u1edf ch\u1ed7, @font-face l\u00e0 t\u1ea3i t\u1eeb host c\u1ee7a b\u1ea1n, trong khi nh\u00fang font tr\u1ef1c tuy\u1ebfn th\u00ec t\u1ea3i t\u1eeb server d\u1ecbch v\u1ee5 ri\u00eang<\/li><\/ul>\n\n\n\nH\u00f4m nay t\u00f4i s\u1ebd gi\u1edbi thi\u1ec7u v\u1edbi c\u00e1c b\u1ea1n c\u00e1ch nh\u00fang font b\u1eb1ng Google Font, \u01b0u \u0111i\u1ec3m: <\/p>\n\n\n\nNhanh, \u0111\u1ea3m b\u1ea3o: V\u00e2ng, v\u00ec n\u00f3 l\u00e0 host c\u1ee7a Google, n\u00ean t\u1ed1c \u0111\u1ed9 \u1ed5n \u0111\u1ecbnh, h\u1ea7u nh\u01b0 kh\u00f4ng b\u1ecb h\u1ecfng h\u00f3c, n\u00ean b\u1ea1n c\u00f3 th\u1ec3 an t\u00e2m g\u1ea7n nh\u01b0 100%<\/li>Mi\u1ec5n ph\u00ed: B\u1ea1n kh\u00f4ng ph\u1ea3i m\u1ea5t ti\u1ec1n \u0111\u1ec3 s\u1eed d\u1ee5ng d\u1ecbch v\u1ee5 n\u00e0y. Th\u00eam v\u00e0o \u0111\u00f3 b\u1ea1n c\u0169ng gi\u00fap gi\u1ea3m b\u0103ng th\u00f4ng cho host c\u1ee7a b\u1ea1n<\/li>\u0110\u01a1n gi\u1ea3n: Code nh\u00fang c\u1ee7a n\u00f3 th\u1eadm ch\u00ed c\u00f2n \u0111\u01a1n gi\u1ea3n h\u01a1n @font-face. K\u1ebft qu\u1ea3 demo b\u1ea1n c\u00f3 th\u1ec3 xem ngay \u1edf d\u01b0\u1edbi.<\/li><\/ul>\n\n\n\nBlog Duc Anh Plus – Nguyen Duc Anh<\/div>\n\n\n\nC\u00e1ch l\u00e0m: <\/p>\n\n\n\nTruy c\u1eadp trang web <\/a>https:\/\/fonts.google.com\/<\/a> \u0111\u1ec3 ch\u1ecdn font m\u00e0 b\u1ea1n th\u00edch. Sau \u0111\u00f3 nh\u1ea5n v\u00e0o h\u00ecnh m\u0169i t\u00ean tr\u1ecf (Quick-use)<\/li><\/ul>\n\n\n\n<\/figure><\/div>\n\n\nM\u1ed9t c\u1eeda s\u1ed5 b\u1eadt ra, v\u00e0 Google cho b\u1ea1n \u0111o\u1ea1n code \u0111\u1ec3 \u0111\u01b0a v\u00e0o trong th\u1ebb head c\u1ee7a trang HTML (n\u00f3 g\u1ea7n gi\u1ed1ng v\u1edbi li\u00ean k\u1ebft CSS), code \u0111\u00f3 c\u00f3 d\u1ea1ng nh\u01b0 sau: <link href=\u2019http:\/\/fonts.googleapis.com\/css?family=Ruge+Boogie\u2019 rel=\u2019stylesheet\u2019 type=\u2019text\/css\u2019> <\/strong><\/li>B\u1ea1n c\u00f3 th\u1ec3 th\u1ea5y t\u00ean font trong v\u00ed d\u1ee5 n\u00e0y l\u00e0 Ruge Boogie, ti\u1ebfp theo, mu\u1ed1n s\u1eed d\u1ee5ng font n\u00e0y, th\u00ec trong CSS, b\u1ea1n vi\u1ebft nh\u01b0 sau: body {font-family: \u2018Ruge Boogie\u2019, cursive;font-size:20px;}<\/strong><\/li>Nh\u01b0 v\u1eady l\u00e0 \u0111\u00e3 xong r\u1ed3i, r\u1ea5t \u0111\u01a1n gi\u1ea3n ph\u1ea3i kh\u00f4ng. Th\u00f4ng tin th\u00eam l\u00e0 Google Font c\u00f3 kho\u1ea3ng h\u01a1n 600 font, nh\u01b0ng font ti\u1ebfng Vi\u1ec7t th\u00ec kh\u00f4ng nhi\u1ec1u l\u1eafm<\/li><\/ul>\n\n\n\nM\u1ed9t s\u1ed1 l\u01b0u \u00fd:<\/p>\n\n\n\nGoogle Font c\u00f3 \u0111\u1ebfn 3 ki\u1ec3u nh\u00fang: ti\u00eau chu\u1ea9n l\u00e0 ki\u1ec3u link \u1edf tr\u00ean, th\u1ee9 hai l\u00e0 @import v\u00e0 cu\u1ed1i c\u00f9ng l\u00e0 d\u00f9ng JavaScript \u2013 c\u1ea3 3 \u0111\u1ec1u cho k\u1ebft qu\u1ea3 t\u01b0\u01a1ng \u0111\u01b0\u01a1ng nhau, nh\u01b0ng ki\u1ec3u \u0111\u1ea7u ti\u00ean \u0111\u01b0\u1ee3c khuy\u00ean d\u00f9ng.<\/li>N\u1ebfu mu\u1ed1n \u0111\u1ed3ng b\u1ed9 h\u00f3a font tr\u00ean Google Font v\u1edbi Desktop h\u00e3y s\u1eed d\u1ee5ng ti\u1ec7n \u00edch SkyFonts<\/a>.<\/li>L\u1eddi cu\u1ed1i: h\u00e3y th\u1eadn tr\u1ecdng v\u1edbi nh\u00fang font t\u00f9y ch\u1ec9nh, \u0111\u1eebng nh\u00fang qu\u00e1 nhi\u1ec1u font kh\u00e1c nhau, v\u00ec nh\u00fang font ngh\u0129a l\u00e0 ng\u01b0\u1eddi d\u00f9ng ph\u1ea3i t\u1ea3i font v\u1ec1, nh\u00fang c\u00e1c font qu\u00e1 n\u1eb7ng ch\u1eafc ch\u1eafn l\u00e0m t\u0103ng th\u1eddi gian t\u1ea3i trang, c\u00e1i n\u00e0y l\u00e0 \u00e1p d\u1ee5ng chung ch\u1ee9 kh\u00f4ng ri\u00eang g\u00ec cho Google Font. Ngo\u00e0i ra qu\u00e1 nhi\u1ec1u font kh\u00e1c nhau tr\u00ean trang s\u1ebd g\u00e2y t\u00e1c d\u1ee5ng ng\u01b0\u1ee3c v\u1ec1 m\u1eb7t th\u1ea9m m\u1ef9.<\/li><\/ul>\n\n\n\nTr\u1ea3 l\u1eddi c\u00e2u h\u1ecfi ph\u1ee5 (M\u00e0 c\u0169ng c\u00f3 khi l\u00e0 ch\u00ednh)<\/h3>\n\n\n\nT\u00f4i c\u00f3 th\u1ec3 t\u00ecm font \u0111\u1ed9c v\u00e0 l\u1ea1 \u1edf \u0111\u00e2u?<\/strong> => Tr\u00ean m\u1ea1ng c\u00f3 r\u1ea5t nhi\u1ec1u trang web cung c\u1ea5p font mi\u1ec5n ph\u00ed cho ph\u00e9p b\u1ea1n t\u1ea3i v\u1ec1. B\u1ea1n kh\u00f4ng n\u00ean t\u1ea3i font c\u00f3 ph\u00ed b\u1ea5t h\u1ee3p ph\u00e1p v\u00ec n\u00f3 c\u00f3 th\u1ec3 l\u00e0m \u1ea3nh h\u01b0\u1edfng r\u1ea5t x\u1ea5u \u0111\u1ebfn trang web c\u1ee7a b\u1ea1n n\u1ebfu ch\u1ee7 s\u1edf h\u1eefu font kh\u1edfi ki\u1ec7n. Nhi\u1ec1u font mi\u1ec5n ph\u00ed ch\u1ea5t l\u01b0\u1ee3ng t\u01b0\u01a1ng \u0111\u01b0\u01a1ng th\u00ec t\u1ed9i g\u00ec ch\u00fang ta t\u1ea3i l\u1eadu \u0111\u00fang kh\u00f4ng \u1ea1? B\u1ea1n c\u00f3 th\u1ec3 v\u00e0o trang http:\/\/www.dafont.com\/<\/a> \u0111\u1ec3 t\u00ecm font \u01b0a th\u00edch nh\u00e9.<\/li>Font \u0111\u1eb9p cho ti\u1ebfng Vi\u1ec7t c\u00f3 nhi\u1ec1u kh\u00f4ng? <\/strong>=> \u0110\u00e1ng ti\u1ebfc l\u00e0 kh\u00f4ng! B\u1ea1n c\u00f3 kh\u00e1 \u00edt l\u1ef1a ch\u1ecdn \u0111\u1ed9c \u0111\u00e1o v\u1edbi ti\u1ebfng Vi\u1ec7t. \u1ede ph\u00eda ng\u01b0\u1ee3c l\u1ea1i, ti\u1ebfng Anh v\u00e0 c\u00e1c ng\u00f4n ng\u1eef ch\u00e2u \u00c2u n\u00f3i chung l\u1ea1i r\u1ea5t phong ph\u00fa.<\/li>T\u1ea1i sao t\u00f4i nh\u00fang m\u00e3i font m\u00e0 ch\u1eb3ng \u0111\u01b0\u1ee3c, tr\u00ecnh duy\u1ec7t l\u1edfm r\u1ed3i, b\u1ef1c m\u00ecnh qu\u00e1!<\/strong> => B\u1ea1n n\u00ean d\u00f9ng Google Chrome ho\u1eb7c FireFox \u0111\u1ec3 ki\u1ec3m tra nh\u00fang th\u00e0nh c\u00f4ng hay ch\u01b0a. C\u1ea3 2 tr\u00ecnh duy\u1ec7t n\u00e0y m\u00e0 kh\u00f4ng th\u00e0nh c\u00f4ng th\u00ec l\u00e0 t\u1ea1i b\u1ea1n nh\u00fang sai ch\u1ee9 kh\u00f4ng ph\u1ea3i t\u1ea1i tr\u00ecnh duy\u1ec7t. L\u1ed7i kh\u00f4ng nh\u00fang \u0111\u01b0\u1ee3c font, 10 ng\u01b0\u1eddi th\u00ec 9 ng\u01b0\u1eddi l\u00e0 do sai \u0111\u01b0\u1eddng d\u1eabn \u1edf c\u00e1i src: url<\/em>(\u2018\u0111\u01b0\u1eddng d\u1eabn font\u2019). N\u1ebfu Font nh\u00fang \u0111\u1ec3 c\u00f9ng c\u1ea5p v\u1edbi file HTML \u0111\u01b0\u1eddng d\u1eabn s\u1ebd kh\u00e1c v\u1edbi Font nh\u00fang b\u1ea1n \u0111\u1ec3 \u1edf trong th\u01b0 m\u1ee5c Font ri\u00eang. M\u00ecnh t\u1eebng b\u1ecb r\u1ed3i, kh\u00f4ng bi\u1ebft th\u1ebf l\u00e0 loay hoay c\u1ea3 ti\u1ebfng!<\/li>T\u00f4i c\u00f3 m\u1ed7i font \u0111\u1ecbnh d\u1ea1ng .ttf, l\u00e0m sao \u0111\u1ec3 t\u00f4i c\u00f3 \u0111\u1ecbnh d\u1ea1ng .eot cho \u00f4ng b\u1ea1n IE b\u00e2y gi\u1edd?<\/strong> => Gi\u1ed1ng nh\u01b0 video c\u00f3 th\u1ec3 chuy\u1ec3n \u0111\u1ed5i (convert) \u0111\u1ecbnh d\u1ea1ng, font c\u0169ng v\u1eady. B\u1ea1n c\u00f3 th\u1ec3 search tr\u00ean m\u1ea1ng ho\u1eb7c v\u00f4 trang n\u00e0y \u0111\u1ec3 chuy\u1ec3n \u0111\u1ed5i: http:\/\/www.fontsquirrel.com\/tools\/webfont-generator<\/a><\/li>T\u00f4i th\u1ea5y v\u00e0i font r\u1ea5t \u0111\u1eb9p tr\u00ean m\u1ed9t s\u1ed1 trang web, t\u00f4i mu\u1ed1n d\u00f9ng m\u1ea5y font \u0111\u00f3 nh\u01b0ng kh\u00f4ng bi\u1ebft th\u00f4ng tin v\u1ec1 n\u00f3, v\u1eady t\u00f4i ph\u1ea3i l\u00e0m g\u00ec?<\/strong> => \u0110\u1ec3 t\u00ecm m\u1ed9t font n\u00e0o \u0111\u00f3 th\u00ec c\u00e1ch \u0111\u01a1n gi\u1ea3n nh\u1ea5t l\u00e0 bi\u1ebft t\u00ean c\u1ee7a font, r\u1ed3i google \u0111\u1ec3 t\u1ea3i v\u1ec1. C\u00f3 m\u1ed9t ti\u1ec7n \u00edch m\u1edf r\u1ed9ng cho tr\u00ecnh duy\u1ec7t Google Chrome t\u00ean l\u00e0 WhatFont<\/a> gi\u00fap b\u1ea1n l\u00e0m \u0111\u01b0\u1ee3c \u0111i\u1ec1u \u0111\u00f3. \u0110\u1ecba ch\u1ec9 \u1edf link v\u1eeba d\u1eabn. C\u00e1ch s\u1eed d\u1ee5ng r\u1ea5t \u0111\u01a1n gi\u1ea3n, b\u1ea1n ch\u1ec9 c\u1ea7n di chu\u1ed9t qua ch\u1eef c\u1ea7n bi\u1ebft font, n\u00f3 s\u1ebd th\u00f4ng b\u00e1o t\u00ean font cho b\u1ea1n, ngo\u00e0i ra b\u1ea1n s\u1ebd bi\u1ebft th\u00eam c\u00e1c th\u00f4ng tin kh\u00e1c nh\u01b0 k\u00edch c\u1ee1, line height v\u00e0 m\u00e0u ch\u1eef \u0111ang d\u00f9ng.<\/li><\/ul>\n\n\n\n<\/figure><\/div>\n\n\n<\/p>\n","protected":false},"excerpt":{"rendered":"Th\u1ef1c ra th\u1ebf gi\u1edbi web kh\u00f4ng d\u00f9ng nhi\u1ec1u font, b\u1ea1n s\u1ebd b\u1ea5t ng\u1edd khi bi\u1ebft c\u00f3 \u0111\u1ebfn 100 ng\u00e0n c\u00e1c lo\u1ea1i font ch\u1eef kh\u00e1c nhau, nh\u01b0ng h\u00e0ng t\u1ef7 trang web m\u00e0 ch\u00fang ta th\u1ea5y ng\u00e0y nay v\u1eabn ch\u1ec9 d\u00f9ng kho\u1ea3ng 10 font ph\u1ed5 bi\u1ebfn – c\u00f2n g\u1ecdi l\u00e0 font web an to\u00e0n (web safe font). …<\/p>\n","protected":false},"author":1,"featured_media":1205,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[229],"tags":[],"yoast_head":"\nC\u00e1ch nh\u00fang font v\u00e0o web v\u1edbi @font-face, k\u1ef7 nguy\u00ean c\u1ee7a Typography \u0111\u00e3 \u0111\u1ebfn • Ki\u1ebfn c\u00e0ng<\/title>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\t\n","yoast_head_json":{"title":"C\u00e1ch nh\u00fang font v\u00e0o web v\u1edbi @font-face, k\u1ef7 nguy\u00ean c\u1ee7a Typography \u0111\u00e3 \u0111\u1ebfn • 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\/nhung-font-web-font-face\/","og_locale":"vi_VN","og_type":"article","og_title":"C\u00e1ch nh\u00fang font v\u00e0o web v\u1edbi @font-face, k\u1ef7 nguy\u00ean c\u1ee7a Typography \u0111\u00e3 \u0111\u1ebfn • Ki\u1ebfn c\u00e0ng","og_description":"Th\u1ef1c ra th\u1ebf gi\u1edbi web kh\u00f4ng d\u00f9ng nhi\u1ec1u font, b\u1ea1n s\u1ebd b\u1ea5t ng\u1edd khi bi\u1ebft c\u00f3 \u0111\u1ebfn 100 ng\u00e0n c\u00e1c lo\u1ea1i font ch\u1eef kh\u00e1c nhau, nh\u01b0ng h\u00e0ng t\u1ef7 trang web m\u00e0 ch\u00fang ta th\u1ea5y ng\u00e0y nay v\u1eabn ch\u1ec9 d\u00f9ng kho\u1ea3ng 10 font ph\u1ed5 bi\u1ebfn – c\u00f2n g\u1ecdi l\u00e0 font web an to\u00e0n (web safe font). …","og_url":"https:\/\/kiencang.net\/nhung-font-web-font-face\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2013-07-10T17:08:00+00:00","article_modified_time":"2022-08-20T08:59:14+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":"8 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/nhung-font-web-font-face\/","url":"https:\/\/kiencang.net\/nhung-font-web-font-face\/","name":"C\u00e1ch nh\u00fang font v\u00e0o web v\u1edbi @font-face, k\u1ef7 nguy\u00ean c\u1ee7a Typography \u0111\u00e3 \u0111\u1ebfn • Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2013-07-10T17:08:00+00:00","dateModified":"2022-08-20T08:59:14+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/nhung-font-web-font-face\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/nhung-font-web-font-face\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/nhung-font-web-font-face\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"C\u00e1ch nh\u00fang font v\u00e0o web v\u1edbi @font-face, k\u1ef7 nguy\u00ean c\u1ee7a Typography \u0111\u00e3 \u0111\u1ebfn"}]},{"@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\/325"}],"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=325"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/325\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=325"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=325"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=325"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
font-weight:normal; font-style:normal;<\/code><\/span> ngh\u0129a l\u00e0 b\u1ea1n \u0111\u1ec3 font \u1edf d\u1ea1ng th\u01b0\u1eddng (regular), kh\u00f4ng \u0111\u1eadm, kh\u00f4ng nh\u1ea1t.<\/li><\/ul>\n\n\n\nV\u1eady l\u00e0 xong, gi\u1edd ta d\u00f9ng font c\u0169ng y nh\u01b0 b\u00ecnh th\u01b0\u1eddng, ngh\u0129a l\u00e0 ch\u1ed7 n\u00e0o c\u1ea7n d\u00f9ng font nh\u00fang ta khai b\u00e1o font-family l\u00e0 t\u00ean font m\u00e0 ta \u0111\u00e3 \u0111\u1eb7t v\u1eeba n\u00e3y l\u00e0 \u0111\u01b0\u1ee3c, gi\u1ea3 d\u1ee5 gi\u1edd t\u00f4i \u0111\u1eb7t c\u00e1c ti\u00eau \u0111\u1ec1 .title l\u00e0 font nh\u00fang \u1edf tr\u00ean th\u00ec t\u00f4i vi\u1ebft nh\u01b0 sau trong CSS:<\/p>\n\n\n\n.title {font-family:font_strong;}<\/code><\/pre>\n\n\n\n\n\n\n\n<\/span>Tr\u00ecnh duy\u1ec7t h\u1ed7 tr\u1ee3<\/span><\/h2>\n\n\n\nT\u1ea5t c\u1ea3 c\u00e1c tr\u00ecnh duy\u1ec7t ph\u1ed5 th\u00f4ng g\u1ed3m Chrome, FireFox, Opera, Safari v\u00e0 IE \u0111\u1ec1u h\u1ed7 tr\u1ee3 nh\u00fang font, tuy nhi\u00ean lo\u1ea1i font m\u00e0 ch\u00fang support th\u00ec c\u00f3 kh\u00e1c nhau.<\/p>\n\n\n\nInternet Explorer 9+, Firefox, Chrome, Safari v\u00e0 Opera h\u1ed7 tr\u1ee3 WOFF (Web Open Font Format) font.<\/li>Firefox, Chrome, Safari v\u00e0 Opera c\u0169ng h\u1ed7 tr\u1ee3 TTF (True Type Fonts) v\u00e0 OTF (OpenType Fonts).<\/li>Chrome, Safari v\u00e0 Opera h\u1ed7 tr\u1ee3 SVG fonts\/shapes.<\/li>Internet Explorer h\u1ed7 tr\u1ee3 EOT (Embedded OpenType) fonts.<\/li><\/ul>\n\n\n\n\n\n\n\n<\/span>Nh\u00fang font tr\u1ef1c tuy\u1ebfn<\/span><\/h2>\n\n\n\nC\u00e1i n\u00e0y v\u1eeba c\u00f3 \u0111i\u1ec3m gi\u1ed1ng v\u1edbi @font-face m\u00e0 c\u0169ng v\u1eeba kh\u00e1c n\u1eefa:<\/p>\n\n\n\nGi\u1ed1ng \u1edf ch\u1ed7, font s\u1eed d\u1ee5ng \u0111\u1ec1u t\u1ea3i t\u1eeb n\u01a1i kh\u00e1c v\u1ec1, v\u00e0 \u0111\u01b0\u1ee3c d\u1ef1 tr\u00f9 l\u00e0 kh\u00f4ng c\u00f3 tr\u00ean m\u00e1y ng\u01b0\u1eddi d\u00f9ng<\/li>Kh\u00e1c \u1edf ch\u1ed7, @font-face l\u00e0 t\u1ea3i t\u1eeb host c\u1ee7a b\u1ea1n, trong khi nh\u00fang font tr\u1ef1c tuy\u1ebfn th\u00ec t\u1ea3i t\u1eeb server d\u1ecbch v\u1ee5 ri\u00eang<\/li><\/ul>\n\n\n\nH\u00f4m nay t\u00f4i s\u1ebd gi\u1edbi thi\u1ec7u v\u1edbi c\u00e1c b\u1ea1n c\u00e1ch nh\u00fang font b\u1eb1ng Google Font, \u01b0u \u0111i\u1ec3m: <\/p>\n\n\n\nNhanh, \u0111\u1ea3m b\u1ea3o: V\u00e2ng, v\u00ec n\u00f3 l\u00e0 host c\u1ee7a Google, n\u00ean t\u1ed1c \u0111\u1ed9 \u1ed5n \u0111\u1ecbnh, h\u1ea7u nh\u01b0 kh\u00f4ng b\u1ecb h\u1ecfng h\u00f3c, n\u00ean b\u1ea1n c\u00f3 th\u1ec3 an t\u00e2m g\u1ea7n nh\u01b0 100%<\/li>Mi\u1ec5n ph\u00ed: B\u1ea1n kh\u00f4ng ph\u1ea3i m\u1ea5t ti\u1ec1n \u0111\u1ec3 s\u1eed d\u1ee5ng d\u1ecbch v\u1ee5 n\u00e0y. Th\u00eam v\u00e0o \u0111\u00f3 b\u1ea1n c\u0169ng gi\u00fap gi\u1ea3m b\u0103ng th\u00f4ng cho host c\u1ee7a b\u1ea1n<\/li>\u0110\u01a1n gi\u1ea3n: Code nh\u00fang c\u1ee7a n\u00f3 th\u1eadm ch\u00ed c\u00f2n \u0111\u01a1n gi\u1ea3n h\u01a1n @font-face. K\u1ebft qu\u1ea3 demo b\u1ea1n c\u00f3 th\u1ec3 xem ngay \u1edf d\u01b0\u1edbi.<\/li><\/ul>\n\n\n\nBlog Duc Anh Plus – Nguyen Duc Anh<\/div>\n\n\n\nC\u00e1ch l\u00e0m: <\/p>\n\n\n\nTruy c\u1eadp trang web <\/a>https:\/\/fonts.google.com\/<\/a> \u0111\u1ec3 ch\u1ecdn font m\u00e0 b\u1ea1n th\u00edch. Sau \u0111\u00f3 nh\u1ea5n v\u00e0o h\u00ecnh m\u0169i t\u00ean tr\u1ecf (Quick-use)<\/li><\/ul>\n\n\n\n<\/figure><\/div>\n\n\nM\u1ed9t c\u1eeda s\u1ed5 b\u1eadt ra, v\u00e0 Google cho b\u1ea1n \u0111o\u1ea1n code \u0111\u1ec3 \u0111\u01b0a v\u00e0o trong th\u1ebb head c\u1ee7a trang HTML (n\u00f3 g\u1ea7n gi\u1ed1ng v\u1edbi li\u00ean k\u1ebft CSS), code \u0111\u00f3 c\u00f3 d\u1ea1ng nh\u01b0 sau: <link href=\u2019http:\/\/fonts.googleapis.com\/css?family=Ruge+Boogie\u2019 rel=\u2019stylesheet\u2019 type=\u2019text\/css\u2019> <\/strong><\/li>B\u1ea1n c\u00f3 th\u1ec3 th\u1ea5y t\u00ean font trong v\u00ed d\u1ee5 n\u00e0y l\u00e0 Ruge Boogie, ti\u1ebfp theo, mu\u1ed1n s\u1eed d\u1ee5ng font n\u00e0y, th\u00ec trong CSS, b\u1ea1n vi\u1ebft nh\u01b0 sau: body {font-family: \u2018Ruge Boogie\u2019, cursive;font-size:20px;}<\/strong><\/li>Nh\u01b0 v\u1eady l\u00e0 \u0111\u00e3 xong r\u1ed3i, r\u1ea5t \u0111\u01a1n gi\u1ea3n ph\u1ea3i kh\u00f4ng. Th\u00f4ng tin th\u00eam l\u00e0 Google Font c\u00f3 kho\u1ea3ng h\u01a1n 600 font, nh\u01b0ng font ti\u1ebfng Vi\u1ec7t th\u00ec kh\u00f4ng nhi\u1ec1u l\u1eafm<\/li><\/ul>\n\n\n\nM\u1ed9t s\u1ed1 l\u01b0u \u00fd:<\/p>\n\n\n\nGoogle Font c\u00f3 \u0111\u1ebfn 3 ki\u1ec3u nh\u00fang: ti\u00eau chu\u1ea9n l\u00e0 ki\u1ec3u link \u1edf tr\u00ean, th\u1ee9 hai l\u00e0 @import v\u00e0 cu\u1ed1i c\u00f9ng l\u00e0 d\u00f9ng JavaScript \u2013 c\u1ea3 3 \u0111\u1ec1u cho k\u1ebft qu\u1ea3 t\u01b0\u01a1ng \u0111\u01b0\u01a1ng nhau, nh\u01b0ng ki\u1ec3u \u0111\u1ea7u ti\u00ean \u0111\u01b0\u1ee3c khuy\u00ean d\u00f9ng.<\/li>N\u1ebfu mu\u1ed1n \u0111\u1ed3ng b\u1ed9 h\u00f3a font tr\u00ean Google Font v\u1edbi Desktop h\u00e3y s\u1eed d\u1ee5ng ti\u1ec7n \u00edch SkyFonts<\/a>.<\/li>L\u1eddi cu\u1ed1i: h\u00e3y th\u1eadn tr\u1ecdng v\u1edbi nh\u00fang font t\u00f9y ch\u1ec9nh, \u0111\u1eebng nh\u00fang qu\u00e1 nhi\u1ec1u font kh\u00e1c nhau, v\u00ec nh\u00fang font ngh\u0129a l\u00e0 ng\u01b0\u1eddi d\u00f9ng ph\u1ea3i t\u1ea3i font v\u1ec1, nh\u00fang c\u00e1c font qu\u00e1 n\u1eb7ng ch\u1eafc ch\u1eafn l\u00e0m t\u0103ng th\u1eddi gian t\u1ea3i trang, c\u00e1i n\u00e0y l\u00e0 \u00e1p d\u1ee5ng chung ch\u1ee9 kh\u00f4ng ri\u00eang g\u00ec cho Google Font. Ngo\u00e0i ra qu\u00e1 nhi\u1ec1u font kh\u00e1c nhau tr\u00ean trang s\u1ebd g\u00e2y t\u00e1c d\u1ee5ng ng\u01b0\u1ee3c v\u1ec1 m\u1eb7t th\u1ea9m m\u1ef9.<\/li><\/ul>\n\n\n\nTr\u1ea3 l\u1eddi c\u00e2u h\u1ecfi ph\u1ee5 (M\u00e0 c\u0169ng c\u00f3 khi l\u00e0 ch\u00ednh)<\/h3>\n\n\n\nT\u00f4i c\u00f3 th\u1ec3 t\u00ecm font \u0111\u1ed9c v\u00e0 l\u1ea1 \u1edf \u0111\u00e2u?<\/strong> => Tr\u00ean m\u1ea1ng c\u00f3 r\u1ea5t nhi\u1ec1u trang web cung c\u1ea5p font mi\u1ec5n ph\u00ed cho ph\u00e9p b\u1ea1n t\u1ea3i v\u1ec1. B\u1ea1n kh\u00f4ng n\u00ean t\u1ea3i font c\u00f3 ph\u00ed b\u1ea5t h\u1ee3p ph\u00e1p v\u00ec n\u00f3 c\u00f3 th\u1ec3 l\u00e0m \u1ea3nh h\u01b0\u1edfng r\u1ea5t x\u1ea5u \u0111\u1ebfn trang web c\u1ee7a b\u1ea1n n\u1ebfu ch\u1ee7 s\u1edf h\u1eefu font kh\u1edfi ki\u1ec7n. Nhi\u1ec1u font mi\u1ec5n ph\u00ed ch\u1ea5t l\u01b0\u1ee3ng t\u01b0\u01a1ng \u0111\u01b0\u01a1ng th\u00ec t\u1ed9i g\u00ec ch\u00fang ta t\u1ea3i l\u1eadu \u0111\u00fang kh\u00f4ng \u1ea1? B\u1ea1n c\u00f3 th\u1ec3 v\u00e0o trang http:\/\/www.dafont.com\/<\/a> \u0111\u1ec3 t\u00ecm font \u01b0a th\u00edch nh\u00e9.<\/li>Font \u0111\u1eb9p cho ti\u1ebfng Vi\u1ec7t c\u00f3 nhi\u1ec1u kh\u00f4ng? <\/strong>=> \u0110\u00e1ng ti\u1ebfc l\u00e0 kh\u00f4ng! B\u1ea1n c\u00f3 kh\u00e1 \u00edt l\u1ef1a ch\u1ecdn \u0111\u1ed9c \u0111\u00e1o v\u1edbi ti\u1ebfng Vi\u1ec7t. \u1ede ph\u00eda ng\u01b0\u1ee3c l\u1ea1i, ti\u1ebfng Anh v\u00e0 c\u00e1c ng\u00f4n ng\u1eef ch\u00e2u \u00c2u n\u00f3i chung l\u1ea1i r\u1ea5t phong ph\u00fa.<\/li>T\u1ea1i sao t\u00f4i nh\u00fang m\u00e3i font m\u00e0 ch\u1eb3ng \u0111\u01b0\u1ee3c, tr\u00ecnh duy\u1ec7t l\u1edfm r\u1ed3i, b\u1ef1c m\u00ecnh qu\u00e1!<\/strong> => B\u1ea1n n\u00ean d\u00f9ng Google Chrome ho\u1eb7c FireFox \u0111\u1ec3 ki\u1ec3m tra nh\u00fang th\u00e0nh c\u00f4ng hay ch\u01b0a. C\u1ea3 2 tr\u00ecnh duy\u1ec7t n\u00e0y m\u00e0 kh\u00f4ng th\u00e0nh c\u00f4ng th\u00ec l\u00e0 t\u1ea1i b\u1ea1n nh\u00fang sai ch\u1ee9 kh\u00f4ng ph\u1ea3i t\u1ea1i tr\u00ecnh duy\u1ec7t. L\u1ed7i kh\u00f4ng nh\u00fang \u0111\u01b0\u1ee3c font, 10 ng\u01b0\u1eddi th\u00ec 9 ng\u01b0\u1eddi l\u00e0 do sai \u0111\u01b0\u1eddng d\u1eabn \u1edf c\u00e1i src: url<\/em>(\u2018\u0111\u01b0\u1eddng d\u1eabn font\u2019). N\u1ebfu Font nh\u00fang \u0111\u1ec3 c\u00f9ng c\u1ea5p v\u1edbi file HTML \u0111\u01b0\u1eddng d\u1eabn s\u1ebd kh\u00e1c v\u1edbi Font nh\u00fang b\u1ea1n \u0111\u1ec3 \u1edf trong th\u01b0 m\u1ee5c Font ri\u00eang. M\u00ecnh t\u1eebng b\u1ecb r\u1ed3i, kh\u00f4ng bi\u1ebft th\u1ebf l\u00e0 loay hoay c\u1ea3 ti\u1ebfng!<\/li>T\u00f4i c\u00f3 m\u1ed7i font \u0111\u1ecbnh d\u1ea1ng .ttf, l\u00e0m sao \u0111\u1ec3 t\u00f4i c\u00f3 \u0111\u1ecbnh d\u1ea1ng .eot cho \u00f4ng b\u1ea1n IE b\u00e2y gi\u1edd?<\/strong> => Gi\u1ed1ng nh\u01b0 video c\u00f3 th\u1ec3 chuy\u1ec3n \u0111\u1ed5i (convert) \u0111\u1ecbnh d\u1ea1ng, font c\u0169ng v\u1eady. B\u1ea1n c\u00f3 th\u1ec3 search tr\u00ean m\u1ea1ng ho\u1eb7c v\u00f4 trang n\u00e0y \u0111\u1ec3 chuy\u1ec3n \u0111\u1ed5i: http:\/\/www.fontsquirrel.com\/tools\/webfont-generator<\/a><\/li>T\u00f4i th\u1ea5y v\u00e0i font r\u1ea5t \u0111\u1eb9p tr\u00ean m\u1ed9t s\u1ed1 trang web, t\u00f4i mu\u1ed1n d\u00f9ng m\u1ea5y font \u0111\u00f3 nh\u01b0ng kh\u00f4ng bi\u1ebft th\u00f4ng tin v\u1ec1 n\u00f3, v\u1eady t\u00f4i ph\u1ea3i l\u00e0m g\u00ec?<\/strong> => \u0110\u1ec3 t\u00ecm m\u1ed9t font n\u00e0o \u0111\u00f3 th\u00ec c\u00e1ch \u0111\u01a1n gi\u1ea3n nh\u1ea5t l\u00e0 bi\u1ebft t\u00ean c\u1ee7a font, r\u1ed3i google \u0111\u1ec3 t\u1ea3i v\u1ec1. C\u00f3 m\u1ed9t ti\u1ec7n \u00edch m\u1edf r\u1ed9ng cho tr\u00ecnh duy\u1ec7t Google Chrome t\u00ean l\u00e0 WhatFont<\/a> gi\u00fap b\u1ea1n l\u00e0m \u0111\u01b0\u1ee3c \u0111i\u1ec1u \u0111\u00f3. \u0110\u1ecba ch\u1ec9 \u1edf link v\u1eeba d\u1eabn. C\u00e1ch s\u1eed d\u1ee5ng r\u1ea5t \u0111\u01a1n gi\u1ea3n, b\u1ea1n ch\u1ec9 c\u1ea7n di chu\u1ed9t qua ch\u1eef c\u1ea7n bi\u1ebft font, n\u00f3 s\u1ebd th\u00f4ng b\u00e1o t\u00ean font cho b\u1ea1n, ngo\u00e0i ra b\u1ea1n s\u1ebd bi\u1ebft th\u00eam c\u00e1c th\u00f4ng tin kh\u00e1c nh\u01b0 k\u00edch c\u1ee1, line height v\u00e0 m\u00e0u ch\u1eef \u0111ang d\u00f9ng.<\/li><\/ul>\n\n\n\n<\/figure><\/div>\n\n\n<\/p>\n","protected":false},"excerpt":{"rendered":"Th\u1ef1c ra th\u1ebf gi\u1edbi web kh\u00f4ng d\u00f9ng nhi\u1ec1u font, b\u1ea1n s\u1ebd b\u1ea5t ng\u1edd khi bi\u1ebft c\u00f3 \u0111\u1ebfn 100 ng\u00e0n c\u00e1c lo\u1ea1i font ch\u1eef kh\u00e1c nhau, nh\u01b0ng h\u00e0ng t\u1ef7 trang web m\u00e0 ch\u00fang ta th\u1ea5y ng\u00e0y nay v\u1eabn ch\u1ec9 d\u00f9ng kho\u1ea3ng 10 font ph\u1ed5 bi\u1ebfn – c\u00f2n g\u1ecdi l\u00e0 font web an to\u00e0n (web safe font). …<\/p>\n","protected":false},"author":1,"featured_media":1205,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[229],"tags":[],"yoast_head":"\nC\u00e1ch nh\u00fang font v\u00e0o web v\u1edbi @font-face, k\u1ef7 nguy\u00ean c\u1ee7a Typography \u0111\u00e3 \u0111\u1ebfn • Ki\u1ebfn c\u00e0ng<\/title>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\t\n","yoast_head_json":{"title":"C\u00e1ch nh\u00fang font v\u00e0o web v\u1edbi @font-face, k\u1ef7 nguy\u00ean c\u1ee7a Typography \u0111\u00e3 \u0111\u1ebfn • 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\/nhung-font-web-font-face\/","og_locale":"vi_VN","og_type":"article","og_title":"C\u00e1ch nh\u00fang font v\u00e0o web v\u1edbi @font-face, k\u1ef7 nguy\u00ean c\u1ee7a Typography \u0111\u00e3 \u0111\u1ebfn • Ki\u1ebfn c\u00e0ng","og_description":"Th\u1ef1c ra th\u1ebf gi\u1edbi web kh\u00f4ng d\u00f9ng nhi\u1ec1u font, b\u1ea1n s\u1ebd b\u1ea5t ng\u1edd khi bi\u1ebft c\u00f3 \u0111\u1ebfn 100 ng\u00e0n c\u00e1c lo\u1ea1i font ch\u1eef kh\u00e1c nhau, nh\u01b0ng h\u00e0ng t\u1ef7 trang web m\u00e0 ch\u00fang ta th\u1ea5y ng\u00e0y nay v\u1eabn ch\u1ec9 d\u00f9ng kho\u1ea3ng 10 font ph\u1ed5 bi\u1ebfn – c\u00f2n g\u1ecdi l\u00e0 font web an to\u00e0n (web safe font). …","og_url":"https:\/\/kiencang.net\/nhung-font-web-font-face\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2013-07-10T17:08:00+00:00","article_modified_time":"2022-08-20T08:59:14+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":"8 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/nhung-font-web-font-face\/","url":"https:\/\/kiencang.net\/nhung-font-web-font-face\/","name":"C\u00e1ch nh\u00fang font v\u00e0o web v\u1edbi @font-face, k\u1ef7 nguy\u00ean c\u1ee7a Typography \u0111\u00e3 \u0111\u1ebfn • Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2013-07-10T17:08:00+00:00","dateModified":"2022-08-20T08:59:14+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/nhung-font-web-font-face\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/nhung-font-web-font-face\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/nhung-font-web-font-face\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"C\u00e1ch nh\u00fang font v\u00e0o web v\u1edbi @font-face, k\u1ef7 nguy\u00ean c\u1ee7a Typography \u0111\u00e3 \u0111\u1ebfn"}]},{"@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\/325"}],"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=325"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/325\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=325"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=325"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=325"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
V\u1eady l\u00e0 xong, gi\u1edd ta d\u00f9ng font c\u0169ng y nh\u01b0 b\u00ecnh th\u01b0\u1eddng, ngh\u0129a l\u00e0 ch\u1ed7 n\u00e0o c\u1ea7n d\u00f9ng font nh\u00fang ta khai b\u00e1o font-family l\u00e0 t\u00ean font m\u00e0 ta \u0111\u00e3 \u0111\u1eb7t v\u1eeba n\u00e3y l\u00e0 \u0111\u01b0\u1ee3c, gi\u1ea3 d\u1ee5 gi\u1edd t\u00f4i \u0111\u1eb7t c\u00e1c ti\u00eau \u0111\u1ec1 .title l\u00e0 font nh\u00fang \u1edf tr\u00ean th\u00ec t\u00f4i vi\u1ebft nh\u01b0 sau trong CSS:<\/p>\n\n\n\n
.title {font-family:font_strong;}<\/code><\/pre>\n\n\n\n\n\n\n\n<\/span>Tr\u00ecnh duy\u1ec7t h\u1ed7 tr\u1ee3<\/span><\/h2>\n\n\n\nT\u1ea5t c\u1ea3 c\u00e1c tr\u00ecnh duy\u1ec7t ph\u1ed5 th\u00f4ng g\u1ed3m Chrome, FireFox, Opera, Safari v\u00e0 IE \u0111\u1ec1u h\u1ed7 tr\u1ee3 nh\u00fang font, tuy nhi\u00ean lo\u1ea1i font m\u00e0 ch\u00fang support th\u00ec c\u00f3 kh\u00e1c nhau.<\/p>\n\n\n\nInternet Explorer 9+, Firefox, Chrome, Safari v\u00e0 Opera h\u1ed7 tr\u1ee3 WOFF (Web Open Font Format) font.<\/li>Firefox, Chrome, Safari v\u00e0 Opera c\u0169ng h\u1ed7 tr\u1ee3 TTF (True Type Fonts) v\u00e0 OTF (OpenType Fonts).<\/li>Chrome, Safari v\u00e0 Opera h\u1ed7 tr\u1ee3 SVG fonts\/shapes.<\/li>Internet Explorer h\u1ed7 tr\u1ee3 EOT (Embedded OpenType) fonts.<\/li><\/ul>\n\n\n\n\n\n\n\n<\/span>Nh\u00fang font tr\u1ef1c tuy\u1ebfn<\/span><\/h2>\n\n\n\nC\u00e1i n\u00e0y v\u1eeba c\u00f3 \u0111i\u1ec3m gi\u1ed1ng v\u1edbi @font-face m\u00e0 c\u0169ng v\u1eeba kh\u00e1c n\u1eefa:<\/p>\n\n\n\nGi\u1ed1ng \u1edf ch\u1ed7, font s\u1eed d\u1ee5ng \u0111\u1ec1u t\u1ea3i t\u1eeb n\u01a1i kh\u00e1c v\u1ec1, v\u00e0 \u0111\u01b0\u1ee3c d\u1ef1 tr\u00f9 l\u00e0 kh\u00f4ng c\u00f3 tr\u00ean m\u00e1y ng\u01b0\u1eddi d\u00f9ng<\/li>Kh\u00e1c \u1edf ch\u1ed7, @font-face l\u00e0 t\u1ea3i t\u1eeb host c\u1ee7a b\u1ea1n, trong khi nh\u00fang font tr\u1ef1c tuy\u1ebfn th\u00ec t\u1ea3i t\u1eeb server d\u1ecbch v\u1ee5 ri\u00eang<\/li><\/ul>\n\n\n\nH\u00f4m nay t\u00f4i s\u1ebd gi\u1edbi thi\u1ec7u v\u1edbi c\u00e1c b\u1ea1n c\u00e1ch nh\u00fang font b\u1eb1ng Google Font, \u01b0u \u0111i\u1ec3m: <\/p>\n\n\n\nNhanh, \u0111\u1ea3m b\u1ea3o: V\u00e2ng, v\u00ec n\u00f3 l\u00e0 host c\u1ee7a Google, n\u00ean t\u1ed1c \u0111\u1ed9 \u1ed5n \u0111\u1ecbnh, h\u1ea7u nh\u01b0 kh\u00f4ng b\u1ecb h\u1ecfng h\u00f3c, n\u00ean b\u1ea1n c\u00f3 th\u1ec3 an t\u00e2m g\u1ea7n nh\u01b0 100%<\/li>Mi\u1ec5n ph\u00ed: B\u1ea1n kh\u00f4ng ph\u1ea3i m\u1ea5t ti\u1ec1n \u0111\u1ec3 s\u1eed d\u1ee5ng d\u1ecbch v\u1ee5 n\u00e0y. Th\u00eam v\u00e0o \u0111\u00f3 b\u1ea1n c\u0169ng gi\u00fap gi\u1ea3m b\u0103ng th\u00f4ng cho host c\u1ee7a b\u1ea1n<\/li>\u0110\u01a1n gi\u1ea3n: Code nh\u00fang c\u1ee7a n\u00f3 th\u1eadm ch\u00ed c\u00f2n \u0111\u01a1n gi\u1ea3n h\u01a1n @font-face. K\u1ebft qu\u1ea3 demo b\u1ea1n c\u00f3 th\u1ec3 xem ngay \u1edf d\u01b0\u1edbi.<\/li><\/ul>\n\n\n\nBlog Duc Anh Plus – Nguyen Duc Anh<\/div>\n\n\n\nC\u00e1ch l\u00e0m: <\/p>\n\n\n\nTruy c\u1eadp trang web <\/a>https:\/\/fonts.google.com\/<\/a> \u0111\u1ec3 ch\u1ecdn font m\u00e0 b\u1ea1n th\u00edch. Sau \u0111\u00f3 nh\u1ea5n v\u00e0o h\u00ecnh m\u0169i t\u00ean tr\u1ecf (Quick-use)<\/li><\/ul>\n\n\n\n<\/figure><\/div>\n\n\nM\u1ed9t c\u1eeda s\u1ed5 b\u1eadt ra, v\u00e0 Google cho b\u1ea1n \u0111o\u1ea1n code \u0111\u1ec3 \u0111\u01b0a v\u00e0o trong th\u1ebb head c\u1ee7a trang HTML (n\u00f3 g\u1ea7n gi\u1ed1ng v\u1edbi li\u00ean k\u1ebft CSS), code \u0111\u00f3 c\u00f3 d\u1ea1ng nh\u01b0 sau: <link href=\u2019http:\/\/fonts.googleapis.com\/css?family=Ruge+Boogie\u2019 rel=\u2019stylesheet\u2019 type=\u2019text\/css\u2019> <\/strong><\/li>B\u1ea1n c\u00f3 th\u1ec3 th\u1ea5y t\u00ean font trong v\u00ed d\u1ee5 n\u00e0y l\u00e0 Ruge Boogie, ti\u1ebfp theo, mu\u1ed1n s\u1eed d\u1ee5ng font n\u00e0y, th\u00ec trong CSS, b\u1ea1n vi\u1ebft nh\u01b0 sau: body {font-family: \u2018Ruge Boogie\u2019, cursive;font-size:20px;}<\/strong><\/li>Nh\u01b0 v\u1eady l\u00e0 \u0111\u00e3 xong r\u1ed3i, r\u1ea5t \u0111\u01a1n gi\u1ea3n ph\u1ea3i kh\u00f4ng. Th\u00f4ng tin th\u00eam l\u00e0 Google Font c\u00f3 kho\u1ea3ng h\u01a1n 600 font, nh\u01b0ng font ti\u1ebfng Vi\u1ec7t th\u00ec kh\u00f4ng nhi\u1ec1u l\u1eafm<\/li><\/ul>\n\n\n\nM\u1ed9t s\u1ed1 l\u01b0u \u00fd:<\/p>\n\n\n\nGoogle Font c\u00f3 \u0111\u1ebfn 3 ki\u1ec3u nh\u00fang: ti\u00eau chu\u1ea9n l\u00e0 ki\u1ec3u link \u1edf tr\u00ean, th\u1ee9 hai l\u00e0 @import v\u00e0 cu\u1ed1i c\u00f9ng l\u00e0 d\u00f9ng JavaScript \u2013 c\u1ea3 3 \u0111\u1ec1u cho k\u1ebft qu\u1ea3 t\u01b0\u01a1ng \u0111\u01b0\u01a1ng nhau, nh\u01b0ng ki\u1ec3u \u0111\u1ea7u ti\u00ean \u0111\u01b0\u1ee3c khuy\u00ean d\u00f9ng.<\/li>N\u1ebfu mu\u1ed1n \u0111\u1ed3ng b\u1ed9 h\u00f3a font tr\u00ean Google Font v\u1edbi Desktop h\u00e3y s\u1eed d\u1ee5ng ti\u1ec7n \u00edch SkyFonts<\/a>.<\/li>L\u1eddi cu\u1ed1i: h\u00e3y th\u1eadn tr\u1ecdng v\u1edbi nh\u00fang font t\u00f9y ch\u1ec9nh, \u0111\u1eebng nh\u00fang qu\u00e1 nhi\u1ec1u font kh\u00e1c nhau, v\u00ec nh\u00fang font ngh\u0129a l\u00e0 ng\u01b0\u1eddi d\u00f9ng ph\u1ea3i t\u1ea3i font v\u1ec1, nh\u00fang c\u00e1c font qu\u00e1 n\u1eb7ng ch\u1eafc ch\u1eafn l\u00e0m t\u0103ng th\u1eddi gian t\u1ea3i trang, c\u00e1i n\u00e0y l\u00e0 \u00e1p d\u1ee5ng chung ch\u1ee9 kh\u00f4ng ri\u00eang g\u00ec cho Google Font. Ngo\u00e0i ra qu\u00e1 nhi\u1ec1u font kh\u00e1c nhau tr\u00ean trang s\u1ebd g\u00e2y t\u00e1c d\u1ee5ng ng\u01b0\u1ee3c v\u1ec1 m\u1eb7t th\u1ea9m m\u1ef9.<\/li><\/ul>\n\n\n\nTr\u1ea3 l\u1eddi c\u00e2u h\u1ecfi ph\u1ee5 (M\u00e0 c\u0169ng c\u00f3 khi l\u00e0 ch\u00ednh)<\/h3>\n\n\n\nT\u00f4i c\u00f3 th\u1ec3 t\u00ecm font \u0111\u1ed9c v\u00e0 l\u1ea1 \u1edf \u0111\u00e2u?<\/strong> => Tr\u00ean m\u1ea1ng c\u00f3 r\u1ea5t nhi\u1ec1u trang web cung c\u1ea5p font mi\u1ec5n ph\u00ed cho ph\u00e9p b\u1ea1n t\u1ea3i v\u1ec1. B\u1ea1n kh\u00f4ng n\u00ean t\u1ea3i font c\u00f3 ph\u00ed b\u1ea5t h\u1ee3p ph\u00e1p v\u00ec n\u00f3 c\u00f3 th\u1ec3 l\u00e0m \u1ea3nh h\u01b0\u1edfng r\u1ea5t x\u1ea5u \u0111\u1ebfn trang web c\u1ee7a b\u1ea1n n\u1ebfu ch\u1ee7 s\u1edf h\u1eefu font kh\u1edfi ki\u1ec7n. Nhi\u1ec1u font mi\u1ec5n ph\u00ed ch\u1ea5t l\u01b0\u1ee3ng t\u01b0\u01a1ng \u0111\u01b0\u01a1ng th\u00ec t\u1ed9i g\u00ec ch\u00fang ta t\u1ea3i l\u1eadu \u0111\u00fang kh\u00f4ng \u1ea1? B\u1ea1n c\u00f3 th\u1ec3 v\u00e0o trang http:\/\/www.dafont.com\/<\/a> \u0111\u1ec3 t\u00ecm font \u01b0a th\u00edch nh\u00e9.<\/li>Font \u0111\u1eb9p cho ti\u1ebfng Vi\u1ec7t c\u00f3 nhi\u1ec1u kh\u00f4ng? <\/strong>=> \u0110\u00e1ng ti\u1ebfc l\u00e0 kh\u00f4ng! B\u1ea1n c\u00f3 kh\u00e1 \u00edt l\u1ef1a ch\u1ecdn \u0111\u1ed9c \u0111\u00e1o v\u1edbi ti\u1ebfng Vi\u1ec7t. \u1ede ph\u00eda ng\u01b0\u1ee3c l\u1ea1i, ti\u1ebfng Anh v\u00e0 c\u00e1c ng\u00f4n ng\u1eef ch\u00e2u \u00c2u n\u00f3i chung l\u1ea1i r\u1ea5t phong ph\u00fa.<\/li>T\u1ea1i sao t\u00f4i nh\u00fang m\u00e3i font m\u00e0 ch\u1eb3ng \u0111\u01b0\u1ee3c, tr\u00ecnh duy\u1ec7t l\u1edfm r\u1ed3i, b\u1ef1c m\u00ecnh qu\u00e1!<\/strong> => B\u1ea1n n\u00ean d\u00f9ng Google Chrome ho\u1eb7c FireFox \u0111\u1ec3 ki\u1ec3m tra nh\u00fang th\u00e0nh c\u00f4ng hay ch\u01b0a. C\u1ea3 2 tr\u00ecnh duy\u1ec7t n\u00e0y m\u00e0 kh\u00f4ng th\u00e0nh c\u00f4ng th\u00ec l\u00e0 t\u1ea1i b\u1ea1n nh\u00fang sai ch\u1ee9 kh\u00f4ng ph\u1ea3i t\u1ea1i tr\u00ecnh duy\u1ec7t. L\u1ed7i kh\u00f4ng nh\u00fang \u0111\u01b0\u1ee3c font, 10 ng\u01b0\u1eddi th\u00ec 9 ng\u01b0\u1eddi l\u00e0 do sai \u0111\u01b0\u1eddng d\u1eabn \u1edf c\u00e1i src: url<\/em>(\u2018\u0111\u01b0\u1eddng d\u1eabn font\u2019). N\u1ebfu Font nh\u00fang \u0111\u1ec3 c\u00f9ng c\u1ea5p v\u1edbi file HTML \u0111\u01b0\u1eddng d\u1eabn s\u1ebd kh\u00e1c v\u1edbi Font nh\u00fang b\u1ea1n \u0111\u1ec3 \u1edf trong th\u01b0 m\u1ee5c Font ri\u00eang. M\u00ecnh t\u1eebng b\u1ecb r\u1ed3i, kh\u00f4ng bi\u1ebft th\u1ebf l\u00e0 loay hoay c\u1ea3 ti\u1ebfng!<\/li>T\u00f4i c\u00f3 m\u1ed7i font \u0111\u1ecbnh d\u1ea1ng .ttf, l\u00e0m sao \u0111\u1ec3 t\u00f4i c\u00f3 \u0111\u1ecbnh d\u1ea1ng .eot cho \u00f4ng b\u1ea1n IE b\u00e2y gi\u1edd?<\/strong> => Gi\u1ed1ng nh\u01b0 video c\u00f3 th\u1ec3 chuy\u1ec3n \u0111\u1ed5i (convert) \u0111\u1ecbnh d\u1ea1ng, font c\u0169ng v\u1eady. B\u1ea1n c\u00f3 th\u1ec3 search tr\u00ean m\u1ea1ng ho\u1eb7c v\u00f4 trang n\u00e0y \u0111\u1ec3 chuy\u1ec3n \u0111\u1ed5i: http:\/\/www.fontsquirrel.com\/tools\/webfont-generator<\/a><\/li>T\u00f4i th\u1ea5y v\u00e0i font r\u1ea5t \u0111\u1eb9p tr\u00ean m\u1ed9t s\u1ed1 trang web, t\u00f4i mu\u1ed1n d\u00f9ng m\u1ea5y font \u0111\u00f3 nh\u01b0ng kh\u00f4ng bi\u1ebft th\u00f4ng tin v\u1ec1 n\u00f3, v\u1eady t\u00f4i ph\u1ea3i l\u00e0m g\u00ec?<\/strong> => \u0110\u1ec3 t\u00ecm m\u1ed9t font n\u00e0o \u0111\u00f3 th\u00ec c\u00e1ch \u0111\u01a1n gi\u1ea3n nh\u1ea5t l\u00e0 bi\u1ebft t\u00ean c\u1ee7a font, r\u1ed3i google \u0111\u1ec3 t\u1ea3i v\u1ec1. C\u00f3 m\u1ed9t ti\u1ec7n \u00edch m\u1edf r\u1ed9ng cho tr\u00ecnh duy\u1ec7t Google Chrome t\u00ean l\u00e0 WhatFont<\/a> gi\u00fap b\u1ea1n l\u00e0m \u0111\u01b0\u1ee3c \u0111i\u1ec1u \u0111\u00f3. \u0110\u1ecba ch\u1ec9 \u1edf link v\u1eeba d\u1eabn. C\u00e1ch s\u1eed d\u1ee5ng r\u1ea5t \u0111\u01a1n gi\u1ea3n, b\u1ea1n ch\u1ec9 c\u1ea7n di chu\u1ed9t qua ch\u1eef c\u1ea7n bi\u1ebft font, n\u00f3 s\u1ebd th\u00f4ng b\u00e1o t\u00ean font cho b\u1ea1n, ngo\u00e0i ra b\u1ea1n s\u1ebd bi\u1ebft th\u00eam c\u00e1c th\u00f4ng tin kh\u00e1c nh\u01b0 k\u00edch c\u1ee1, line height v\u00e0 m\u00e0u ch\u1eef \u0111ang d\u00f9ng.<\/li><\/ul>\n\n\n\n<\/figure><\/div>\n\n\n<\/p>\n","protected":false},"excerpt":{"rendered":"Th\u1ef1c ra th\u1ebf gi\u1edbi web kh\u00f4ng d\u00f9ng nhi\u1ec1u font, b\u1ea1n s\u1ebd b\u1ea5t ng\u1edd khi bi\u1ebft c\u00f3 \u0111\u1ebfn 100 ng\u00e0n c\u00e1c lo\u1ea1i font ch\u1eef kh\u00e1c nhau, nh\u01b0ng h\u00e0ng t\u1ef7 trang web m\u00e0 ch\u00fang ta th\u1ea5y ng\u00e0y nay v\u1eabn ch\u1ec9 d\u00f9ng kho\u1ea3ng 10 font ph\u1ed5 bi\u1ebfn – c\u00f2n g\u1ecdi l\u00e0 font web an to\u00e0n (web safe font). …<\/p>\n","protected":false},"author":1,"featured_media":1205,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[229],"tags":[],"yoast_head":"\nC\u00e1ch nh\u00fang font v\u00e0o web v\u1edbi @font-face, k\u1ef7 nguy\u00ean c\u1ee7a Typography \u0111\u00e3 \u0111\u1ebfn • Ki\u1ebfn c\u00e0ng<\/title>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\t\n","yoast_head_json":{"title":"C\u00e1ch nh\u00fang font v\u00e0o web v\u1edbi @font-face, k\u1ef7 nguy\u00ean c\u1ee7a Typography \u0111\u00e3 \u0111\u1ebfn • 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\/nhung-font-web-font-face\/","og_locale":"vi_VN","og_type":"article","og_title":"C\u00e1ch nh\u00fang font v\u00e0o web v\u1edbi @font-face, k\u1ef7 nguy\u00ean c\u1ee7a Typography \u0111\u00e3 \u0111\u1ebfn • Ki\u1ebfn c\u00e0ng","og_description":"Th\u1ef1c ra th\u1ebf gi\u1edbi web kh\u00f4ng d\u00f9ng nhi\u1ec1u font, b\u1ea1n s\u1ebd b\u1ea5t ng\u1edd khi bi\u1ebft c\u00f3 \u0111\u1ebfn 100 ng\u00e0n c\u00e1c lo\u1ea1i font ch\u1eef kh\u00e1c nhau, nh\u01b0ng h\u00e0ng t\u1ef7 trang web m\u00e0 ch\u00fang ta th\u1ea5y ng\u00e0y nay v\u1eabn ch\u1ec9 d\u00f9ng kho\u1ea3ng 10 font ph\u1ed5 bi\u1ebfn – c\u00f2n g\u1ecdi l\u00e0 font web an to\u00e0n (web safe font). …","og_url":"https:\/\/kiencang.net\/nhung-font-web-font-face\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2013-07-10T17:08:00+00:00","article_modified_time":"2022-08-20T08:59:14+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":"8 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/nhung-font-web-font-face\/","url":"https:\/\/kiencang.net\/nhung-font-web-font-face\/","name":"C\u00e1ch nh\u00fang font v\u00e0o web v\u1edbi @font-face, k\u1ef7 nguy\u00ean c\u1ee7a Typography \u0111\u00e3 \u0111\u1ebfn • Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2013-07-10T17:08:00+00:00","dateModified":"2022-08-20T08:59:14+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/nhung-font-web-font-face\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/nhung-font-web-font-face\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/nhung-font-web-font-face\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"C\u00e1ch nh\u00fang font v\u00e0o web v\u1edbi @font-face, k\u1ef7 nguy\u00ean c\u1ee7a Typography \u0111\u00e3 \u0111\u1ebfn"}]},{"@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\/325"}],"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=325"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/325\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=325"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=325"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=325"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
T\u1ea5t c\u1ea3 c\u00e1c tr\u00ecnh duy\u1ec7t ph\u1ed5 th\u00f4ng g\u1ed3m Chrome, FireFox, Opera, Safari v\u00e0 IE \u0111\u1ec1u h\u1ed7 tr\u1ee3 nh\u00fang font, tuy nhi\u00ean lo\u1ea1i font m\u00e0 ch\u00fang support th\u00ec c\u00f3 kh\u00e1c nhau.<\/p>\n\n\n\n
C\u00e1i n\u00e0y v\u1eeba c\u00f3 \u0111i\u1ec3m gi\u1ed1ng v\u1edbi @font-face m\u00e0 c\u0169ng v\u1eeba kh\u00e1c n\u1eefa:<\/p>\n\n\n\n
H\u00f4m nay t\u00f4i s\u1ebd gi\u1edbi thi\u1ec7u v\u1edbi c\u00e1c b\u1ea1n c\u00e1ch nh\u00fang font b\u1eb1ng Google Font, \u01b0u \u0111i\u1ec3m: <\/p>\n\n\n\n
C\u00e1ch l\u00e0m: <\/p>\n\n\n\n
M\u1ed9t s\u1ed1 l\u01b0u \u00fd:<\/p>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
Th\u1ef1c ra th\u1ebf gi\u1edbi web kh\u00f4ng d\u00f9ng nhi\u1ec1u font, b\u1ea1n s\u1ebd b\u1ea5t ng\u1edd khi bi\u1ebft c\u00f3 \u0111\u1ebfn 100 ng\u00e0n c\u00e1c lo\u1ea1i font ch\u1eef kh\u00e1c nhau, nh\u01b0ng h\u00e0ng t\u1ef7 trang web m\u00e0 ch\u00fang ta th\u1ea5y ng\u00e0y nay v\u1eabn ch\u1ec9 d\u00f9ng kho\u1ea3ng 10 font ph\u1ed5 bi\u1ebfn – c\u00f2n g\u1ecdi l\u00e0 font web an to\u00e0n (web safe font). …<\/p>\n","protected":false},"author":1,"featured_media":1205,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[229],"tags":[],"yoast_head":"\n