Open Sans overwriting Lato ~ Magento 2.1

Question

This question has not been answered anywhere else. There is another post like this but it's not the same issue.

I have created a theme of my own, using Blank as the fallback. I have set Lato to be my default font.

I have set Lato in the CSS, on increasingly specific elements, with !important.

I have carefully gone through EVERY file in the site using DreamWeaver's excellent (and it's only useful) file search funtion, searching for occurences of both Open Sans and Open+Sans in the site files, and have found nothing outside of the dev/test folders that would affect my site.

I have refreshed the cache, and I have manually emptied the pub/*/frontend files.

And yet still, the fonts are clearly Open Sans and not Lato.

If I inspect the CSS file using Firebug, I have discovered this rule:

@font-face {
    font-family: "Lato";
    font-style: normal;
    font-weight: 300;
    src: url("http://www.XXX.co.uk/pub/static/frontend/XXX/ohc-dac/en_GB/fonts/opensans/light/opensans-300.eot?#iefix") format("embedded-opentype"), url("http://www.XXX.co.uk/pub/static/frontend/XXX/ohc-dac/en_GB/fonts/opensans/light/opensans-300.woff2") format("woff2"), url("http://www.XXX.co.uk/pub/static/frontend/XXX/ohc-dac/en_GB/fonts/opensans/light/opensans-300.woff") format("woff"), url("http://www.XXX.co.uk/pub/static/frontend/XXX/ohc-dac/en_GB/fonts/opensans/light/opensans-300.ttf") format("truetype"), url("http://www.XXX.co.uk/pub/static/frontend/XXX/ohc-dac/en_GB/fonts/opensans/light/opensans-300.svg#Lato") format("svg");
}

Which appears to show that the font in use is indeed called Lato, but it is using Opan Sans as Lato!? But how is this possible? I have completely emptied the pub/static/frontend folder a number of times, where is this cached font coming from?

It's driving me insane.

Answer 1

First of all, you need to supply the source files for the font that you wish to use because "Lato" is not a standard font.

Magento's LESS mixin for defining @font-face directives is this:

.lib-font-face(
    @family-name,
    @font-path,
    @font-weight: normal,
    @font-style: normal
) {
    @font-face {
        font-family: @family-name;
        src: url('@{font-path}.eot');
        src: url('@{font-path}.eot?#iefix') format('embedded-opentype'),
        url('@{font-path}.woff2') format('woff2'),
        url('@{font-path}.woff') format('woff'),
        url('@{font-path}.ttf') format('truetype'),
        url('@{font-path}.svg#@{family-name}') format('svg');
        font-weight: @font-weight;
        font-style: @font-style;
    }
}

found in /lib/web/css/source/lib/_typography.less

As you can see, you need to have all these formats .eot, .svg, .tff, .woff, and .woff2 in order to use this mixin. You would then place these files in /lib/fonts/yourfont/fontfile.tff for example.

Now to specify this as the default font, make the file /app/design/frontend/Your/theme/web/css/source/_extend.less with this contents:

@import 'lib/_typography.less';

@my-font-name: "FontName";
@font-family-name__base: @my-font-name;

.lib-font-face(
  @family-name: @my-font-name,
  @font-path: '@{baseDir}fonts/yourfont/fontfile',
  @font-weight: 300,
  @font-style: normal
);

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

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

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

Ideally you would have different subsets for each font-weight, but for this example I just used the same set for all. (see lib/web/fonts/opensans for example)

Now to re-compile the LESS you need to run rm -rf pub/static/* var/view_preprocessed/* from magento directory, flush cache, and flush your browser cache.