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 the app/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 in web/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.
Change below code in your _typography.less
@family-name: 'Exo 2';
Change with
@family-name: @font-family-name__base,
Best Answer
1) To add a Google Font:
Go to
<theme_dir>/Magento_Theme/layout/default_head_blocks.xml
and add it like this:Reference
2) To add a font file:
1-
app\design\frontend\Vendor\CustomTheme\Magento_Theme\layout/default_head_blocks.xml
2- Put your fonts in the below custom theme directory.
app\design\frontend\Vendor\CustomTheme\web\fonts
3- Now include your custom fonts in
app\design\frontend\Vendor\CustomTheme\web\css/custom.css
Reference
Finally change the body, div, p etc.. in a css file with
font-family
propertynb: Some themes have the possibility to change this via the settings design theme in Admin panel.