Hướng Dẫn Tùy Biến Font Chữ Flatsome Đơn Giản

Thường rip theme từ 1 trang nào đó cần lấy font chữ từ trang đó về hoặc khi cắt 1 web nào đó từ File thiết kế bên thiết kế thường cho những thông số như kiểu là kiểu font , size..

Khi tìm được font là cả 1 vấn đề và làm sao để Thêm font mới cho theme chạy được trên web nữa thì lại là chuyện khác , hi vọng sau khi anh em đọc hết bài này có thể Thêm font mới cho theme flatsome và những theme khác trong wordpress nhé

Thêm font mới cho theme flatsome wordpress

Cách check font mới trên 1 web khác

Để check 1 font mới trên 1 web nào đó tớ hay dùng tiện ích check font What Font các bạn có thể download tiện ích bằng cách click vào link này nhé

https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=vi

sau khi cài thêm trên trình duyệt ta có 1 biểu tượng check font trên thanh công cụ , muốn check font trang nào ta chỉ việc vào trang web đó và mở nó lên là được quá dễ đúng không bạn !

Cách check font mới trên 1 web khác thường có những thông tin như hình

Chuẩn bị cho custom 1 font chữ

Kiểm tra được font
Down được font chữ về máy ( trong trường hợp bạn ko muốn down bạn có thể lấy url của trong góc và dùng luôn )

sau khi có những thông tin trên mình tiến hành download font về để cover font nhé !

Cover font chữ online

Font chữ dùng online thương hơi khác so với font dùng trên máy tính ( dạng offline )

nên ta phải có bước Cover làm chuẩn nó khi dùng trên web bằng cách truy cập vào web : https://transfonter.org/ Giao diện vào thác tác như hình sau :

Sau khi download font về ta có mấy file sau

4 file tương ứng với 4 mục chọn ở trên , mở file stylesheet.css sẽ chi cho ta biết cách dùng font lên web ( thường có dạng sau )

