1

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?

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

4 Answers 4

Reset to default
9

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.

Improve this answer
5
  • I have tried with the Magento 2 way like using _typography.less file. and now it works fine.
    – seeni
    Mar 18, 2017 at 13:00
  • Thanks in future I will use the Magento 2 way to use the custom fonts.
    – mageDev0688
    Mar 22, 2017 at 10:08
  • @seeni Can you please help me in loading fonts in emails. I am facing the same issue.
    – Sejal Shah
    Aug 2, 2017 at 12:43
  • @SejalShah, did you get any solution ?
    – Dhaval Vaghela
    Jan 22, 2018 at 6:54
  • 1
    Thank you ! ! ! It worked on magento 2.3.4 version.
    – Giga Todadze
    May 9, 2020 at 13:33
2

Add font in your theme web/fonts folder

app/design/frontend/<your_vendor_name>/<your_theme_name>/web/fonts

Create your @font-face rule. In file:

src/app/design/frontend/<your_vendor_name>/<your_theme_name>/web/css/source/_typography.less

insert code

& when (@media-common = true) {
  .lib-font-face(
    @family-name: @font-family-name__base,
    @font-path: '@{baseDir}fonts/BioRhyme/BioRhyme-ExtraLight',
    @font-weight: 200,
    @font-style: normal,
    @font-display: swap
  );

  .lib-font-face(
    @family-name: @font-family-name__base,
    @font-path: '@{baseDir}fonts/BioRhyme/BioRhyme-Light',
    @font-weight: 300,
    @font-style: normal,
    @font-display: swap
  );

  .lib-font-face(
    @family-name: @font-family-name__base,
    @font-path: '@{baseDir}fonts/BioRhyme/BioRhyme-Regular',
    @font-weight: 400,
    @font-style: normal,
    @font-display: swap
  );

  .lib-font-face(
    @family-name: @font-family-name__base,
    @font-path: '@{baseDir}fonts/BioRhyme/BioRhyme-Bold',
    @font-weight: 700,
    @font-style: normal,
    @font-display: swap
  );

  .lib-font-face(
    @family-name: @font-family-name__base,
    @font-path: '@{baseDir}fonts/BioRhyme/BioRhyme-ExtraBold',
    @font-weight: 800,
    @font-style: normal,
    @font-display: swap
  );
}

This code will generate @font-face rules in style-m.css. Example:

@font-face {
  font-family: 'BioRhyme';
  src: url('../fonts/BioRhyme/BioRhyme-ExtraLight.woff2') format('woff2'), url('../fonts/BioRhyme/BioRhyme-ExtraLight.woff') format('woff');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'BioRhyme';
  src: url('../fonts/BioRhyme/BioRhyme-Light.woff2') format('woff2'), url('../fonts/BioRhyme/BioRhyme-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'BioRhyme';
  src: url('../fonts/BioRhyme/BioRhyme-Regular.woff2') format('woff2'), url('../fonts/BioRhyme/BioRhyme-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'BioRhyme';
  src: url('../fonts/BioRhyme/BioRhyme-Bold.woff2') format('woff2'), url('../fonts/BioRhyme/BioRhyme-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'BioRhyme';
  src: url('../fonts/BioRhyme/BioRhyme-ExtraBold.woff2') format('woff2'), url('../fonts/BioRhyme/BioRhyme-ExtraBold.woff') format('woff');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

Override font you like. For example add in your theme css/source/_theme.less

//
//  Fonts
//  ---------------------------------------------

@font-family-name__base: 'BioRhyme';

You can also embed it from external link like Google Font https://fonts.google.com/

Edit this file

src/app/design/frontend/<your_vendor_name>/<your_theme_name>/Magento_Theme/layout/default_head_blocks.xml

and insert your code for example:

<!-- Google Fonts -->
<link src="https://fonts.googleapis.com/css2?family=BioRhyme:wght@300;400;700" rel="stylesheet"  src_type="url" />

Enjoy

Improve this answer
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.

Improve this answer
1
  • Have you did any other thing ? because i have change _typography.less and _variables.less both file but font is still not update
    – Dhaval Vaghela
    Jan 16, 2018 at 5:53
0
  1. Add font files to your local theme directory. For example, app/design/frontend///web/fonts.

  2. If you build a theme using the Magento UI library, declare the font by adding the .lib-font-face mixin to the app/design/frontend///web/css/source/_typography.less file:

    .lib-font-face( @family-name:'', @font-path: '@{baseDir}fonts/', @font-weight: , @font-style: @font-display: ); 3- You must edit the app/code/Magento/Theme/view/frontend/layout/default_head_blocks.xml file to declare your fonts; otherwise, Magento 2.3 is not able to create the static/web/fonts/ directory. See app/code/Magento/Theme/view/frontend/layout/default_head_blocks.xml.

@font-display: swap is declared by default for Magento Blank theme in app/design/frontend/Magento/blank/web/css/source/_typography.less.

Fallback web fonts that are used by default in Magento are located in lib/web/css/source/lib/variables/_typography.less.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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