Showing results for 
Search instead for 
Did you mean: 

Font inheritance to a Subtheme


Font inheritance to a Subtheme

How do you add a custom font to a theme so that it will be inherited by child themes?


I work on a M2.3.3 instance that has multiple sites. All these sites will have the same basic look but just in different languages. We have purchased a theme and have created a subtheme in which all sites will inherit.


  • purchased_theme (parent theme Luma)
    • common_subtheme (parent purchased_theme)
      • site_1_theme (parent common_subtheme)
      • site_2_theme (parent common_subtheme)
      • etc.

How can I add a custom font to common_subtheme so it is available to all site themes?


I actually want to know the same for assets like images.


Re: Font inheritance to a Subtheme

Hello @mguerinhanf244 


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



    @font-path: '@{baseDir}fonts/<path_to_font_file>',
    @font-weight: <font_weight>,
    @font-style: <font_style>
    @font-display: <auto|block|fallback|option|swap>

@{baseDir} stands for the app/design/frontend/<vendor_name>/<theme_name>/web directory.


The mixin generates the CSS, which includes the font.


You must edit the app/code/Magento/Theme/view/frontend/layout/default_head_blocks.xml file to declare your fonts; otherwise, Magento 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.


You can also override them by adding a file with the same name in the relevant location according to the fallback schemes.


After these steps fonts of parent theme can be use for child theme as well.