@font-face {

font-family: ‘UTM Avo’;

src: url(‘UTMAvo.eot’);

src: url(‘UTMAvo.eot?#iefix’) format(’embedded-opentype’),

url(‘UTMAvo.woff2’) format(‘woff2’),

url(‘UTMAvo.woff’) format(‘woff’),

url(‘UTMAvo.ttf’) format(‘truetype’);

font-weight: normal;

font-style: normal;

font-display: swap;

}

Úp font lên web và chèn Code vào css để áp dụng font

trong chilld theme web tạo 1 foder có tên là font ( thực tế thì úp đâu cũng được nhưng úp lên child theme sau này lở bế đi đâu có nó không lại lỗi font ) , úp 4 font chữ mình vừa cover trên được vào trong foder đó
trong Css của theme dán mã trên và thay đường dẫn font vào ( ví dụ mình có theme là Noithat và foder Font được úp trong đó ) code css sẽ là

@font-face {

font-family: ‘UTM Avo’;

src: url(‘/wp-content/themes/NOITHAT/font/UTMAvo.eot’);

src: url(‘/wp-content/themes/NOITHAT/font/UTMAvo.eot?#iefix’) format(’embedded-opentype’),

url(‘/wp-content/themes/NOITHAT/font/UTMAvo.woff2’) format(‘woff2’),

url(‘/wp-content/themes/NOITHAT/font/UTMAvo.woff’) format(‘woff’),

url(‘/wp-content/themes/NOITHAT/font/UTMAvo.ttf’) format(‘truetype’),

font-weight: normal;

font-style: normal;

font-display: swap;}

h1, h2, h3, h4, h5, h6, a, p, span, strong {

font-family: ‘UTM Avo’ !important;

}

sau khi thêm css trên thì giao diện lại ngon lành cành đào nhé anh em

Nếu chỗ nào chưa có áp font thì thêm class vị trí đó vào đoạn này thôi

h1, h2, h3, h4, h5, h6, a, p, span, strong { font-family: ‘UTM Avo’ !important; }

Chú ý :

Nếu bạn đã dùng font ngoài 100% theo dạng này thì nên tắt font của google trên web nhé để hạn chế load font không dùng tới

Nếu các bạn không làm được hoặc có thắc mắc gì vui lòng comment bên dưới để được trợ giúp

Nguồn: https://flatsome.xyz/them-font-moi-cho-theme-flatsome-wordpress.html

Hướng Dẫn Tùy Biến Font Chữ Flatsome Đơn Giản Nhất

Vấn đề tùy biến font chữ Flatsome không phải chỉ dành cho người mới. Nó là vấn đề chung của tất cả mọi người. Có những bác tay ngang, hoặc chỉ đọc trên mạng, muốn tự build website vệ tinh cho rẻ… Thậm chí là cả các bác code. Đôi khi mình cũng lơ là, hoặc chưa biết cách chỉnh sao cho nhanh nhất. Hôm nay, mình xin giới thiệu với anh em cách chỉnh font chữ gần như là toàn bộ roài. Còn nếu các anh em muốn chỉnh font chữ của những mục cụ thể. Phần này chắc phải dò hoặc đặt css style cho riêng mục đó.

1. Tùy chỉnh cơ bản font Flatsome

Bạn vào Theme Options => Style => Typography để tùy chỉnh font chữ.

2. Thêm CSS tùy chỉnh này vào mục Customize/Tùy chỉnh CSS

Phông chữ văn bản trong bài viết (base font):

body {font-family: “Tên phông chữ tùy chỉnh”, sans-serif}

Phông chữ điều hướng (Navigation):

.nav> li> a {font-family: “Tên phông chữ tùy chỉnh”, sans-serif;}

Phông chữ tiêu đề Headline( gồm các thẻ h1, h2, h3, h4… h6):

h1, h2, h3, h4, h5, h6, .heading-font {font-family: “Tên phông chữ tùy chỉnh”, sans-serif;}

Phông chữ thay thế (font chữ này được mô tả bằng văn bản cho hình ảnh. Hoặc là font cho thẻ Alt mà các bác làm SEO hay tối ưu)

.alt-font {font-family: "Tên phông chữ tùy chỉnh", sans-serif;}

Tên font chữ tùy chỉnh các bạn có thể lên Google tìm các font Việt hóa đẹp, và hỗ trợ. Mình thì hay dùng “Tahoma”.

Các bạn có thể dùng chung cho tất cả như sau nhé:

body {font-family: “Tahoma”, sans-serif}
.nav> li> a {font-family: “Tahoma”, sans-serif;}
h1, h2, h3, h4, h5, h6, .heading-font {font-family: “Tahoma”, sans-serif;}
.alt-font {font-family: “Tahoma”, sans-serif;}

3. Tải lên phông chữ tùy chỉnh

Chúng tôi khuyên dùng plugin này để tải lên phông chữ tùy chỉnh: https://wordpress.org/plugins/use-any-font/

4. Phông chữ TypeKit

Chúng tôi khuyên bạn nên sử dụng plugin này để sử dụng phông chữ TypeKit: https://wordpress.org/plugins/typekit-fonts-for-wordpress/

Nguồn: https://isharevn.net/huong-dan-tuy-bien-font-chu-flatsome-don-gian-nhat.html

https://fonts.google.com/?category=Serif&subset=vietnamese&vfonly=true&preview.text=%C4%90%C3%A2y%20l%C3%A0%20nh%E1%BB%AFng%20font%20ch%E1%BB%AF%20ch%E1%BA%A5t%20l%C6%B0%E1%BB%A3ng%20c%C3%B3%20h%E1%BB%97%20tr%E1%BB%A3%20ti%E1%BA%BFng%20Vi%E1%BB%87t&preview.text_type=custom&noto.script=Latn

Post Views: 273