Thường rip theme từ một trang nào đó cần lấy font chữ từ trang đấy về hoặc khi cắt 1 web nào đó từ File bề ngoài bên kiểu dáng thường cho các thông số như kiểu là kiểu font , size..
khi sắm được font là cả 1 vấn đề và khiến 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 với 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 một font mới trên một web nào đấy tớ hay tiêu dùng tiện thể ích check font What Font Anh chị có thể download luôn thể ích bằng phương pháp 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ó một biểu tượng check font trên thanh dụng cụ , muốn check font trang nào ta chỉ việc vào trang web ấy 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 báo 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 không muốn down bạn với thể lấy url của trong góc và sử dụng luôn )
sau khi với 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 tương đối khác so mang font dùng trên máy tính ( dạng offline )
nên ta phải với bước Cover làm chuẩn nó lúc sử dụng trên web bằng bí quyết tróc nã 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
Sau lúc download font về ta sở hữu mấy file sau
4 file tương ứng mang 4 mục chọn ở trên , mở file stylesheet.css sẽ chi cho ta biết cách thức dùng font lên web ( thường có dạng sau )
|
một
2
3
4
5
6
7
8
9
10
11
|
@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 một foder mang tên là font ( thực tại thì úp đâu cũng được nhưng úp lên child theme sau này lở bế đi đâu có nó ko 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 con đường dẫn font vào ( thí dụ mình mang theme là Noithat và foder Font được úp trong đó ) code css sẽ là
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
@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 lúc thêm css trên thì giao diện lại ngon lành cành đào nhé anh em 🙂
nếu như chỗ nào chưa với áp font thì thêm class vị trí ấy 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 đã tiêu 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 ko sử dụng đến
giả dụ Cả nhà ko khiến được hoặc mang nghi vấn gì vui lòng comment bên dưới để được viện trợ
Theo : Thủ Thuật Flatsome.xyz