Thêm font mới cho theme flatsome wordpress

Thường rip theme trong khoảng 1 trang nào ấy cần lấy font chữ trong khoảng trang ấy về hoặc lúc cắt 1 web nào đó trong khoảng File thiết kế bên thiết kế thường cho những thông số như kiểu là kiểu font , size..

khi tậu đượ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 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

cách check font mới trên một web khác

Để check 1 font mới trên một web nào đấy tớ hay tiêu dùng một thể ích check font What Font Cả nhà mang thể download luôn tiện ích bằng phương pháp click vào link này nhé

mang THỂ BẠN để ý

https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=vi

sau khi cài thêm trên trình phê duyệt ta với 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 !

phương pháp check font mới trên 1 web kì dị có các thông báo 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 mang thể lấy url của trong góc và sử dụng luôn )

sau khi có các 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 sử dụng trên máy tính ( dạng offline )

nên ta phải với bước Cover làm cho chuẩn nó khi tiêu dùng trên web bằng bí quyết truy hỏi 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 mang mấy file sau

Sau khi download font về ta có 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 bí quyết dùng font lên web ( thường có dạng sau )

@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;

hai

@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 một foder với 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 có 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 các con phố dẫn font vào ( ví dụ mình có theme là Noithat và foder Font được úp trong đó ) code css sẽ là

@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;

một

hai

@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 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 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é để giảm thiểu load font ko sử dụng đến

ví như Các bạn không khiến được hoặc mang nghi vấn gì vui lòng comment bên dưới để được viện trợ

Từ khóa: máy tính, theme, ứng dụng, video, google, code,

offcialroset

Thứ Ba, 2 tháng 8, 2022

Thêm font mới cho theme flatsome wordpress