Magento 2 – How to Add Multiple Locally Stored Fonts

cssdesignfontsmagento2

I want add one locally stored font in my custom theme folder. I followed the instructions here:

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/using-fonts.html

But the following code makes my store loads with no styles at all:

.lib-font-face(
    @family-name:'myfontname',
    @font-path: '@{baseDir}fonts/myfontname',
    @font-weight: normal,
    @font-style: normal
)

Why does this code break all styles?
And if this code is used to add one custom font, how to add two or more fonts locally stored?

Best Answer

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.

Related Topic