Friday, March 29, 2024

Thêm Font mới cho theme Flatsome WordPress (phần 1)

Thêm Font mới cho theme Flatsome WordPress

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

Sau khi tìm được font rồi các bạn phải biết cách thêm font mới lên web đang sử dụng nữa. Sau đây các bạn cùng An Nhiên tìm hiểu về cách làm này nhé.

Bí quyết check font mới trên 1 web khác:

Để check 1 font mới trên 1 web nào đó hay tiêu dùng tiện ích check font What Font. Các bạn có thể tham khảo bằng công cụ 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 sở hữu một biểu trưng check font trên thanh phương tiện, muốn check font trang nào ta chỉ việc vào trang web đó và mở nó lên là được các bạn nhé.

theme Flatsome WordPress
theme Flatsome WordPress

Chuẩn bị cho custom một font chữ:

  • Rà soát được font chữ.

  • Down font chữ về máy ( trường hợp bạn không muốn down bạn mang thể lấy url của trang gốc và sử dụng luôn )

–> sau khi  những thông tin trên thì 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 sử dụng trên máy tính (dạng offline) nên ta phải sở hữu bước Cover làm chuẩn nó lúc sử dụng trên web bằng cách thức truy tìm cập vào web : https://transfonter.org/ Giao diện vào thác tác như hình dưới đây nhé:

"Thêm

Sau khi đã dowload về các bạn sẽ thấy mấy file sau:

"Thêm

4 file tương ứng mang 4 mục chọn ở trên , mở file stylesheet.css sẽ cho các bạn biết bí quyết sử dụng font lên web ( thường mang 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;

Úp font lên web và chèn Code vào css để áp dụng font

  • Trong chilld theme web các bạn tạo một foder mang tên là font ( thực tế thì các bạn tải đâu cũng được nhưng úp lên child theme sau này bạn muốn mang đi đâu thì sẽ không bị lỗi font ), úp 4 font chữ vừa cover trên được vào trong foder đó.
  • Trong Css của theme dán mã trên và thay đường dẫn font vào (ví dụ theme là Noithat và foder Font được úp trong đấy ) 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;

Sau khi bạn thêm dòng code css này vào thì là xong rồi nhé.

( Giả dụ 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 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é để hạn chế load font không sử dụng đến.

Trên đây là toàn bị các bước để thêm font mới vào theme! Nếu các bạn còn thắc mắc thì liên hệ với GGASD nhé!

Cảm ơn các bạn đã đọc bài viết! Xin chân thành cảm ơn!

5/5 - (1 vote)
46,788FansLike

Bài Viết Mới