Font inheritance to a Subtheme

[guerinteedmike]

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.

[Bhanu Periwal]

Hello @guerinteedmike 

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.