Magento 2 – Custom _typography.less Gives Error

magento2

I'm attempting to build a theme using Magentos UI library. Per the instructions on http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/using-fonts.html I have created a _typography.less file for my custom fonts. This fails with the following error.

Compilation from source:

frontend/mytheme/theme/en_US/css/styles-m.less

.font-face is undefined
in
/var/www/html/magento2/var/view_preprocessed/css/frontend/mytheme/theme/en_US/css/source/_typography.less

the _typography.less file includes

.font-face(
    @family-name: 'latoregular',
    @font-path: '@{baseDir}fonts/lato/lato-regular-webfont',
    @font-weight: normal,
    @font-style: normal
);

.font-face(
    @family-name: 'latomedium',
    @font-path: '@{baseDir}fonts/lato/lato-medium-webfont',
    @font-weight: normal,
    @font-style: normal
);

Best Answer

Renaming

.font-face

.lib-font-face

sorts this issue. Per github the UI library mixins had been renamed. The magento documentation just hadn't been updated to reflect the change.

Related Solutions

Magento 2 – How to Add Multiple Locally Stored Fonts

If you've followed DevDocs then you'll have _typography.less where you've defined your font by using .lib-font-face mixin. Now to use that font you can override @font-family-name__base variable by either declaring it in _themes.less file or in _variables.less files in your custom theme. so you'll end up with something like

@font-family-name__base:'myfontname';
@font-family__base: @font-family-name__base, @font-family__sans-serif;

To add multiple fonts, firstly you'll add fonts by using .lib-font-face mixin inside _typography.less file multiple times as required:

.lib-font-face(
@family-name:'my-primary-font',
@font-path: '@{baseDir}fonts/path_to_file',
@font-weight: font_weight,
@font-style: font_style
);
.lib-font-face(
@family-name:'my-secondary-font',
@font-path: '@{baseDir}fonts/path_to_file',
@font-weight: font_weight,
@font-style: font_style

);

you can use these fonts by introducing new variables where required:

@font-family-name__base:'my-primary-font';
@font-family__base: @font-family-name__base, @font-family__sans-serif;
@font-family-name__secondary-font:'mysecondaryfontname';
@font-family__secondary: @font-family-name__secondary-font, @font-family__secondary-fallback-font;

Now @font-family__base and @font-family__secondary variables can be used where required in your css (less).

Note you only need to provide the path where all required font files are located without providing any extension, mixin will load all files for you.

Best Answer

Related Solutions

Magento 2 – How to Add Multiple Locally Stored Fonts

Related Topic