How to add and use a custom font in Magento 2?

Question 1

I purchased a magento 2 theme, but the theme uses the Google api font.

How can I use a custom local font?

Magento ver. 2.3.0

Question 2

first create a child theme of purchased theme by using: magento.stackexchange.com/questions/108684/… Add custom CSS to child theme by using magento.stackexchange.com/questions/108685/… After that you can add custom fonts to your theme!

Question 3

mkdir -p path_to_magento_install_dir/app/design/frontend/theme/custom-theme/web/fonts/CustomFont
upload myfonts_regular.ttf
mkdir -p path_to_magento_install_dir/app/design/frontend/theme/custom-theme/web/css
create fonts.css

@font-face {
 font-family: 'MyFonts';
 src: url('../fonts/CustomFont/myfonts_regular.ttf');
 font-weight: 300;
 font-style: normal
}

path_to_magento_install_dir/app/design/frontend/theme/custom-theme/Magento_Theme/layout/default_head_blocks.xml

 <head>
 ...
 <css src="css/fonts.css" />
 ...
 </head>

Question 4

Hi Alexander Bobylev, Thanks for your advice. I can't find default_head_blocks.xml, Only default.xml. Thanks for your help.

Question 5

Question 6

Please check here prntscr.com/mj6y59 app/design/frontend/Demo/demotheme/Magento_Theme/layout this is my layout folder

Question 7

create default_head_blocks.xml

Question 8

<?xml version="1.0"?> <page xmlns:xsi="w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <head> <css src="css/fonts.css" /> </head> </page> devdocs.magento.com/guides/v2.3/frontend-dev-guide/layouts/…

Alexander Bobylev 3103 silver badges5 bronze badges · Accepted Answer · 2019-02-10 14:17:39Z

3

mkdir -p path_to_magento_install_dir/app/design/frontend/theme/custom-theme/web/fonts/CustomFont
upload myfonts_regular.ttf
mkdir -p path_to_magento_install_dir/app/design/frontend/theme/custom-theme/web/css
create fonts.css

@font-face {
 font-family: 'MyFonts';
 src: url('../fonts/CustomFont/myfonts_regular.ttf');
 font-weight: 300;
 font-style: normal
}

path_to_magento_install_dir/app/design/frontend/theme/custom-theme/Magento_Theme/layout/default_head_blocks.xml

 <head>
 ...
 <css src="css/fonts.css" />
 ...
 </head>

answered Feb 10, 2019 at 14:17

3103 silver badges5 bronze badges

8

1 Answer 1