0

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?

  • IS the browser attempting to load the font? Is there a 404 error? – Ben Crook Mar 17 '17 at 9:57
  • no, it is still picking the default fonts. – seeni Mar 17 '17 at 10:15
  • Could you please show the <theme_dir>/web/css/source/_typography.less file code? – mageDev0688 Mar 17 '17 at 10:53
  • similar to blank theme _typography.less, screencast.com/t/RoFChdMyrNi – seeni Mar 17 '17 at 11:01
  • Have you cleared all caches and deleted var/view_preprocessed and pub/static/frontend? – Ben Crook Mar 17 '17 at 13:03
7

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/custome.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 include the fonts run the run the php bin/magento setup:static-content:deploy command.

Hope this help. It's working for me.

  • I have tried with the Magento 2 way like using _typography.less file. and now it works fine. – seeni Mar 18 '17 at 13:00
  • Thanks in future I will use the Magento 2 way to use the custom fonts. – mageDev0688 Mar 22 '17 at 10:08
  • @seeni Can you please help me in loading fonts in emails. I am facing the same issue. – Sejal Shah Aug 2 '17 at 12:43
  • @SejalShah, did you get any solution ? – Camit1dk Jan 22 '18 at 6:54
0

Along with the _typography.less change, variables.less file also need update. Instead of Open sans font we have to declare our custom font. Then it works fine.

  • Have you did any other thing ? because i have change _typography.less and _variables.less both file but font is still not update – Camit1dk Jan 16 '18 at 5:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.