Mất 1 phút đọc

Tùy chỉnh font cho website WordPress

Trong quá trình thiết kế website, Theo thiết kế có những font chữ mà theme WordPress bạn không hổ trợ, Để code font website WordPress đúng như thiết kế và quan trọng font theo như khách hàng yêu cầu. Nay Ứng Dụng Free sẽ hướng dẫn mọi người mình code riêng hệ thống font chữ cho website nhé.


Những font nào sử dụng được trên WordPress?

Tất cả các font bạn download được và đã việt hóa thì đều css sử dụng được trên website của bạn nhé. Các font có dạng đuôi như sau. Đuôi .TTF ,  .OTF, .WOFF sử dụng được trên website của bạn.

code font website WordPress

Hướng dẫn thêm code font website WordPress vào file .css

Code css thêm font đuôi .TTF

@font-face { 
   font-family: "Fonts Name"; 
   src: url(http://ungdungfree.com/css/file-fonts.ttf) format("truetype"); 
} 
.cs-name { 
   font-family: "Fonts Name", Verdana, Tahoma; 
}

Giải thích:

  • font-family: “Fonts Name”; (đây tên font sử dụng, bạn muốn đặt tên gì tùy thích)
  • src: url(http://ungdungfree.com/css/file-fonts.ttf) format(“truetype”); (đường dẫn bạn thư mục trên hosting bạn chưa font mới).

Code css thêm font đuôi .OTF

@font-face {
    font-family: 'Fonts Name;
    src: url("css/file-fonts.otf") format("opentype");
}
@font-face {
    font-family: 'Fonts Name';
    font-weight: bold;
    src: url("/css/file-fonts.otf") format("opentype");
}

Code css thêm font đuôi .WOFF

@font-face {
font-family: 'Fonts Name';
font-style: normal;
font-weight: normal;
src: local('Fonts Name'), url('/css/file-fonts.woff') format('woff');
}

Ngoài ra để tích hợp trọn bộ cho mọi trình duyệt thì bạn dùng công cụ convert fonts online xong add vào web cực dễ và hướng dẫn sau khi convert xong.

Kết luận

Qua bài viết hướng dẫn tùy chỉnh code font website WordPress hy vọng giúp ích cho các bạn mới học thiết kế website wordpress thay đổi font hiển thị website của mình được đẹp và chuyên nghiệp hơn. Trong quá trình thao tác không hiểu phần nào hãy để lại bình luận bên dưới để được hổ trợ.

5/5 - (6 Bình chọn)
353 lượt xem

21/03/2022 Ứng Dụng Miễn Phí

Bài viết liên quan

Block "5_tab_footer" not found