Magento 2: Font family does not change. How to troubleshoot?

Question

I created a child theme that inherits from theme X that in turn inherits from Magento Luma Theme. Hence, Theme inheritance is as follows:

Magento Blank <- Magento Luma <- Theme X <- My Theme

Theme X has its own _theme.less. Here is defined:

@base-font-family: 'Open Sans',Arial,Helvetica,sans-serif;

It also has its own _variables.less. Here is defined:

@font-family-name__base: 'Open Sans';
@font-family__base: @font-family-name__base, @font-family__sans-serif;

I want to change the font family to Exo 2.

Hence I copied the _theme.less to my child theme and changed @base-font-family to:

@base-font-family: 'Exo 2','Open Sans',Arial,Helvetica,sans-serif;

I also copied the _variables.less to my child theme and changed the following:

@font-family-name__base: 'Exo 2';
@font-family__base: @font-family-name__base, @font-family__sans-serif;

I also added a _typography.less:

/* cyrillic */
.lib-font-face {
  @family-name: 'Exo 2';
  @font-style: italic;
  @font-weight: 100;
  @font-path: '@{baseDir}fonts/Exo2/Exo2-ThinItalic.ttf'
}
/* latin-ext */
.lib-font-face {
  @family-name: 'Exo 2';
  @font-style: italic;
  @font-weight: 100;
  @font-path: '@{baseDir}fonts/Exo2/Exo2-ThinItalic.ttf'
}
/* latin */
.lib-font-face {
  @family-name: 'Exo 2';
  @font-style: italic;
  @font-weight: 100;
  @font-path: '@{baseDir}fonts/Exo2/Exo2-ThinItalic.ttf'
}
/* cyrillic */
.lib-font-face {
  @family-name: 'Exo 2';
  @font-style: italic;
  @font-weight: 200;
  @font-path: '@{baseDir}fonts/Exo2/Exo2-ExtraLightItalic.ttf'
}
/* latin-ext */
.lib-font-face {
  @family-name: 'Exo 2';
  @font-style: italic;
  @font-weight: 200;
  @font-path: '@{baseDir}fonts/Exo2/Exo2-ExtraLightItalic.ttf'
}
/* latin */
.lib-font-face {
  @family-name: 'Exo 2';
  @font-style: italic;
  @font-weight: 200;
  @font-path: '@{baseDir}fonts/Exo2/Exo2-ExtraLightItalic.ttf'
}
/* cyrillic */
.lib-font-face {
  @family-name: 'Exo 2';
  @font-style: italic;
  @font-weight: 300;
  @font-path: '@{baseDir}fonts/Exo2/Exo2-LightItalic.ttf'
}
/* latin-ext */
.lib-font-face {
  @family-name: 'Exo 2';
  @font-style: italic;
  @font-weight: 300;
  @font-path: '@{baseDir}fonts/Exo2/Exo2-LightItalic.ttf'
}
/* latin */
.lib-font-face {
  @family-name: 'Exo 2';
  @font-style: italic;
  @font-weight: 300;
  @font-path: '@{baseDir}fonts/Exo2/Exo2-LightItalic.ttf'
}
/* cyrillic */
.lib-font-face {
  @family-name: 'Exo 2';
  @font-style: italic;
  @font-weight: 400;
  @font-path: '@{baseDir}fonts/Exo2/Exo2-Italic.ttf'
}
/* latin-ext */
.lib-font-face {
  @family-name: 'Exo 2';
  @font-style: italic;
  @font-weight: 400;
  @font-path: '@{baseDir}fonts/Exo2/Exo2-Italic.ttf'
}
/* latin */
.lib-font-face {
  @family-name: 'Exo 2';
  @font-style: italic;
  @font-weight: 400;
  @font-path: '@{baseDir}fonts/Exo2/Exo2-Italic.ttf'
}
/* cyrillic */
.lib-font-face {
  @family-name: 'Exo 2';
  @font-style: italic;
  @font-weight: 500;
  @font-path: '@{baseDir}fonts/Exo2/Exo2-MediumItalic.ttf'
}
/* latin-ext */
.lib-font-face {
  @family-name: 'Exo 2';
  @font-style: italic;
  @font-weight: 500;
  @font-path: '@{baseDir}fonts/Exo2/Exo2-MediumItalic.ttf'
}
/* latin */
.lib-font-face {
  @family-name: 'Exo 2';
  @font-style: italic;
  @font-weight: 500;
  @font-path: '@{baseDir}fonts/Exo2/Exo2-MediumItalic.ttf'
}
/* cyrillic */
.lib-font-face {
  @family-name: 'Exo 2';
  @font-style: italic;
  @font-weight: 600;
  @font-path: '@{baseDir}fonts/Exo2/Exo2-SemiBoldItalic.ttf'
}
/* latin-ext */
.lib-font-face {
  @family-name: 'Exo 2';
  @font-style: italic;
  @font-weight: 600;
  @font-path: '@{baseDir}fonts/Exo2/Exo2-SemiBoldItalic.ttf'
}
/* latin */
.lib-font-face {
  @family-name: 'Exo 2';
  @font-style: italic;
  @font-weight: 600;
  @font-path: '@{baseDir}fonts/Exo2/Exo2-SemiBoldItalic.ttf'
}
/* cyrillic */
.lib-font-face {
  @family-name: 'Exo 2';
  @font-style: italic;
  @font-weight: 700;
  @font-path: '@{baseDir}fonts/Exo2/Exo2-BoldItalic.ttf'
}
/* latin-ext */
.lib-font-face {
  @family-name: 'Exo 2';
  @font-style: italic;
  @font-weight: 700;
  @font-path: '@{baseDir}fonts/Exo2/Exo2-BoldItalic.ttf'
}
/* latin */
.lib-font-face {
  @family-name: 'Exo 2';
  @font-style: italic;
  @font-weight: 700;
  @font-path: '@{baseDir}fonts/Exo2/Exo2-BoldItalic.ttf'
}
/* cyrillic */
.lib-font-face {
  @family-name: 'Exo 2';
  @font-style: italic;
  @font-weight: 800;
  @font-path: '@{baseDir}fonts/Exo2/Exo2-ExtraBoldItalic.ttf'
}
/* latin-ext */
.lib-font-face {
  @family-name: 'Exo 2';
  @font-style: italic;
  @font-weight: 800;
  @font-path: '@{baseDir}fonts/Exo2/Exo2-ExtraBoldItalic.ttf'
}
/* latin */
.lib-font-face {
  @family-name: 'Exo 2';
  @font-style: italic;
  @font-weight: 800;
  @font-path: '@{baseDir}fonts/Exo2/Exo2-ExtraBoldItalic.ttf'
}
/* cyrillic */
.lib-font-face {
  @family-name: 'Exo 2';
  @font-style: italic;
  @font-weight: 900;
  @font-path: '@{baseDir}fonts/Exo2/Exo2-BlackItalic.ttf'
}
/* latin-ext */
.lib-font-face {
  @family-name: 'Exo 2';
  @font-style: italic;
  @font-weight: 900;
  @font-path: '@{baseDir}fonts/Exo2/Exo2-BlackItalic.ttf'
}
/* latin */
.lib-font-face {
  @family-name: 'Exo 2';
  @font-style: italic;
  @font-weight: 900;
  @font-path: '@{baseDir}fonts/Exo2/Exo2-BlackItalic.ttf'
}
/* cyrillic */
.lib-font-face {
  @family-name: 'Exo 2';
  @font-style: normal;
  @font-weight: 100;
  @font-path: '@{baseDir}fonts/Exo2/Exo2-Thin.ttf'
}
/* latin-ext */
.lib-font-face {
  @family-name: 'Exo 2';
  @font-style: normal;
  @font-weight: 100;
  @font-path: '@{baseDir}fonts/Exo2/Exo2-Thin.ttf'
}
/* latin */
.lib-font-face {
  @family-name: 'Exo 2';
  @font-style: normal;
  @font-weight: 100;
  @font-path: '@{baseDir}fonts/Exo2/Exo2-Thin.ttf'
}
/* cyrillic */
.lib-font-face {
  @family-name: 'Exo 2';
  @font-style: normal;
  @font-weight: 200;
  @font-path: '@{baseDir}fonts/Exo2/Exo2-ExtraLight.ttf'
}
/* latin-ext */
.lib-font-face {
  @family-name: 'Exo 2';
  @font-style: normal;
  @font-weight: 200;
  @font-path: '@{baseDir}fonts/Exo2/Exo2-ExtraLight.ttf'
}
/* latin */
.lib-font-face {
  @family-name: 'Exo 2';
  @font-style: normal;
  @font-weight: 200;
  @font-path: '@{baseDir}fonts/Exo2/Exo2-ExtraLight.ttf'
}
/* cyrillic */
.lib-font-face {
  @family-name: 'Exo 2';
  @font-style: normal;
  @font-weight: 300;
  @font-path: '@{baseDir}fonts/Exo2/Exo2-Light.ttf'
}
/* latin-ext */
.lib-font-face {
  @family-name: 'Exo 2';
  @font-style: normal;
  @font-weight: 300;
  @font-path: '@{baseDir}fonts/Exo2/Exo2-Light.ttf'
}
/* latin */
.lib-font-face {
  @family-name: 'Exo 2';
  @font-style: normal;
  @font-weight: 300;
  @font-path: '@{baseDir}fonts/Exo2/Exo2-Light.ttf'
}
/* cyrillic */
.lib-font-face {
  @family-name: 'Exo 2';
  @font-style: normal;
  @font-weight: 400;
  @font-path: '@{baseDir}fonts/Exo2/Exo2-Regular.ttf'
}
/* latin-ext */
.lib-font-face {
  @family-name: 'Exo 2';
  @font-style: normal;
  @font-weight: 400;
  @font-path: '@{baseDir}fonts/Exo2/Exo2-Regular.ttf'
}
/* latin */
.lib-font-face {
  @family-name: 'Exo 2';
  @font-style: normal;
  @font-weight: 400;
  @font-path: '@{baseDir}fonts/Exo2/Exo2-Regular.ttf'
}
/* cyrillic */
.lib-font-face {
  @family-name: 'Exo 2';
  @font-style: normal;
  @font-weight: 500;
  @font-path: '@{baseDir}fonts/Exo2/Exo2-Medium.ttf'
}
/* latin-ext */
.lib-font-face {
  @family-name: 'Exo 2';
  @font-style: normal;
  @font-weight: 500;
  @font-path: '@{baseDir}fonts/Exo2/Exo2-Medium.ttf'
}
/* latin */
.lib-font-face {
  @family-name: 'Exo 2';
  @font-style: normal;
  @font-weight: 500;
  @font-path: '@{baseDir}fonts/Exo2/Exo2-Medium.ttf'
}
/* cyrillic */
.lib-font-face {
  @family-name: 'Exo 2';
  @font-style: normal;
  @font-weight: 600;
  @font-path: '@{baseDir}fonts/Exo2/Exo2-SemiBold.ttf'
}
/* latin-ext */
.lib-font-face {
  @family-name: 'Exo 2';
  @font-style: normal;
  @font-weight: 600;
  @font-path: '@{baseDir}fonts/Exo2/Exo2-SemiBold.ttf'
}
/* latin */
.lib-font-face {
  @family-name: 'Exo 2';
  @font-style: normal;
  @font-weight: 600;
  @font-path: '@{baseDir}fonts/Exo2/Exo2-SemiBold.ttf'
}
/* cyrillic */
.lib-font-face {
  @family-name: 'Exo 2';
  @font-style: normal;
  @font-weight: 700;
  @font-path: '@{baseDir}fonts/Exo2/Exo2-Bold.ttf'
}
/* latin-ext */
.lib-font-face {
  @family-name: 'Exo 2';
  @font-style: normal;
  @font-weight: 700;
  @font-path: '@{baseDir}fonts/Exo2/Exo2-Bold.ttf'
}
/* latin */
.lib-font-face {
  @family-name: 'Exo 2';
  @font-style: normal;
  @font-weight: 700;
  @font-path: '@{baseDir}fonts/Exo2/Exo2-Bold.ttf'
}
/* cyrillic */
.lib-font-face {
  @family-name: 'Exo 2';
  @font-style: normal;
  @font-weight: 800;
  @font-path: '@{baseDir}fonts/Exo2/Exo2-ExtraBold.ttf'
}
/* latin-ext */
.lib-font-face {
  @family-name: 'Exo 2';
  @font-style: normal;
  @font-weight: 800;
  @font-path: '@{baseDir}fonts/Exo2/Exo2-ExtraBold.ttf'
}
/* latin */
.lib-font-face {
  @family-name: 'Exo 2';
  @font-style: normal;
  @font-weight: 800;
  @font-path: '@{baseDir}fonts/Exo2/Exo2-ExtraBold.ttf'
}

