Chào mọi người, hôm nay mình có cái website, khách hàng co cái fonts chữ lạ quá là: UTM Neo Sans Intel.ttf, UTM Neo Sans Intel_Italic.ttf, UTM Neo Sans IntelBold.ttf, UTM Neo Sans IntelBold_Italic.ttf gồm 4 file như mình vừa liệt kê có đuôi ttf. Khách hàng đưa cho mình 4 file có đuôi thế. Mình có up nó lên hết thư mục chính của web tại: /domains/anhdeptrai.vn/public_html/wp-content/themes/flatsome-child/fonts/.. lần lượt các fons chữ. Giờ mình muốn gắn nó vào web cho toàn web body nó nhân fonts chữ này thì làm như thế nào? mình vô phần style.css của web mà không biết add như thế nào? bạn nào biết cho mình đoạn code, cảm ơn rất nhiều.
Của bạn đây nhé, add code sau vào trên đầu file style.css web: HTML: @font-face { font-family: "UTM Neo Sans Intel"; src: url(/wp-content/themes/flatsome-child/fonts/UTM Neo Sans Intel.ttf) format("truetype"); font-display: swap; } @font-face { font-family: "UTM Neo Sans Intel"; font-weight: bold; src: url(/wp-content/themes/flatsome-child/fonts/UTM Neo Sans IntelBold.ttf) format("truetype"); font-display: swap; } @font-face { font-family: "UTM Neo Sans Intel"; font-style: italic; src: url(/wp-content/themes/flatsome-child/fonts/UTM Neo Sans Intel_Italic.ttf) format("truetype"); font-display: swap; } @font-face { font-family: "UTM Neo Sans Intel"; font-style: italic; font-weight: bold; src: url(/wp-content/themes/flatsome-child/fonts/UTM Neo Sans IntelBold_Italic.ttf) format("truetype"); font-display: swap; } body { font-family: 'UTM Neo Sans Intel', Arial, sans-serif !important; } Như vậy là xong, cần gọi thuộc tính in đậm, in nghiêng thì sử dụng thuộc tính font-weight và font-style nhé. Kiến thức thêm: Quy tắc thêm fonts chữ vào web như sau gắn được cho mọi web bạn tham khảo. Với đuôi .TTF HTML: @font-face { font-family: "Fonts Name"; src: url(http://lienketweb.com/css/file-fonts.ttf) format("truetype"); font-display: swap; } .cs-name { font-family: "Fonts Name", Verdana, Tahoma; } Hoặc chi tiết hơn HTML: @font-face { font-family: 'Fonts Name'; font-style: normal; font-weight: normal; src: local('Fonts Name'), url(http://lienketweb.com/css/file-fonts.ttf) format('truetype'); font-display: swap; } Với đuôi .OTF HTML: @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"); } Với đuôi .WOFF Mã: @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 Thêm 1 bộ fonts chữ thường và có in đậm, in nghiêng và in đậm + nghiêng HTML: @font-face { font-family: "Fonts Name"; src: url(/css/file-fonts.ttf) format("truetype"); font-display: swap; } @font-face { font-family: "Fonts Name"; font-weight: bold; src: url(/css/file-fonts_bold.ttf) format("truetype"); font-display: swap; } @font-face { font-family: "Fonts Name"; font-style: italic; src: url(/css/file-fonts_italic.ttf) format("truetype"); font-display: swap; } @font-face { font-family: "Fonts Name"; font-style: italic; font-weight: bold; src: url(/css/file-fonts_bold_italic.ttf) format("truetype"); font-display: swap; } Ra ngoài bạn chị cần gọi như dưới để lấy ra. HTML: body { font-family: 'Fonts Name', Arial, sans-serif !important; } HTML: body { font-family: 'Fonts Name', Arial, sans-serif !important; font-weight: bold; } HTML: body { font-family: 'Fonts Name', Arial, sans-serif !important; font-style: italic; } HTML: body { font-family: 'Fonts Name', Arial, sans-serif !important; font-weight: bold; font-style: italic; }
