I have added new fonts in <my theme>/web/fonts
, and declared those fonts in <my_theme>/web/css/source/_typography.less
. But still my custom fonts not reflecting in my pages.
I'm missing any configurations? anybody have idea over here?
Magento Stack Exchange is a question and answer site for users of the Magento e-Commerce platform. It only takes a minute to sign up.
Sign up to join this communityYou can add your custom font in your custom theme, creating the custom.css
file and include css in the default_head_blocks.xml
like the below files:
app\design\frontend\Vendor\CustomTheme\Magento_Theme\layout/default_head_blocks.xml
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
<css src="css/custom.css" />
</head>
</page>
And then put your fonts in the below custom theme directory.
**app\design\frontend\Vendor\CustomTheme\web\fonts**
And include your custom fonts in the custom.css
code like below:
app\design\frontend\Vendor\CustomTheme\web\css/custom.css
/*------------fontcss-------------*/
@font-face {
font-family: 'Playfair Display';
src: url('../fonts/sitefont/Playfair Display.eot');
src: url('../fonts/sitefont/Playfair Display.eot?#iefix') format('embedded-opentype'), url('../fonts/sitefont/Playfair Display.woff2') format('woff2'), url('../fonts/sitefont/Playfair Display.woff') format('woff'), url('../fonts/sitefont/Playfair Display.svg#Playfair Display') format('svg');
font-weight: 400;
font-style: normal;
font-stretch: normal;
unicode-range: U+0020-2212;
}
@font-face {
font-family: 'Century Gothic';
src: url('../fonts/sitefont/Century Gothic.eot');
src: url('../fonts/sitefont/Century Gothic.eot?#iefix') format('embedded-opentype'), url('../fonts/sitefont/Century Gothic.woff2') format('woff2'), url('../fonts/sitefont/Century Gothic.woff') format('woff'), url('../fonts/sitefont/Century Gothic.svg#Century Gothic') format('svg');
font-weight: 400;
font-style: normal;
font-stretch: normal;
unicode-range: U+0020-F003;
}
After including the fonts, run the php bin/magento setup:static-content:deploy
command.
Hope this help. It's working for me.
Add font in your theme web/fonts folder
app/design/frontend/<your_vendor_name>/<your_theme_name>/web/fonts
Create your @font-face rule. In file:
src/app/design/frontend/<your_vendor_name>/<your_theme_name>/web/css/source/_typography.less
insert code
& when (@media-common = true) {
.lib-font-face(
@family-name: @font-family-name__base,
@font-path: '@{baseDir}fonts/BioRhyme/BioRhyme-ExtraLight',
@font-weight: 200,
@font-style: normal,
@font-display: swap
);
.lib-font-face(
@family-name: @font-family-name__base,
@font-path: '@{baseDir}fonts/BioRhyme/BioRhyme-Light',
@font-weight: 300,
@font-style: normal,
@font-display: swap
);
.lib-font-face(
@family-name: @font-family-name__base,
@font-path: '@{baseDir}fonts/BioRhyme/BioRhyme-Regular',
@font-weight: 400,
@font-style: normal,
@font-display: swap
);
.lib-font-face(
@family-name: @font-family-name__base,
@font-path: '@{baseDir}fonts/BioRhyme/BioRhyme-Bold',
@font-weight: 700,
@font-style: normal,
@font-display: swap
);
.lib-font-face(
@family-name: @font-family-name__base,
@font-path: '@{baseDir}fonts/BioRhyme/BioRhyme-ExtraBold',
@font-weight: 800,
@font-style: normal,
@font-display: swap
);
}
This code will generate @font-face rules in style-m.css. Example:
@font-face {
font-family: 'BioRhyme';
src: url('../fonts/BioRhyme/BioRhyme-ExtraLight.woff2') format('woff2'), url('../fonts/BioRhyme/BioRhyme-ExtraLight.woff') format('woff');
font-weight: 200;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'BioRhyme';
src: url('../fonts/BioRhyme/BioRhyme-Light.woff2') format('woff2'), url('../fonts/BioRhyme/BioRhyme-Light.woff') format('woff');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'BioRhyme';
src: url('../fonts/BioRhyme/BioRhyme-Regular.woff2') format('woff2'), url('../fonts/BioRhyme/BioRhyme-Regular.woff') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'BioRhyme';
src: url('../fonts/BioRhyme/BioRhyme-Bold.woff2') format('woff2'), url('../fonts/BioRhyme/BioRhyme-Bold.woff') format('woff');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'BioRhyme';
src: url('../fonts/BioRhyme/BioRhyme-ExtraBold.woff2') format('woff2'), url('../fonts/BioRhyme/BioRhyme-ExtraBold.woff') format('woff');
font-weight: 800;
font-style: normal;
font-display: swap;
}
Override font you like. For example add in your theme css/source/_theme.less
//
// Fonts
// ---------------------------------------------
@font-family-name__base: 'BioRhyme';
You can also embed it from external link like Google Font https://fonts.google.com/
Edit this file
src/app/design/frontend/<your_vendor_name>/<your_theme_name>/Magento_Theme/layout/default_head_blocks.xml
and insert your code for example:
<!-- Google Fonts -->
<link src="https://fonts.googleapis.com/css2?family=BioRhyme:wght@300;400;700" rel="stylesheet" src_type="url" />
Enjoy
Along with the _typography.less
change, variables.less
file also need update. Instead of Open sans
font we have to declare our custom font. Then it works fine.
If you build a theme using the Magento UI library, declare the font by adding the .lib-font-face mixin to the app/design/frontend///web/css/source/_typography.less file:
.lib-font-face( @family-name:'', @font-path: '@{baseDir}fonts/', @font-weight: , @font-style: @font-display: ); 3- You must edit the app/code/Magento/Theme/view/frontend/layout/default_head_blocks.xml file to declare your fonts; otherwise, Magento 2.3 is not able to create the static/web/fonts/ directory. See app/code/Magento/Theme/view/frontend/layout/default_head_blocks.xml.
@font-display: swap is declared by default for Magento Blank theme in app/design/frontend/Magento/blank/web/css/source/_typography.less.
Fallback web fonts that are used by default in Magento are located in lib/web/css/source/lib/variables/_typography.less.
<theme_dir>/web/css/source/_typography.less
file code?var/view_preprocessed
andpub/static/frontend
?