I already read Magento's Doc but it doesen't work. I enabled the client-side frontend workflow. I cleaned the cache with magento cache:clean. But Open Sans is still used in the frontend. When I investigate the frontend I still find this CSS

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  src: local("Open Sans Regular"), local("OpenSans-Regular"), url("http://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFVZ0b.woff2") format("woff2");
  unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

What's wrong? What is the best practice to troubleshoot?

Is the font loading are you getting any not found errors on the console? — gabehou, Commented Mar 30, 2018 at 21:30
you can take a look of below and give me your URL for more understanding if possible. devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/… — Ruhani, Commented May 11, 2018 at 13:04

Hitesh Koshti · Accepted Answer · 2018-05-04 05:22:05Z

0

Change below code in your _typography.less

@family-name: 'Exo 2';

Change with

@family-name: @font-family-name__base,

answered May 4, 2018 at 5:22

Hitesh Koshti

1,4454 gold badges18 silver badges36 bronze badges

Add a comment |

Ivan Cunha · Accepted Answer · 2020-11-17 23:16:06Z

A few years later, to anyone else, here goes what I'm doing on a theme that extends Luma!

I'm loading a Google Font on this file: /app/design/frontend/<vendor_name>/<theme_name>/Magento_Theme/layout/default_head_blocks.xml

