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,

Post Views: 1,095

Add custom fonts to magento 2 theme