{"id":115110,"date":"2025-06-18T09:39:26","date_gmt":"2025-06-18T02:39:26","guid":{"rendered":"https:\/\/tino.vn\/blog\/?p=115110"},"modified":"2026-01-02T17:48:13","modified_gmt":"2026-01-02T10:48:13","slug":"cach-thay-doi-font-chu-va-mau-chu-trong-wordpress","status":"publish","type":"post","link":"https:\/\/tino.vn\/blog\/cach-thay-doi-font-chu-va-mau-chu-trong-wordpress\/","title":{"rendered":"C\u00e1ch thay \u0111\u1ed5i font ch\u1eef v\u00e0 m\u00e0u ch\u1eef trong WordPress c\u1ef1c d\u1ec5 2026"},"content":{"rendered":"\n

B\u1ea1n mu\u1ed1n website WordPress<\/a> c\u1ee7a m\u00ecnh tr\u1edf n\u00ean b\u1eaft m\u1eaft v\u00e0 chuy\u00ean nghi\u1ec7p h\u01a1n? Vi\u1ec7c thay \u0111\u1ed5i font ch\u1eef v\u00e0 m\u00e0u ch\u1eef kh\u00f4ng ch\u1ec9 gi\u00fap t\u0103ng t\u00ednh th\u1ea9m m\u1ef9 m\u00e0 c\u00f2n c\u1ea3i thi\u1ec7n tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng \u0111\u00e1ng k\u1ec3. Trong b\u00e0i vi\u1ebft n\u00e0y, Tino s\u1ebd h\u01b0\u1edbng d\u1eabn chi ti\u1ebft c\u00e1ch thay \u0111\u1ed5i font ch\u1eef v\u00e0 m\u00e0u ch\u1eef trong WordPress \u2013 d\u1ec5 hi\u1ec3u, d\u1ec5 th\u1ef1c hi\u1ec7n, kh\u00f4ng c\u1ea7n bi\u1ebft l\u1eadp tr\u00ecnh!<\/strong><\/p>\n\n\n\n

<\/a>T\u1ea1i sao c\u1ea7n thay \u0111\u1ed5i font ch\u1eef v\u00e0 m\u00e0u ch\u1eef trong WordPress?<\/h2>\n\n\n\n

<\/a>T\u0103ng t\u00ednh th\u1ea9m m\u1ef9 cho giao di\u1ec7n website<\/strong><\/h3>\n\n\n\n

Font ch\u1eef v\u00e0 m\u00e0u s\u1eafc l\u00e0 hai y\u1ebfu t\u1ed1 ch\u00ednh \u0111\u1ecbnh h\u00ecnh \u201cb\u1ed9 m\u1eb7t\u201d c\u1ee7a website. M\u1ed9t font ch\u1eef h\u00e0i h\u00f2a, d\u1ec5 \u0111\u1ecdc k\u1ebft h\u1ee3p v\u1edbi m\u00e0u s\u1eafc ph\u00f9 h\u1ee3p s\u1ebd t\u1ea1o n\u00ean c\u1ea3m gi\u00e1c chuy\u00ean nghi\u1ec7p v\u00e0 th\u00e2n thi\u1ec7n cho ng\u01b0\u1eddi truy c\u1eadp. Ng\u01b0\u1ee3c l\u1ea1i, font ch\u1eef kh\u00f3 \u0111\u1ecdc ho\u1eb7c m\u00e0u ch\u1eef thi\u1ebfu t\u01b0\u01a1ng ph\u1ea3n c\u00f3 th\u1ec3 khi\u1ebfn ng\u01b0\u1eddi d\u00f9ng r\u1eddi trang nhanh ch\u00f3ng.<\/p>\n\n\n\n

<\/a>T\u1ea1o d\u1ea5u \u1ea5n th\u01b0\u01a1ng hi\u1ec7u r\u00f5 n\u00e9t<\/strong><\/h3>\n\n\n\n

M\u1ed7i th\u01b0\u01a1ng hi\u1ec7u \u0111\u1ec1u c\u00f3 b\u1ed9 nh\u1eadn di\u1ec7n ri\u00eang, bao g\u1ed3m ki\u1ec3u ch\u1eef v\u00e0 m\u00e0u s\u1eafc \u0111\u1eb7c tr\u01b0ng. Khi b\u1ea1n t\u00f9y ch\u1ec9nh font v\u00e0 m\u00e0u ch\u1eef ph\u00f9 h\u1ee3p v\u1edbi m\u00e0u s\u1eafc th\u01b0\u01a1ng hi\u1ec7u, b\u1ea1n s\u1ebd g\u00f3p ph\u1ea7n gia t\u0103ng s\u1ef1 nh\u1ea5t qu\u00e1n v\u00e0 chuy\u00ean nghi\u1ec7p cho to\u00e0n b\u1ed9 h\u1ec7 th\u1ed1ng truy\u1ec1n th\u00f4ng online \u2013 t\u1eeb website \u0111\u1ebfn m\u1ea1ng x\u00e3 h\u1ed9i.<\/p>\n\n\n

\n
\"T\u1ea1i
T\u1ea1i sao c\u1ea7n thay \u0111\u1ed5i font ch\u1eef v\u00e0 m\u00e0u ch\u1eef trong WordPress?<\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

<\/a>C\u1ea3i thi\u1ec7n tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng (UX<\/strong>)<\/h3>\n\n\n\n

Font ch\u1eef qu\u00e1 nh\u1ecf, kh\u00f3 \u0111\u1ecdc ho\u1eb7c m\u00e0u s\u1eafc kh\u00f4ng ph\u00f9 h\u1ee3p s\u1ebd khi\u1ebfn ng\u01b0\u1eddi \u0111\u1ecdc c\u1ea3m th\u1ea5y kh\u00f3 ch\u1ecbu, t\u1eeb \u0111\u00f3 l\u00e0m gi\u1ea3m th\u1eddi gian h\u1ecd \u1edf l\u1ea1i website. B\u1eb1ng c\u00e1ch l\u1ef1a ch\u1ecdn ki\u1ec3u ch\u1eef r\u00f5 r\u00e0ng, k\u00edch th\u01b0\u1edbc h\u1ee3p l\u00fd v\u00e0 m\u00e0u s\u1eafc d\u1ec5 nh\u00ecn, b\u1ea1n gi\u00fap n\u1ed9i dung d\u1ec5 ti\u1ebfp c\u1eadn h\u01a1n \u2013 nh\u1ea5t l\u00e0 tr\u00ean thi\u1ebft b\u1ecb di \u0111\u1ed9ng.<\/p>\n\n\n\n

<\/a>H\u1ed7 tr\u1ee3 SEO m\u1ed9t c\u00e1ch gi\u00e1n ti\u1ebfp<\/strong><\/h3>\n\n\n\n

Google \u0111\u00e1nh gi\u00e1 cao tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng. N\u1ebfu m\u1ed9t website d\u1ec5 \u0111\u1ecdc, gi\u1eef ch\u00e2n ng\u01b0\u1eddi d\u00f9ng l\u00e2u h\u01a1n th\u00ec th\u1eddi gian tr\u00ean trang (time on site) v\u00e0 t\u1ef7 l\u1ec7 tho\u00e1t (bounce rate) s\u1ebd \u0111\u01b0\u1ee3c c\u1ea3i thi\u1ec7n \u2013 t\u1eeb \u0111\u00f3 h\u1ed7 tr\u1ee3 t\u1ed1t h\u01a1n cho SEO<\/a>. Vi\u1ec7c \u0111i\u1ec1u ch\u1ec9nh font ch\u1eef v\u00e0 m\u00e0u ch\u1eef \u0111\u00fang c\u00e1ch s\u1ebd g\u00f3p ph\u1ea7n t\u0103ng hi\u1ec7u qu\u1ea3 c\u1ee7a chi\u1ebfn l\u01b0\u1ee3c t\u1ed1i \u01b0u h\u00f3a c\u00f4ng c\u1ee5 t\u00ecm ki\u1ebfm.<\/p>\n\n\n\n

<\/a>D\u1ec5 d\u00e0ng t\u00f9y bi\u1ebfn theo m\u1ee5c ti\u00eau n\u1ed9i dung<\/strong><\/h3>\n\n\n\n

B\u1ea1n c\u00f3 th\u1ec3 thay \u0111\u1ed5i font ch\u1eef cho t\u1eebng lo\u1ea1i n\u1ed9i dung: ti\u00eau \u0111\u1ec1 n\u1ed5i b\u1eadt, \u0111o\u1ea1n tr\u00edch d\u1eabn, n\u00fat k\u00eau g\u1ecdi h\u00e0nh \u0111\u1ed9ng (CTA)\u2026 M\u1ed7i ki\u1ec3u ch\u1eef v\u00e0 m\u00e0u s\u1eafc c\u00f3 th\u1ec3 truy\u1ec1n t\u1ea3i c\u1ea3m x\u00fac v\u00e0 m\u1ee5c \u0111\u00edch kh\u00e1c nhau \u2013 t\u1eeb th\u00e2n thi\u1ec7n, tr\u1ebb trung \u0111\u1ebfn chuy\u00ean nghi\u1ec7p, tin c\u1eady.<\/p>\n\n\n\n

<\/a>H\u01b0\u1edbng d\u1eabn chi ti\u1ebft m\u1ed9t s\u1ed1 c\u00e1ch thay \u0111\u1ed5i font ch\u1eef v\u00e0 m\u00e0u ch\u1eef trong WordPress <\/h2>\n\n\n\n

<\/a>Thay \u0111\u1ed5i m\u00e0u ch\u1eef trong WordPress<\/strong><\/h3>\n\n\n\n

<\/a>Tr\u00ecnh so\u1ea1n th\u1ea3o Kh\u1ed1i (Block Editor – Gutenberg)<\/h4>\n\n\n\n

B\u01b0\u1edbc 1: <\/strong>M\u1edf b\u00e0i vi\u1ebft ho\u1eb7c trang c\u1ea7n ch\u1ec9nh s\u1eeda. Ch\u1ecdn kh\u1ed1i v\u0103n b\u1ea3n (v\u00ed d\u1ee5: \u0111o\u1ea1n v\u0103n, ti\u00eau \u0111\u1ec1) m\u00e0 b\u1ea1n mu\u1ed1n thay \u0111\u1ed5i m\u00e0u.<\/p>\n\n\n

\n
\"Thay
Thay \u0111\u1ed5i m\u00e0u ch\u1eef trong tr\u00ecnh so\u1ea1n th\u1ea3o Kh\u1ed1i (Block Editor – Gutenberg)<\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

B\u01b0\u1edbc 2:<\/strong> \u1ede thanh c\u00e0i \u0111\u1eb7t b\u00ean ph\u1ea3i, t\u00ecm \u0111\u1ebfn m\u1ee5c “M\u00e0u s\u1eafc” (Color)<\/strong>. T\u1ea1i \u0111\u00e2y, b\u1ea1n s\u1ebd th\u1ea5y t\u00f9y ch\u1ecdn “V\u0103n b\u1ea3n” (Text)<\/strong> v\u00e0 “N\u1ec1n” (Background)<\/strong>.<\/p>\n\n\n\n

Nh\u1ea5p v\u00e0o \u00f4 m\u00e0u b\u1ea1n mu\u1ed1n thay \u0111\u1ed5i, m\u1ed9t b\u1ea3ng m\u00e0u s\u1ebd hi\u1ec7n ra cho ph\u00e9p b\u1ea1n ch\u1ecdn t\u1eeb c\u00e1c m\u00e0u c\u00f3 s\u1eb5n ho\u1eb7c \u0111\u1ecbnh ngh\u0129a m\u00e0u t\u00f9y ch\u1ec9nh b\u1eb1ng c\u00e1ch nh\u1eadp m\u00e3 m\u00e0u HEX, RGB ho\u1eb7c HSL.<\/p>\n\n\n

\n
\"Thay
Thay \u0111\u1ed5i m\u00e0u ch\u1eef trong tr\u00ecnh so\u1ea1n th\u1ea3o Kh\u1ed1i (Block Editor – Gutenberg)<\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

K\u1ebft qu\u1ea3:<\/p>\n\n\n

\n
\"Thay
Thay \u0111\u1ed5i m\u00e0u ch\u1eef trong tr\u00ecnh so\u1ea1n th\u1ea3o Kh\u1ed1i (Block Editor – Gutenberg)<\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

N\u1ebfu b\u1ea1n ch\u1ec9 mu\u1ed1n \u0111\u1ed5i m\u00e0u cho m\u1ed9t v\u00e0i t\u1eeb ho\u1eb7c m\u1ed9t c\u1ee5m t\u1eeb c\u1ee5 th\u1ec3 trong kh\u1ed1i, h\u00e3y b\u00f4i \u0111en ph\u1ea7n v\u0103n b\u1ea3n \u0111\u00f3. Tr\u00ean thanh c\u00f4ng c\u1ee5 nh\u1ecf xu\u1ea5t hi\u1ec7n ph\u00eda tr\u00ean kh\u1ed1i, nh\u1ea5p v\u00e0o bi\u1ec3u t\u01b0\u1ee3ng m\u0169i t\u00ean xu\u1ed1ng v\u00e0 ch\u1ecdn “Highlight” (L\u00e0m n\u1ed5i b\u1eadt)<\/strong>.<\/p>\n\n\n

\n
\"Thay
Thay \u0111\u1ed5i m\u00e0u ch\u1eef trong tr\u00ecnh so\u1ea1n th\u1ea3o Kh\u1ed1i (Block Editor – Gutenberg)<\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

Sau \u0111\u00f3, b\u1ea1n c\u00f3 th\u1ec3 ch\u1ecdn m\u00e0u ch\u1eef v\u00e0 m\u00e0u n\u1ec1n (m\u00e0u highlight) cho ph\u1ea7n v\u0103n b\u1ea3n \u0111\u00e3 ch\u1ecdn.<\/p>\n\n\n

\n
\"Thay
Thay \u0111\u1ed5i m\u00e0u ch\u1eef trong tr\u00ecnh so\u1ea1n th\u1ea3o Kh\u1ed1i (Block Editor – Gutenberg)<\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

K\u1ebft qu\u1ea3:<\/p>\n\n\n

\n
\"Thay
Thay \u0111\u1ed5i m\u00e0u ch\u1eef trong tr\u00ecnh so\u1ea1n th\u1ea3o Kh\u1ed1i (Block Editor – Gutenberg)<\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

<\/a>Tr\u00ecnh so\u1ea1n th\u1ea3o C\u1ed5 \u0111i\u1ec3n (Classic Editor)<\/h4>\n\n\n\n

N\u1ebfu b\u1ea1n v\u1eabn \u0111ang s\u1eed d\u1ee5ng tr\u00ecnh so\u1ea1n th\u1ea3o c\u1ed5 \u0111i\u1ec3n, vi\u1ec7c \u0111\u1ed5i m\u00e0u ch\u1eef c\u0169ng kh\u00e1 \u0111\u01a1n gi\u1ea3n.<\/p>\n\n\n\n

B\u01b0\u1edbc 1: <\/strong>Trong giao di\u1ec7n so\u1ea1n th\u1ea3o, h\u00e3y \u0111\u1ea3m b\u1ea3o thanh c\u00f4ng c\u1ee5 \u0111\u1ea7y \u0111\u1ee7 \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb b\u1eb1ng c\u00e1ch nh\u1ea5p v\u00e0o bi\u1ec3u t\u01b0\u1ee3ng cu\u1ed1i c\u00f9ng tr\u00ean h\u00e0ng \u0111\u1ea7u ti\u00ean (Toolbar Toggle).<\/p>\n\n\n\n

B\u01b0\u1edbc 2: <\/strong>B\u00f4i \u0111en \u0111o\u1ea1n v\u0103n b\u1ea3n b\u1ea1n mu\u1ed1n \u0111\u1ed5i m\u00e0u. Nh\u1ea5p v\u00e0o bi\u1ec3u t\u01b0\u1ee3ng ch\u1eef “A<\/strong>” c\u00f3 g\u1ea1ch ch\u00e2n (Font Color) tr\u00ean thanh c\u00f4ng c\u1ee5.<\/p>\n\n\n

\n
\"Thay
Thay \u0111\u1ed5i m\u00e0u ch\u1eef trong tr\u00ecnh so\u1ea1n th\u1ea3o C\u1ed5 \u0111i\u1ec3n (Classic Editor)<\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

B\u01b0\u1edbc 3:<\/strong> M\u1ed9t b\u1ea3ng m\u00e0u s\u1ebd xu\u1ea5t hi\u1ec7n. B\u1ea1n c\u00f3 th\u1ec3 ch\u1ecdn m\u00e0u t\u1eeb c\u00e1c t\u00f9y ch\u1ecdn c\u00f3 s\u1eb5n ho\u1eb7c nh\u1ea5p v\u00e0o “Custom” (T\u00f9y ch\u1ec9nh) <\/strong>\u0111\u1ec3 ch\u1ecdn m\u00e0u t\u00f9y ch\u1ec9nh th\u00f4ng qua b\u1ea3ng m\u00e0u chi ti\u1ebft h\u01a1n ho\u1eb7c nh\u1eadp m\u00e3 m\u00e0u HEX.<\/p>\n\n\n

\n
\"Thay
Thay \u0111\u1ed5i m\u00e0u ch\u1eef trong tr\u00ecnh so\u1ea1n th\u1ea3o C\u1ed5 \u0111i\u1ec3n (Classic Editor)<\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

Sau khi ch\u1ecdn xong, m\u00e0u ch\u1eef c\u1ee7a \u0111o\u1ea1n v\u0103n b\u1ea3n \u0111\u00e3 ch\u1ecdn s\u1ebd \u0111\u01b0\u1ee3c thay \u0111\u1ed5i.<\/p>\n\n\n

\n
\"Thay
Thay \u0111\u1ed5i m\u00e0u ch\u1eef trong tr\u00ecnh so\u1ea1n th\u1ea3o C\u1ed5 \u0111i\u1ec3n (Classic Editor)<\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

<\/a>S\u1eed d\u1ee5ng T\u00f9y bi\u1ebfn Giao di\u1ec7n (Theme Customizer)<\/h4>\n\n\n\n

B\u01b0\u1edbc 1<\/strong>: \u0110\u1ec3 truy c\u1eadp, b\u1ea1n v\u00e0o “Giao di\u1ec7n” (Appearance)<\/strong> -> “T\u00f9y ch\u1ec9nh” (Customize) <\/strong>t\u1eeb menu qu\u1ea3n tr\u1ecb WordPress.<\/p>\n\n\n\n

B\u01b0\u1edbc 2: <\/strong>Trong giao di\u1ec7n t\u00f9y bi\u1ebfn, t\u00ecm c\u00e1c m\u1ee5c li\u00ean quan \u0111\u1ebfn m\u00e0u s\u1eafc ho\u1eb7c ki\u1ec3u ch\u1eef, th\u01b0\u1eddng c\u00f3 t\u00ean nh\u01b0 “Colors”<\/strong>, “Typography”<\/strong>, “General Settings”<\/strong>, ho\u1eb7c t\u01b0\u01a1ng t\u1ef1 (t\u00ean g\u1ecdi c\u00f3 th\u1ec3 kh\u00e1c nhau t\u00f9y theme).<\/p>\n\n\n\n

Trong v\u00ed d\u1ee5 n\u00e0y, Tino s\u1ebd v\u00e0o m\u1ee5c Layout, Color & Scheme<\/strong> -> ch\u1ecdn Scheme & Website Color<\/strong>.<\/p>\n\n\n

\n
\"S\u1eed
S\u1eed d\u1ee5ng T\u00f9y bi\u1ebfn Giao di\u1ec7n (Theme Customizer)<\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

B\u00ean trong c\u00e1c m\u1ee5c n\u00e0y, b\u1ea1n c\u00f3 th\u1ec3 t\u00ecm th\u1ea5y c\u00e1c t\u00f9y ch\u1ecdn \u0111\u1ec3 \u0111\u1eb7t m\u00e0u ch\u1eef cho v\u0103n b\u1ea3n n\u1ed9i dung (body text), ti\u00eau \u0111\u1ec1 (headings H1, H2, H3,…), li\u00ean k\u1ebft (links), \u2026.<\/p>\n\n\n

\n
\"S\u1eed
S\u1eed d\u1ee5ng T\u00f9y bi\u1ebfn Giao di\u1ec7n (Theme Customizer)<\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

B\u01b0\u1edbc 3: <\/strong>Ch\u1ecdn m\u00e0u b\u1ea1n mu\u1ed1n t\u1eeb b\u1ea3ng m\u00e0u ho\u1eb7c nh\u1eadp m\u00e3 m\u00e0u. Xem tr\u01b0\u1edbc thay \u0111\u1ed5i tr\u1ef1c ti\u1ebfp v\u00e0 nh\u1ea5p “\u0110\u0103ng” (Publish)<\/strong> \u0111\u1ec3 l\u01b0u l\u1ea1i.<\/p>\n\n\n\n

<\/a>S\u1eed d\u1ee5ng M\u00e3 CSS T\u00f9y ch\u1ec9nh (Custom CSS)<\/h4>\n\n\n\n

\u0110\u00e2y l\u00e0 ph\u01b0\u01a1ng ph\u00e1p linh ho\u1ea1t v\u00e0 m\u1ea1nh m\u1ebd nh\u1ea5t, cho ph\u00e9p b\u1ea1n thay \u0111\u1ed5i m\u00e0u s\u1eafc c\u1ee7a b\u1ea5t k\u1ef3 y\u1ebfu t\u1ed1 n\u00e0o tr\u00ean trang web, ngay c\u1ea3 khi theme kh\u00f4ng h\u1ed7 tr\u1ee3. B\u1ea1n c\u1ea7n c\u00f3 m\u1ed9t ch\u00fat ki\u1ebfn th\u1ee9c c\u01a1 b\u1ea3n v\u1ec1 CSS.<\/p>\n\n\n\n

B\u01b0\u1edbc 1: <\/strong>Truy c\u1eadp “Giao di\u1ec7n” (Appearance)<\/strong> -> “T\u00f9y ch\u1ec9nh” (Customize)<\/strong> -> “CSS b\u1ed5 sung” (Additional CSS)<\/strong>.<\/p>\n\n\n

\n
\"S\u1eed
S\u1eed d\u1ee5ng M\u00e3 CSS T\u00f9y ch\u1ec9nh (Custom CSS)<\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

B\u01b0\u1edbc 2: <\/strong>T\u1ea1i \u0111\u00e2y, b\u1ea1n c\u00f3 th\u1ec3 vi\u1ebft c\u00e1c quy t\u1eafc CSS \u0111\u1ec3 \u0111\u1ecbnh d\u1ea1ng m\u00e0u ch\u1eef.<\/p>\n\n\n\n

V\u00ed d\u1ee5:<\/p>\n\n\n\n