Thêm fonts chữ vào website như thế nào chuẩn nhất và đơn giản nhất?

Thảo luận trong 'Lập trình website' bắt đầu bởi seolagi, 18/9/22.

  1. seolagi

    seolagi

    Moderator

    Thành viên BQT

    Tham gia ngày:
    16/4/14
    Bài viết:
    936
    Đã được thích:
    77
    Điểm thành tích:
    28
    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.

    add-fonts-chu-vao-web.jpg
     
    Cảm ơn đã xem bài:

    Thêm fonts chữ vào website như thế nào chuẩn nhất và đơn giản nhất?

  2. admin

    admin Phạm Công Sơn Thành viên BQT

    Tham gia ngày:
    22/5/13
    Bài viết:
    4,606
    Đã được thích:
    1,129
    Điểm thành tích:
    113
    Giới tính:
    Nam
    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.
    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;
    }
     


Like và Share ủng hộ ITSEOVN