Thêm font mới cho theme flatsome wordpress

Thường rip theme từ 1 trang nào đó 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 thiết kế bên ngoài mặt 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 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 một font mới trên 1 web nào ấy tớ hay tiêu dùng tiện ích check font What Font Anh chị em mang thể download nhân tiện ích bằng cách click vào link này nhé

mang THỂ BẠN để ý

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 sở hữu một biểu 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 đó và mở nó lên là được 🙂 quá dễ đúng ko bạn !

bí quyết check font mới trên 1 web kì dị sở hữu các thông báo 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 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 với 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 khá khác so với font tiêu dùng trên máy tính ( dạng offline )

nên ta phải sở hữu bước Cover làm cho chuẩn nó khi dùng trên web bằng cách truy nã 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 có mấy file sau

Sau lúc download font về ta mang 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 cách sử dụng font lên web ( thường với 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;

một

@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 có tên là font ( thực tại 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 đường dẫn font vào ( ví dụ mình với 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 🙂

ví như 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 đã tiêu 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

nếu như Cả nhà không khiến được hoặc với câu hỏi 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