3

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?

4

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.

  • How to add 2 or more fonts? – Luis Garcia Oct 7 '16 at 23:45
  • I've just edited above to answer your question – Devtype Oct 8 '16 at 11:19
  • When I do this, it tries to load the font but the font files don't seem to be put anywhere in pub/static so they 404 – Scott Feb 15 at 21:12
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.