<!-- Google Fonts -->
<link src="https://fonts.gstatic.com" rel="preconnect" src_type="url" />
<link type="text/css" src="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&amp;display=swap" rel="stylesheet" src_type="url" />

(mind the &amp; instead of & that you get from the google fonts website)

Magento UI as the next line on /lib/web/css/source/lib/variables/_typography.less

@font-family__sans-serif: 'Helvetica Neue', Helvetica, Arial, sans-serif;

And then on Luma we have this next line here: /vendor/magento/theme-frontend-luma/web/css/source/_variables.less

@font-family-name__base: 'Open Sans';

But on Luma we also have the next line on that same file /vendor/magento/theme-frontend-luma/web/css/source/_variables.less

@font-family__base: @font-family-name__base, @font-family__sans-serif;

So on the final CSS we get this:

font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;

And this is why we can't get rid of 'Open Sans', because the two variables are being added.

So now, since we are extending from Luma we should change to this next line in this file: /app/design/frontend/<vendor_name>/<theme_name>/web/css/source/_typography.less

@font-family-name__base: 'Source Sans Pro';

and on the same file, instead of:

@font-family__base: @font-family-name__base, @font-family__sans-serif;

We take out the one from the Magento UI:

@font-family__sans-serif;

And we get this:

@font-family__base: @font-family-name__base;

So the final CSS is:

font-family: 'Source Sans Pro';

Stack Exchange Network

Magento 2: Font family does not change. How to troubleshoot?

2 Answers 2

Your Answer

Not the answer you're looking for? Browse other questions tagged
magento2
css
frontend
less
font-family
or ask your own question.

Hot Network Questions

Magento 2: Font family does not change. How to troubleshoot?

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

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

Related

Hot Network Questions

Not the answer you're looking for? Browse other questions tagged
magento2
css
frontend
less
font-family
or ask your own question.