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

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

Ví dụ khác:

HTML:

/* serif-regular */
@font-face {
    font-family: 'Serif';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/serif-regular.eot');
    /* IE9 Compat Modes */
    src: local('Serif'), local('Serif'), url('fonts/serif-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('fonts/serif-regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('fonts/serif-regular.woff') format('woff'), /* Modern Browsers */
    url('fonts/serif-regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('fonts/serif-regular.svg#Serif') format('svg');
    /* Legacy iOS */
}


/* serif-italic */
@font-face {
    font-family: 'Serif';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/serif-italic.eot');
    /* IE9 Compat Modes */
    src: local('Serif Italic'), local('Serif-Italic'), url('fonts/serif-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('fonts/serif-italic.woff2') format('woff2'), /* Super Modern Browsers */
    url('fonts/serif-italic.woff') format('woff'), /* Modern Browsers */
    url('fonts/serif-italic.ttf') format('truetype'), /* Safari, Android, iOS */
    url('fonts/serif-italic.svg#Serif') format('svg');
    /* Legacy iOS */
}


/* serif-700 */
@font-face {
    font-family: 'Serif';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/serif-700.eot');
    /* IE9 Compat Modes */
    src: local('Serif Bold'), local('Serif-Bold'), url('fonts/serif-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('fonts/serif-700.woff2') format('woff2'), /* Super Modern Browsers */
    url('fonts/serif-700.woff') format('woff'), /* Modern Browsers */
    url('fonts/serif-700.ttf') format('truetype'), /* Safari, Android, iOS */
    url('fonts/serif-700.svg#Serif') format('svg');
    /* Legacy iOS */
}