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

cssfont familyfrontendlessmagento2

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?

Best Answer

Change below code in your _typography.less

@family-name: 'Exo 2';

Change with

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