Locally stored fonts
Place the font files to your theme directory under: <theme_dir>/web/fonts
.
Include locally stored fonts
To include a custom font stored locally, use one of the following approaches:
- If you build a theme using Magento UI library, declare the font by adding the
.lib-font-face
mixin in the<theme_dir>/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> )
Where:
{@baseDir}
stands for theapp/design/frontend/<Vendor>/<theme>/web
directory.<path_to_font_file>
includes the font file name, but without the extension. For example,@font-path: '@{baseDir}fonts/Luma-Icons'
for the font stored inweb/fonts/Luma-Icons.woff
The mixin generates the CSS including font. For example, here is how the generated CSS looks for the Open Sans font used in the Blank theme:
@font-face { font-family: 'Open Sans'; src: url('../fonts/opensans/light/opensans-300.eot'); src: url('../fonts/opensans/light/opensans-300.eot?#iefix') format('embedded-opentype'), url('../fonts/opensans/light/opensans-300.woff2') format('woff2'), url('../fonts/opensans/light/opensans-300.woff') format('woff'), url('../fonts/opensans/light/opensans-300.ttf') format('truetype'), url('../fonts/opensans/light/opensans-300.svg#Open Sans') format('svg'); font-weight: 300; font-style: normal }
- 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.
Ref: devdocs.magento