First we will upload the font files to
app/design/frontend/[your_vendor_name]/[your_theme_name]/web/fonts
The available types are: “woff”, “woff2”, “ttf”, “eot”, “otf”, and “svg”
Second we need to create file
app/design/frontend/[your_vendor_name]/[your_theme_name]/web/css/source/_typography.less
add the following Mixin to the file
.lib-font-face(
@family-name:'[custom_font_name]',
@font-path: '@{baseDir}fonts/[path_to_font_file]',
@font-weight: [font_weight],
@font-style: [font_style],
@font-display: [auto|block|fallback|optional|swap]
);
[custom_font_name] : the name of your font that you will be using in your theme
Example:
font-family: "FS Meridian";
[path_to_font_file] : the file name without its extension
Example:
.lib-font-face(
@family-name:'FS Meridian',
@font-path: '@{baseDir}fonts/FSMeridian-Regular',
@font-weight: normal,
@font-style: normal,
@font-display: swap
);
.lib-font-face(
@family-name:'FS Meridian Medium',
@font-path: '@{baseDir}fonts/FSMeridian-Medium',
@font-weight: 500,
@font-style: normal,
@font-display: swap
);
and run the following command
bin/magento s:up && bin/magento s:d:c && bin/magento s:s:d -f
Hope this helps,
