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

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.

• 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;
}

 

Cảm ơn ad, hihi mình thêm như trên được rùi, thanks !

 

Bạn có thế download fonts ở web sau nhé: dafont.com