Thường rip theme từ một trang nào đấy cần lấy font chữ từ trang đấy về hoặc khi cắt 1 web nào đấy trong khoảng File ngoại hình bên bề ngoài thường cho những tham số như kiểu là kiểu font , size..
khi mua đượ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 lúc anh em đọc hết bài này sở hữu 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
phương pháp check font mới trên 1 web khác
Để check một font mới trên 1 web nào ấy tớ hay sử dụng luôn tiện ích check font What Font Anh chị em sở hữu thể download luô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 khi cài thêm trên trình phê duyệt ta có 1 tượng trư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 ko bạn !
cách check font mới trên 1 web kì dị với 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à tiêu dùng luôn )
sau lúc sở hữu những thông báo 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 tương đối khác so có font tiêu dùng trên máy tính ( dạng offline )
nên ta phải với bước Cover khiến chuẩn nó khi tiêu dùng trên web bằng bí quyết truy cập vào web : https://transfonter.org/ Giao diện vào thác tác như hình sau :
Cover font chữ online
Sau khi download font về ta sở hữu mấy file sau
Sau lúc download font về ta với mấy file sau
4 file tương ứng có 4 mục chọn ở trên , mở file stylesheet.css sẽ chi cho ta biết cách thức sử dụng font lên web ( thường với dạng sau )
<br /> @font-face <br /> font-family: 'UTM Avo';<br /> src: url('UTMAvo.eot');<br /> src: url('UTMAvo.eot?#iefix') format('embedded-opentype'),<br /> url('UTMAvo.woff2') format('woff2'),<br /> url('UTMAvo.woff') format('woff'),<br /> url('UTMAvo.ttf') format('truetype');<br /> font-weight: normal;<br /> font-style: normal;<br /> font-display: swap;<br />
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 để vận dụng font
- trong chilld theme web tạo 1 foder mang 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ó 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 tuyến đường dẫn font vào ( tỉ dụ mình sở hữu theme là Noithat và foder Font được úp trong ấy ) code css sẽ là
<br /> @font-face <br /> font-family: 'UTM Avo';<br /> src: url('/wp-content/themes/NOITHAT/font/UTMAvo.eot');<br /> src: url('/wp-content/themes/NOITHAT/font/UTMAvo.eot?#iefix') format('embedded-opentype'),<br /> url('/wp-content/themes/NOITHAT/font/UTMAvo.woff2') format('woff2'),<br /> url('/wp-content/themes/NOITHAT/font/UTMAvo.woff') format('woff'),<br /> url('/wp-content/themes/NOITHAT/font/UTMAvo.ttf') format('truetype'),<br /> font-weight: normal;<br /> font-style: normal;<br /> font-display: swap;</p> <p>h1, h2, h3, h4, h5, h6, a, p, span, strong <br /> font-family: 'UTM Avo' !important;<br />
một
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 chỗ nào chưa với á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 sử dụng tới
ví như 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 viện trợ
