Thêm fonts .ttf vào website như thế nào?

Thảo luận trong 'Ngôn ngữ lập trình CSS, HTML, HTML5' bắt đầu bởi seolagi, 30/11/18.

  1. seolagi
    Tham gia ngày:
    16/4/14
    Bài viết:
    1,027
    Đã được thích:
    80
    Điểm thành tích:
    48
    HI mọi người mình có fonts đuối fonts-name.ttf giờ muốn thêm nó vào website dạng như: font-family: "fonts name" thì làm như thế nào vậy? thường mình download về add vào máy tính dễ, còn thêm vào website của mình thì không biết dùng như thế nào? bạn nào biết chỉ cho mình đoạn code để thêm vào file .css của web với nhé.
    Cảm ơn
     
    Cảm ơn đã xem bài:

    Thêm fonts .ttf vào website như thế nào?

  2. admin
    Tham gia ngày:
    22/5/13
    Bài viết:
    4,883
    Đã được thích:
    1,193
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Thêm code sau vào file .css nhé bạn:

    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;
    }
     
    Chỉnh sửa cuối: 18/9/22
    seolagi thích bài này.
  3. seolagi
    Tham gia ngày:
    16/4/14
    Bài viết:
    1,027
    Đã được thích:
    80
    Điểm thành tích:
    48
    Cảm ơn ad, hihi mình thêm như trên được rùi, thanks !
     
  4. admin
    Tham gia ngày:
    22/5/13
    Bài viết:
    4,883
    Đã được thích:
    1,193
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Bạn có thế download fonts ở web sau nhé: dafont.com
     
  5. helennguyen2255
    Tham gia ngày:
    11/12/18
    Bài viết:
    19
    Đã được thích:
    0
    Điểm thành tích:
    1
    Giới tính:
    Nữ
    Cách của AD là ok rồi, mình thì thường dùng các font trong bộ UTM đối với website tiếng Việt. Rất nhiều font đẹp
     
  6. i2b_2018
    Tham gia ngày:
    30/10/18
    Bài viết:
    34
    Đã được thích:
    0
    Điểm thành tích:
    6
    bài viết rất tốt, xin chân thành cảm ơn
     


Chủ để tương tự : Thêm fonts
Diễn đàn Tiêu đề Date
Ngôn ngữ lập trình CSS, HTML, HTML5 Counting Number Animation, Count Up trên themes Flatsome như thế nào? 11/6/23
Ngôn ngữ lập trình CSS, HTML, HTML5 Add thêm chatbox fanpage Facebook vào website mới nhất 2022 8/9/22
Ngôn ngữ lập trình CSS, HTML, HTML5 Thêm figure và figcaption cho hình ảnh trong ckeditor như thế nào? 17/11/20