2

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?

3

2 Answers 2

0

Change below code in your _typography.less

@family-name: 'Exo 2';

Change with

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

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';

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.