Magento 2: How to add multiple locally stored fonts?

Question

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?

Answer 1

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.

Answer 2

If your theme does not use the Magento UI library, include the font in your theme .css files by the standard means of CSS, for example the @font-face rule.I've created mytheme.less file in web/css/ path and i than created _font-face.less file and import it in mytheme.less. I placed my font declaration using normal syntax with extension to it. Please change src:url accordingly.

_font-face.less

@font-face {
    font-family: 'Gilroy-Regular';
    src:url('../fonts/Gilroy-Regular.eot?387osh');
    src:url('../fonts/Gilroy-Regular.eot?#iefix387osh') format('embedded-opentype'),
        url('../fonts/Gilroy-Regular.woff?387osh') format('woff'),
        url('../fonts/Gilroy-Regular.ttf?387osh') format('truetype');
    font-weight: normal;
    font-style: normal;
}

I've that file as css included in my <theme>/Magento_Theme/layout/default_head_blocks.xml file in head tag. [ see how to include custom css file in magento 2]

default_head_blocks.xml

<css src="css/mytheme.css" order="100"/>

Than you will be able to your font-faces everywhere in your theme.