cancel
Showing results for 
Search instead for 
Did you mean: 

Font inheritance to a Subtheme

Highlighted

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.

1 REPLY 1
Highlighted

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:

 

 

.lib-font-face(
    @family-name:'<any_font_name>',
    @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.