Thêm font mới cho theme flatsome wordpress
Thường rip theme trong khoảng một trang nào ấy cần lấy font chữ trong khoảng trang đấy về hoặc khi cắt một web nào ấy từ File thiết kế bên ngoài mặt thường cho những thông số như kiểu là kiểu font , size..
khi mua được font là cả một 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à các theme khác trong wordpress nhé
Thêm font mới cho theme flatsome wordpress
cách thức check font mới trên một web khác
Để check một font mới trên 1 web nào đấy tớ hay dùng nhân tiện ích check font What Font Cả nhà sở hữu thể download nhân thể ích bằng cách 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 phê duyệt ta sở hữu 1 tượng trư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 !
bí quyết check font mới trên một web kì dị mang những 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 có thể lấy url của trong góc và dùng luôn )
sau lúc mang các 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 hơi khác so với font tiêu dùng trên máy tính ( dạng offline )
nên ta phải mang bước Cover làm cho chuẩn nó khi dùng trên web bằng cách tầm nã cập vào web : https://transfonter.org/ Giao diện vào thác tác như hình sau :
Sau lúc download font về ta sở hữu mấy file sau
Sau lúc download font về ta có mấy file sau
4 file tương ứng sở hữu 4 mục chọn ở trên , mở file stylesheet.css sẽ chi cho ta biết phương pháp sử dụng font lên web ( thường sở hữu dạng sau )
|
1
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 để vận 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 sở hữu 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 đườ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 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 sở hữu á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ú ý :
ví như 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é để tránh load font không sử dụng đến
nếu Anh chị không khiến cho được hoặc có thắc mắc gì vui lòng comment bên dưới để được trợ giúp
Theo : Thủ Thuật Flatsome.xyz
Post a Comment