- Add font files to your local theme directory. For example,
app/design/frontend/<your_vendor_name>/<your_theme_name>/web/fonts. To add external fonts, - configure the font
app/design/frontend/<your_vendor_name>/<your_theme_name>/web/css/source/_typography.
The mixin generates the CSS, which includes the font. The following example shows how to generate CSS for the Open Sans font 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;
font-display: swap;
}
3.link the font in default head blocks :<css src=”css/font.css” rel=”stylesheet” type=”text/css”/>