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

Question

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

first create a child theme of purchased theme by using: https://magento.stackexchange.com/questions/108684/how-to-create-a-child-theme-in-magento-2
Add custom CSS to child theme by using https://magento.stackexchange.com/questions/108685/how-to-add-a-custom-css-file-in-magento-2

After that you can add custom fonts to your theme! — Pawan, Feb 09 '19 at 18:17

score 3 · Accepted Answer · answered Feb 10 '19 at 14:17

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 '19 at 14:17

Alexander Bobylev

Hi Alexander Bobylev,
Thanks for your advice.

I can't find default_head_blocks.xml, Only default.xml.

Thanks for your help.
– Angelo Feb 10 '19 at 16:33
1

e.g. https://github.com/magento/magento2/blob/2.3-develop/app/design/frontend/Magento/luma/Magento_Theme/layout/default_head_blocks.xml – Alexander Bobylev Feb 10 '19 at 16:46
Please check here http://prntscr.com/mj6y59 app/design/frontend/Demo/demotheme/Magento_Theme/layout this is my layout folder – Angelo Feb 10 '19 at 17:04
create default_head_blocks.xml – Alexander Bobylev Feb 10 '19 at 17:13
https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/layouts/xml-manage.html#layout_markup_css
– Alexander Bobylev Feb 10 '19 at 17:15
Hi Alexander Bobylev, I refreshed the site cache and the source code of the page can see font.css But I can still see https://fonts.googleapis.com/css? family=Questrial:900,400%7CSource+Sans+Pro:400&subset=latin
Please check here https://prnt.sc/mj79s0 How to remove googleapis. – Angelo Feb 10 '19 at 17:33
Angelo, see https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/layouts/xml-manage.html#layout_markup_css_remove – Alexander Bobylev Feb 10 '19 at 17:55
Although I still haven't deleted googleapis, I am very grateful for your help. http://prntscr.com/mj7rpp – Angelo Feb 10 '19 at 18:11

1 Answers1