3

How can I remove default fonts ('Open Sans', 'Helvetica Neue' and Helvetica)? I just use Arial and sans-serif only..

Thanks

3 Answers 3

5

To remove the fonts you can override the _typography.less file within your theme. I just did this as was using custom fonts and wanted to remove the unnecessary old fonts from being downloaded.

Move /vendor/magento/theme-frontend-blank/web/css/source/_typography.less to /app/design/frontend/Vendor/Theme/web/css/source/_typography.less and remove the font from the new _typography.less file.

& when (@media-common = true) {
.lib-font-face(
    @family-name: @font-family-name__base,
    @font-path: '@{baseDir}fonts/opensans/light/opensans-300',
    @font-weight: 300,
    @font-style: normal
);

.lib-font-face(
    @family-name: @font-family-name__base,
    @font-path: '@{baseDir}fonts/opensans/regular/opensans-400',
    @font-weight: 400,
    @font-style: normal
);

.lib-font-face(
    @family-name: @font-family-name__base,
    @font-path: '@{baseDir}fonts/opensans/semibold/opensans-600',
    @font-weight: 600,
    @font-style: normal
);

.lib-font-face(
    @family-name: @font-family-name__base,
    @font-path: '@{baseDir}fonts/opensans/bold/opensans-700',
    @font-weight: 700,
    @font-style: normal
);
}

Remove any of the above if they are not required anymore.

Update (Preload Tags)

Magento includes certain resources as preload tags when fonts are added via XML. The Magento core adds these fonts to XML within default_head_blocks.xml for the blank theme for the above fonts. Warnings shows in Chrome saying about fonts downloaded that aren't used if this is the case.

So additionally add below to your default_head_blocks.xml within your theme to make sure the files aren't still downloaded:

<head>
    ...
    <remove src="fonts/opensans/regular/opensans-400.woff2"/>
    <remove src="fonts/opensans/bold/opensans-700.woff2"/>
    ...
4
  • didn't work for me , I using custom font via import in my extend.less file and that works flawless but couldn't remove opensans Commented Apr 20, 2018 at 9:42
  • Once i copied over the _typography.less into my theme and commented the above code out and cleared magento cache. Open Sans no longer loads into the site. Thanks :) Commented Aug 6, 2019 at 17:28
  • @harri , I have did the same but got this error "because its MIME type ('text/plain') is not a supported stylesheet MIME type, and strict MIME checking is enabled." Could you please help me about this ? Commented Oct 19, 2020 at 11:11
  • @SarfarajSipai I imagine that there is a 404 not found error for what fonts you have linked or something along those lines. Visit the url and see what it saying for that error. Then try and work out where it should actually point to pull the font and correct it.
    – harri
    Commented Oct 19, 2020 at 12:46
1

You can add your css and change from it. refer below links

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/using-fonts.html http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/xml-manage.html#layout_markup_css

hope it will helpful.

1
  • 1
    this is not right solution because pub/static when you delploy content the file will be overwritten. Commented Mar 9, 2016 at 6:39
0

In your Custom theme you need to override Blank or Luma's files.

Create a file "default_head_blocks.xml" in this path:

app/design/frontend//<Custom_Theme>/Magento_Theme/layout/override/theme/Magento/blank/

if your parent theme is luma instead:

app/design/frontend//<Custom_Theme>/Magento_Theme/layout/override/theme/Magento/luma/

In this new file paste this code:

<?xml version="1.0"?>
<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<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"/>
    </head>
</page>

after that remove css fonts declarations on

/app/design/frontend/Vendor/Theme/web/css/source/_typography.less

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.