Magento – Magento 2 : How tonclude New Fonts

fontsless-cssmagento2theme

I have added new fonts in <my theme>/web/fonts, and declared those fonts in <my_theme>/web/css/source/_typography.less. But still my custom fonts not reflecting in my pages.

I'm missing any configurations? anybody have idea over here?

Best Answer

You can add your custom font in your custom theme, creating the custom.css file and include css in the default_head_blocks.xml like the below files:

app\design\frontend\Vendor\CustomTheme\Magento_Theme\layout/default_head_blocks.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
        <css src="css/custom.css" /> 
    </head>
</page>

And then put your fonts in the below custom theme directory.

**app\design\frontend\Vendor\CustomTheme\web\fonts**

And include your custom fonts in the custom.css code like below:

app\design\frontend\Vendor\CustomTheme\web\css/custom.css

/*------------fontcss-------------*/
@font-face {
    font-family: 'Playfair Display';
    src: url('../fonts/sitefont/Playfair Display.eot');
    src: url('../fonts/sitefont/Playfair Display.eot?#iefix') format('embedded-opentype'), url('../fonts/sitefont/Playfair Display.woff2') format('woff2'), url('../fonts/sitefont/Playfair Display.woff') format('woff'), url('../fonts/sitefont/Playfair Display.svg#Playfair Display') format('svg');
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
 unicode-range: U+0020-2212;
}
@font-face {
    font-family: 'Century Gothic';
    src: url('../fonts/sitefont/Century Gothic.eot');
    src: url('../fonts/sitefont/Century Gothic.eot?#iefix') format('embedded-opentype'), url('../fonts/sitefont/Century Gothic.woff2') format('woff2'), url('../fonts/sitefont/Century Gothic.woff') format('woff'), url('../fonts/sitefont/Century Gothic.svg#Century Gothic') format('svg');
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
 unicode-range: U+0020-F003;
}

After including the fonts, run the php bin/magento setup:static-content:deploy command.

Hope this help. It's working for me.

Related Topic