Thường rip theme từ 1 trang nào ấy cần lấy font chữ trong khoảng trang đó về hoặc lúc cắt một web nào đó trong khoảng File mẫu mã bên bề ngoài thường cho các thông số như kiểu là kiểu font , size..
khi sắm được font là cả một 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 có 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
phương pháp 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 Các bạn có thể download luôn tiện ích bằng cách thức 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 y ta có 1 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 ko bạn !
bí quyết check font mới trên 1 web dị thường sở hữu các thông tin như hình
Chuẩn bị cho custom 1 font chữ
-
rà soát được font
-
Down được font chữ về máy ( trong trường hợp bạn ko muốn down bạn sở hữu thể lấy url của trong góc và tiêu dùng luôn )
sau khi 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ữ tiêu dùng online thương tương đối khác so với font sử dụng trên máy tính ( dạng offline )
nên ta phải mang bước Cover khiến chuẩn nó khi 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 lúc download font về ta có mấy file sau
Sau khi download font về ta mang 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 bí quyết sử dụng font lên web ( thường với dạng sau )
|
1
hai
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 1 foder có tên là font ( thực tiễn thì úp đâu cũng được nhưng úp lên child theme sau này lở bế đi đâu sở hữu nó ko 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 tuyến phố dẫn font vào ( thí dụ mình mang 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 như chỗ nào chưa có á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 đã 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 tiêu dùng đến
nếu như Anh chị không khiến cho được hoặc mang câu hỏi gì vui lòng comment bên dưới để được trợ giúp
Theo : Thủ Thuật Flatsome.xyz