Custom font wordpress – Chỉnh sửa font tùy ý trong wordpress

Đầu tiên chèn code vào file functions.php

// Font Bao Moi
function enqueue_our_required_stylesheets(){
    wp_enqueue_style('font-baomoi', get_stylesheet_directory_uri() . '/fonts/fonts.css');
}
add_action('wp_enqueue_scripts','enqueue_our_required_stylesheets');

// Disable Google Fonts in Elementor
add_filter( 'elementor/frontend/print_google_fonts', '__return_false' );

Tạo folder fonts và chèn các font bạn muốn chỉnh vào trong font folder. Sau đó tạo 1 file fonts.css cùng hàng với các font mà bạn vừa upload font lên và chèn cấu hình font vào file fonts.css

Ở đây mình đã upload font averta lên và đổi font TTF thành WOFF2 cho nhẹ web.

@font-face {
    font-family: Baomoi;
    src: url(Averta-Regular.woff2) format("woff2");
    font-weight: 400;
}
@font-face {
    font-family: Baomoi;
    src: url(SVN-Gilroy Medium.woff2) format("woff2");
    font-weight: 500;
}
@font-face {
    font-family: Baomoi;
    src: url(SVN-Gilroy-Bold.woff2) format("woff2");
    font-weight: 600;
}
@font-face {
    font-family: Baomoi;
    src: url(SVN-Gilroy-Bold.woff2) format("woff2");
    font-weight: 700;
}

.section-title-main,
h1,
h2,
h3,
h4,
h5,
h6,
strong,
.icon-box-text,
.icon-box-text h2,
.icon-box-text h3,
.icon-box-text h4,
.icon-box-text h5,
.sidebar-menu .nav-sidebar li a,
.col-inner,
.text-center,
.text-center h2,
.text-center h3,
.text-center h4,
.text-center h5,
.col-inner strong,
.col-inner h3,
.col-inner h4,
.header-nav>li.menu-item,
.header-nav>li.menu-item a,
.header-nav li.menu-item,
.header-nav li a,
h1.entry-title,
.widget-title,
.col-inner h2,
.col-inner h3,
.col-inner h4,
.col-inner h5,
.col-inner h6,
.top-bar-nav li.menu-item a,
.account-item span,
#header-contact li a span,
h3.product-section-title,
.woocommerce-breadcrumb.breadcrumbs,
ul.product-tabs>li>a,
.widget,
.product-short-description,
button.button,
.product_meta span,
h3.comment-reply-title,
.html.custom,
span.header-cart-title,
.footer-secondary.pull-right,
.utm-avo,
.tab a span,
.button,
.searchform .search-field,
.searchform .search-field::placeholder,
.header-top li a>span,
table tr th,
table tr td,
label,
.form-row input,
.form-row select,
.form-row textarea,
.mini_cart_item a,
.mini_cart_item span,
.woocommerce-mini-cart__total span,
.tab-panels .panel.entry-content,
.tab-panels .panel.entry-content p,
.woocommerce-MyAccount-navigation-link a,
.woocommerce-additional-fields h3,
.woocommerce-billing-fields h3,
.breadcrumbs a,
#mega-menu-title,
.woocommerce-info,
#product-sidebar .product-title,
strong,
a,
p,
div,
span,
del,
bdi,
ins,
.price, input::placeholder, input{
    font-family: 'Baomoi';
}
.ast-loop-product__link, .woocommerce-loop-product__title{
    font-family: 'Baomoi' !important;
}

Vậy là xong rồi đó . Chạy và tận hưởng thành quả nhé