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é.
Mục lục bài viết
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.
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.
- Link trang online convert: https://www.font-converter.net/en
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ợ.
353 lượt xem21/03/2022 Ứng Dụng Miễn Phí