Thêm font mới cho theme flatsome wordpress
Thường rip theme từ 1 trang nào đấy cần lấy font chữ trong khoảng trang đó về hoặc khi cắt một web nào đấy trong khoảng File ngoại hình bên kiểu dáng thường cho các thông số như kiểu là kiểu font , size..
khi tậu được font là cả 1 vấn đề và khiến cho 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 lúc anh em đọc hết bài này với thể Thêm font mới cho theme flatsome và các theme khác trong wordpress nhé
Thêm font mới cho theme flatsome wordpress
cách check font mới trên một web khác
Để check 1 font mới trên 1 web nào ấy tớ hay sử dụng một thể ích check font What Font Anh chị em có thể download một 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 lúc cài thêm trên trình duyệt y ta mang một tượng trưng check font trên thanh phương tiện , 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 một web dị kì với các thông tin như hình
Chuẩn bị cho custom một font chữ
-
rà soát được font
-
Down được font chữ về máy ( trong trường hợp bạn không muốn down bạn mang thể lấy url của trong góc và dùng luôn )
sau lúc sở hữu 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ữ sử dụng online thương khá 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 tiêu dùng trên web bằng phương pháp truy tìm 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 mang mấy file sau
Sau khi download font về ta sở hữu 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 phương pháp tiêu dùng font lên web ( thường với 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 để ứng dụng font
- trong chilld theme web tạo 1 foder sở hữu 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 với nó không lại lỗi font 🙂 ) , úp 4 font chữ mình vừa cover trên được vào trong foder đấy
- trong Css của theme dán mã trên và thay trục đường dẫn font vào ( ví dụ mình có theme là Noithat và foder Font được úp trong đấy ) code css sẽ là
|
1
hai
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 mang á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ú ý :
ví như bạn đã sử dụng font ngoài 100% theo dạng này thì nên tắt font của google trên web nhé để giảm thiểu load font không dùng đến
giả dụ Cả nhà không làm đượ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
Comments
Post a Comment