Semantic-ui: Can the build account for locally provided fonts?

[kastork]

I want to vendor my own fonts for, say, an intranet app that won't be able to hit google to get them.

I've tried a bunch of things to try and get a font set included in my dist and referenced by the css.

From what I can tell, this _should_ work;

(Incidentally, the font download and css all comes from http://www.localfont.com/

1. In site/globals/site.variables Change @importGoogleFonts false

This doesn't work, I still get
@import url('https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic&subset=latin');
at the top of the file between the copyright notice and the Reset copyright notice.

I can get rid of it by setting @importGoogleFonts false in themes/default/globals/site.variables.

The goal is to prevent the app from trying to hit google, so I did make this change.

1. Get the fonts from, say google and put them in the theme assets folder.

themes
  default
    assets
      fonts
        Lato-regular
        Lato-regular.eot      
        Lato-regular.svg
        Lato-regular.ttf
        Lato-regular.woff
        Lato-regular.woff2

1. Then somehow get the site build to reference them. In site/globals/site.variables, do

@font-face {
  font-family: 'Lato';
  font-weight: 400;
  font-style: normal;
  src: url("@{fontPath}/Lato-regular/Lato-regular.eot");
  src: url("@{fontPath}/Lato-regular/Lato-regular.eot?#iefix") format('embedded-opentype'),
       local('Lato Regular'),
       local('Lato-regular'),
       url("@{fontPath}/Lato-regular/Lato-regular.woff2") format('woff2'),
       url("@{fontPath}/Lato-regular/Lato-regular.woff") format('woff'),
       url("@{fontPath}/Lato-regular/Lato-regular.ttf") format('truetype'),
       url("@{fontPath}/Lato-regular/Lato-regular.svg#Lato") format('svg');
}

When I do this, the distribution default theme font folder _does_ end up containing the fonts. But, the font face declaration does not get put anywhere that I can find -- should end up in semantic.css , right?

Since that didn't work, I again placed the change in themes/default/globals/site.variables at a position after @fontPath is defined. This also did not work. My font-face definition is not in the resulting semantic.css file.

Still no joy -- where should I put this @font-face definition?

[projecttalk-issuebot]

Hi, thanks for posting your question.

Unfortunately, GitHub issues is specifically for bug reports and feature requests.

Since this post does not fit into that category, it has been moved to ProjectTalk boards, a special board for usage questions.

Please check out our contributing guide to learn how to modify your post so that it can be used effectively within a bug tracker.

If you want to be notified about an answer, please go to your ProjectTalk thread and set your email preferences.

[jlukic]

I personally use @importGoogleFonts: false; and a custom @font-face definition in your site/globals/site.overrides when using SUI.

I'm not sure what would cause your issue with the @import rules still occurring but I'm unable to reproduce.

[heysailor]

+1 The original poster seems to be indicating a bug, which I am also running into.

When @importGoogleFonts: false; and a custom @font-face definition is placed in site/globals/site.overrides, the font-face definition does not appear in the generated semantic.css file.

[avalanche1]

If ther's a bug - open an issue with a test case pls

[milimetric]

For what it's worth, I did exactly this (with default semantic installation):

• check semantic/dist/components/site.css to see it uses google fonts
• download whatever google returns when you request https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic&subset=latin
• this download had a bunch of @font-face definitions, with urls pointing at fonts.gstatic.com
• I downloaded all these woff2 fonts to a local folder and changed the urls in the @font-face definitions
• I copied these @font-face definitions to semantic/src/site/globals/site.overrides
• I added @importGoogleFonts: false; in semantic/src/site/globals/site.variables
• I ran gulp build in the semantic/ folder again

After all that, the site.css is using my local fonts and my local builds work again without timing out on not reaching google servers. There seem to be a lot of hoops to jump through here, but I'm not sure I could suggest a cleaner system off the top of my head.

[ivantcholakov]

1.
I would recommend a way that I tend to use: Web Font Loader, https://github.com/typekit/webfontloader I recompile the sources with turned off @importGoogleFonts Then I use a JavaScript to load locally maintained fonts, for example:

webfontloader.html.twig

{#

https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization
https://developers.google.com/fonts/docs/webfont_loader
https://github.com/typekit/webfontloader
https://github.com/typekit/fvd
https://google-webfonts-helper.herokuapp.com

#}

    <script type="text/javascript" src="{{ js_url('lib/webfontloader/webfontloader.js') }}"></script>

    <script type="text/javascript">
    //<![CDATA[

        WebFont.load({
            custom: {
                families: [
                    'Lato',
                    'Icons',
                    'FontAwesome',
                    'Material Icons'
                ],
                urls: [
                    ASSET_CSS_URI + 'lib/lato/latofonts.min.css',
                    ASSET_CSS_URI + 'lib/semantic-icons-default/icons.css',
                    //ASSET_CSS_URI + 'lib/font-awesome-4/font-awesome.min.css',
                    ASSET_CSS_URI + 'lib/font-awesome-4-actions/font-awesome.min.css',
                    ASSET_CSS_URI + 'lib/material-icons/material-icons.min.css'
                ]
            },
            timeout: 2000
        });

    //]]>
    </script>

It is possible the script to be configured to load fonts from Google too. The important things that it tries to solve are: non-blocking (as it is possible) font loading, and reducing the so-called "flash of unstyled text".

2.
I faced a difficulty with the Lato font. Google provides its version 1, which supports only Latinian-origin letters. I need Cyrillic too, Lato version 2 supports it and many more. For using Lato version 2 Idownloaded the font files, but also I needed to make my own font-face css file for achieving compatibility:

latofonts.css

/* The Original Definitions ------------------------------------------------- */


/* Webfont: Lato-Black */@font-face {
    font-family: 'LatoWebBlack';
    src: url('../../../fonts/lato/Lato-Black.eot'); /* IE9 Compat Modes */
    src: url('../../../fonts/lato/Lato-Black.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../../../fonts/lato/Lato-Black.woff2') format('woff2'), /* Modern Browsers */
         url('../../../fonts/lato/Lato-Black.woff') format('woff'), /* Modern Browsers */
         url('../../../fonts/lato/Lato-Black.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

/* Webfont: Lato-BlackItalic */@font-face {
    font-family: 'LatoWebBlack';
    src: url('../../../fonts/lato/Lato-BlackItalic.eot'); /* IE9 Compat Modes */
    src: url('../../../fonts/lato/Lato-BlackItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../../../fonts/lato/Lato-BlackItalic.woff2') format('woff2'), /* Modern Browsers */
         url('../../../fonts/lato/Lato-BlackItalic.woff') format('woff'), /* Modern Browsers */
         url('../../../fonts/lato/Lato-BlackItalic.ttf') format('truetype');
    font-style: italic;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

/* Webfont: Lato-Bold */@font-face {
    font-family: 'LatoWebBold';
    src: url('../../../fonts/lato/Lato-Bold.eot'); /* IE9 Compat Modes */
    src: url('../../../fonts/lato/Lato-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../../../fonts/lato/Lato-Bold.woff2') format('woff2'), /* Modern Browsers */
         url('../../../fonts/lato/Lato-Bold.woff') format('woff'), /* Modern Browsers */
         url('../../../fonts/lato/Lato-Bold.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

/* Webfont: Lato-BoldItalic */@font-face {
    font-family: 'LatoWebBold';
    src: url('../../../fonts/lato/Lato-BoldItalic.eot'); /* IE9 Compat Modes */
    src: url('../../../fonts/lato/Lato-BoldItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../../../fonts/lato/Lato-BoldItalic.woff2') format('woff2'), /* Modern Browsers */
         url('../../../fonts/lato/Lato-BoldItalic.woff') format('woff'), /* Modern Browsers */
         url('../../../fonts/lato/Lato-BoldItalic.ttf') format('truetype');
    font-style: italic;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

/* Webfont: Lato-Hairline */@font-face {
    font-family: 'LatoWebHairline';
    src: url('../../../fonts/lato/Lato-Hairline.eot'); /* IE9 Compat Modes */
    src: url('../../../fonts/lato/Lato-Hairline.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../../../fonts/lato/Lato-Hairline.woff2') format('woff2'), /* Modern Browsers */
         url('../../../fonts/lato/Lato-Hairline.woff') format('woff'), /* Modern Browsers */
         url('../../../fonts/lato/Lato-Hairline.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

/* Webfont: Lato-HairlineItalic */@font-face {
    font-family: 'LatoWebHairline';
    src: url('../../../fonts/lato/Lato-HairlineItalic.eot'); /* IE9 Compat Modes */
    src: url('../../../fonts/lato/Lato-HairlineItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../../../fonts/lato/Lato-HairlineItalic.woff2') format('woff2'), /* Modern Browsers */
         url('../../../fonts/lato/Lato-HairlineItalic.woff') format('woff'), /* Modern Browsers */
         url('../../../fonts/lato/Lato-HairlineItalic.ttf') format('truetype');
    font-style: italic;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

/* Webfont: Lato-Heavy */@font-face {
    font-family: 'LatoWebHeavy';
    src: url('../../../fonts/lato/Lato-Heavy.eot'); /* IE9 Compat Modes */
    src: url('../../../fonts/lato/Lato-Heavy.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../../../fonts/lato/Lato-Heavy.woff2') format('woff2'), /* Modern Browsers */
         url('../../../fonts/lato/Lato-Heavy.woff') format('woff'), /* Modern Browsers */
         url('../../../fonts/lato/Lato-Heavy.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

/* Webfont: Lato-HeavyItalic */@font-face {
    font-family: 'LatoWebHeavy';
    src: url('../../../fonts/lato/Lato-HeavyItalic.eot'); /* IE9 Compat Modes */
    src: url('../../../fonts/lato/Lato-HeavyItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../../../fonts/lato/Lato-HeavyItalic.woff2') format('woff2'), /* Modern Browsers */
         url('../../../fonts/lato/Lato-HeavyItalic.woff') format('woff'), /* Modern Browsers */
         url('../../../fonts/lato/Lato-HeavyItalic.ttf') format('truetype');
    font-style: italic;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

/* Webfont: Lato-Italic */@font-face {
    font-family: 'LatoWeb';
    src: url('../../../fonts/lato/Lato-Italic.eot'); /* IE9 Compat Modes */
    src: url('../../../fonts/lato/Lato-Italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../../../fonts/lato/Lato-Italic.woff2') format('woff2'), /* Modern Browsers */
         url('../../../fonts/lato/Lato-Italic.woff') format('woff'), /* Modern Browsers */
         url('../../../fonts/lato/Lato-Italic.ttf') format('truetype');
    font-style: italic;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

/* Webfont: Lato-Light */@font-face {
    font-family: 'LatoWebLight';
    src: url('../../../fonts/lato/Lato-Light.eot'); /* IE9 Compat Modes */
    src: url('../../../fonts/lato/Lato-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../../../fonts/lato/Lato-Light.woff2') format('woff2'), /* Modern Browsers */
         url('../../../fonts/lato/Lato-Light.woff') format('woff'), /* Modern Browsers */
         url('../../../fonts/lato/Lato-Light.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

/* Webfont: Lato-LightItalic */@font-face {
    font-family: 'LatoWebLight';
    src: url('../../../fonts/lato/Lato-LightItalic.eot'); /* IE9 Compat Modes */
    src: url('../../../fonts/lato/Lato-LightItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../../../fonts/lato/Lato-LightItalic.woff2') format('woff2'), /* Modern Browsers */
         url('../../../fonts/lato/Lato-LightItalic.woff') format('woff'), /* Modern Browsers */
         url('../../../fonts/lato/Lato-LightItalic.ttf') format('truetype');
    font-style: italic;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

/* Webfont: Lato-Medium */@font-face {
    font-family: 'LatoWebMedium';
    src: url('../../../fonts/lato/Lato-Medium.eot'); /* IE9 Compat Modes */
    src: url('../../../fonts/lato/Lato-Medium.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../../../fonts/lato/Lato-Medium.woff2') format('woff2'), /* Modern Browsers */
         url('../../../fonts/lato/Lato-Medium.woff') format('woff'), /* Modern Browsers */
         url('../../../fonts/lato/Lato-Medium.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

/* Webfont: Lato-MediumItalic */@font-face {
    font-family: 'LatoWebMedium';
    src: url('../../../fonts/lato/Lato-MediumItalic.eot'); /* IE9 Compat Modes */
    src: url('../../../fonts/lato/Lato-MediumItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../../../fonts/lato/Lato-MediumItalic.woff2') format('woff2'), /* Modern Browsers */
         url('../../../fonts/lato/Lato-MediumItalic.woff') format('woff'), /* Modern Browsers */
         url('../../../fonts/lato/Lato-MediumItalic.ttf') format('truetype');
    font-style: italic;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

/* Webfont: Lato-Regular */@font-face {
    font-family: 'LatoWeb';
    src: url('../../../fonts/lato/Lato-Regular.eot'); /* IE9 Compat Modes */
    src: url('../../../fonts/lato/Lato-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../../../fonts/lato/Lato-Regular.woff2') format('woff2'), /* Modern Browsers */
         url('../../../fonts/lato/Lato-Regular.woff') format('woff'), /* Modern Browsers */
         url('../../../fonts/lato/Lato-Regular.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

/* Webfont: Lato-Semibold */@font-face {
    font-family: 'LatoWebSemibold';
    src: url('../../../fonts/lato/Lato-Semibold.eot'); /* IE9 Compat Modes */
    src: url('../../../fonts/lato/Lato-Semibold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../../../fonts/lato/Lato-Semibold.woff2') format('woff2'), /* Modern Browsers */
         url('../../../fonts/lato/Lato-Semibold.woff') format('woff'), /* Modern Browsers */
         url('../../../fonts/lato/Lato-Semibold.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

/* Webfont: Lato-SemiboldItalic */@font-face {
    font-family: 'LatoWebSemibold';
    src: url('../../../fonts/lato/Lato-SemiboldItalic.eot'); /* IE9 Compat Modes */
    src: url('../../../fonts/lato/Lato-SemiboldItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../../../fonts/lato/Lato-SemiboldItalic.woff2') format('woff2'), /* Modern Browsers */
         url('../../../fonts/lato/Lato-SemiboldItalic.woff') format('woff'), /* Modern Browsers */
         url('../../../fonts/lato/Lato-SemiboldItalic.ttf') format('truetype');
    font-style: italic;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

/* Webfont: Lato-Thin */@font-face {
    font-family: 'LatoWebThin';
    src: url('../../../fonts/lato/Lato-Thin.eot'); /* IE9 Compat Modes */
    src: url('../../../fonts/lato/Lato-Thin.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../../../fonts/lato/Lato-Thin.woff2') format('woff2'), /* Modern Browsers */
         url('../../../fonts/lato/Lato-Thin.woff') format('woff'), /* Modern Browsers */
         url('../../../fonts/lato/Lato-Thin.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

/* Webfont: Lato-ThinItalic */@font-face {
    font-family: 'LatoWebThin';
    src: url('../../../fonts/lato/Lato-ThinItalic.eot'); /* IE9 Compat Modes */
    src: url('../../../fonts/lato/Lato-ThinItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../../../fonts/lato/Lato-ThinItalic.woff2') format('woff2'), /* Modern Browsers */
         url('../../../fonts/lato/Lato-ThinItalic.woff') format('woff'), /* Modern Browsers */
         url('../../../fonts/lato/Lato-ThinItalic.ttf') format('truetype');
    font-style: italic;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}


/* Added by Ivan Tcholakov, 09-OCT-2016 ------------------------------------- */


/* Webfont: Lato-Black */@font-face {
    font-family: 'Lato';
    src: url('../../../fonts/lato/Lato-Black.eot'); /* IE9 Compat Modes */
    src: url('../../../fonts/lato/Lato-Black.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../../../fonts/lato/Lato-Black.woff2') format('woff2'), /* Modern Browsers */
         url('../../../fonts/lato/Lato-Black.woff') format('woff'), /* Modern Browsers */
         url('../../../fonts/lato/Lato-Black.ttf') format('truetype');
    font-style: normal;
    font-weight: 900;
    text-rendering: optimizeLegibility;
}

/* Webfont: Lato-BlackItalic */@font-face {
    font-family: 'Lato';
    src: url('../../../fonts/lato/Lato-BlackItalic.eot'); /* IE9 Compat Modes */
    src: url('../../../fonts/lato/Lato-BlackItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../../../fonts/lato/Lato-BlackItalic.woff2') format('woff2'), /* Modern Browsers */
         url('../../../fonts/lato/Lato-BlackItalic.woff') format('woff'), /* Modern Browsers */
         url('../../../fonts/lato/Lato-BlackItalic.ttf') format('truetype');
    font-style: italic;
    font-weight: 900;
    text-rendering: optimizeLegibility;
}

/* Webfont: Lato-Bold */@font-face {
    font-family: 'Lato';
    src: url('../../../fonts/lato/Lato-Bold.eot'); /* IE9 Compat Modes */
    src: url('../../../fonts/lato/Lato-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../../../fonts/lato/Lato-Bold.woff2') format('woff2'), /* Modern Browsers */
         url('../../../fonts/lato/Lato-Bold.woff') format('woff'), /* Modern Browsers */
         url('../../../fonts/lato/Lato-Bold.ttf') format('truetype');
    font-style: normal;
    font-weight: 700;
    text-rendering: optimizeLegibility;
}

/* Webfont: Lato-BoldItalic */@font-face {
    font-family: 'Lato';
    src: url('../../../fonts/lato/Lato-BoldItalic.eot'); /* IE9 Compat Modes */
    src: url('../../../fonts/lato/Lato-BoldItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../../../fonts/lato/Lato-BoldItalic.woff2') format('woff2'), /* Modern Browsers */
         url('../../../fonts/lato/Lato-BoldItalic.woff') format('woff'), /* Modern Browsers */
         url('../../../fonts/lato/Lato-BoldItalic.ttf') format('truetype');
    font-style: italic;
    font-weight: 700;
    text-rendering: optimizeLegibility;
}

/* Webfont: Lato-Hairline */@font-face {
    font-family: 'Lato';
    src: url('../../../fonts/lato/Lato-Hairline.eot'); /* IE9 Compat Modes */
    src: url('../../../fonts/lato/Lato-Hairline.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../../../fonts/lato/Lato-Hairline.woff2') format('woff2'), /* Modern Browsers */
         url('../../../fonts/lato/Lato-Hairline.woff') format('woff'), /* Modern Browsers */
         url('../../../fonts/lato/Lato-Hairline.ttf') format('truetype');
    font-style: normal;
    font-weight: 100;
    text-rendering: optimizeLegibility;
}

/* Webfont: Lato-HairlineItalic */@font-face {
    font-family: 'Lato';
    src: url('../../../fonts/lato/Lato-HairlineItalic.eot'); /* IE9 Compat Modes */
    src: url('../../../fonts/lato/Lato-HairlineItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../../../fonts/lato/Lato-HairlineItalic.woff2') format('woff2'), /* Modern Browsers */
         url('../../../fonts/lato/Lato-HairlineItalic.woff') format('woff'), /* Modern Browsers */
         url('../../../fonts/lato/Lato-HairlineItalic.ttf') format('truetype');
    font-style: italic;
    font-weight: 100;
    text-rendering: optimizeLegibility;
}

/* Webfont: Lato-Heavy */@font-face {
    font-family: 'Lato';
    src: url('../../../fonts/lato/Lato-Heavy.eot'); /* IE9 Compat Modes */
    src: url('../../../fonts/lato/Lato-Heavy.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../../../fonts/lato/Lato-Heavy.woff2') format('woff2'), /* Modern Browsers */
         url('../../../fonts/lato/Lato-Heavy.woff') format('woff'), /* Modern Browsers */
         url('../../../fonts/lato/Lato-Heavy.ttf') format('truetype');
    font-style: normal;
    font-weight: 800;
    text-rendering: optimizeLegibility;
}

/* Webfont: Lato-HeavyItalic */@font-face {
    font-family: 'Lato';
    src: url('../../../fonts/lato/Lato-HeavyItalic.eot'); /* IE9 Compat Modes */
    src: url('../../../fonts/lato/Lato-HeavyItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../../../fonts/lato/Lato-HeavyItalic.woff2') format('woff2'), /* Modern Browsers */
         url('../../../fonts/lato/Lato-HeavyItalic.woff') format('woff'), /* Modern Browsers */
         url('../../../fonts/lato/Lato-HeavyItalic.ttf') format('truetype');
    font-style: italic;
    font-weight: 800;
    text-rendering: optimizeLegibility;
}

/* Webfont: Lato-Italic */@font-face {
    font-family: 'Lato';
    src: url('../../../fonts/lato/Lato-Italic.eot'); /* IE9 Compat Modes */
    src: url('../../../fonts/lato/Lato-Italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../../../fonts/lato/Lato-Italic.woff2') format('woff2'), /* Modern Browsers */
         url('../../../fonts/lato/Lato-Italic.woff') format('woff'), /* Modern Browsers */
         url('../../../fonts/lato/Lato-Italic.ttf') format('truetype');
    font-style: italic;
    font-weight: 400;
    text-rendering: optimizeLegibility;
}

/* Webfont: Lato-Light */@font-face {
    font-family: 'Lato';
    src: url('../../../fonts/lato/Lato-Light.eot'); /* IE9 Compat Modes */
    src: url('../../../fonts/lato/Lato-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../../../fonts/lato/Lato-Light.woff2') format('woff2'), /* Modern Browsers */
         url('../../../fonts/lato/Lato-Light.woff') format('woff'), /* Modern Browsers */
         url('../../../fonts/lato/Lato-Light.ttf') format('truetype');
    font-style: normal;
    font-weight: 300;
    text-rendering: optimizeLegibility;
}

/* Webfont: Lato-LightItalic */@font-face {
    font-family: 'Lato';
    src: url('../../../fonts/lato/Lato-LightItalic.eot'); /* IE9 Compat Modes */
    src: url('../../../fonts/lato/Lato-LightItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../../../fonts/lato/Lato-LightItalic.woff2') format('woff2'), /* Modern Browsers */
         url('../../../fonts/lato/Lato-LightItalic.woff') format('woff'), /* Modern Browsers */
         url('../../../fonts/lato/Lato-LightItalic.ttf') format('truetype');
    font-style: italic;
    font-weight: 300;
    text-rendering: optimizeLegibility;
}

/* Webfont: Lato-Medium */@font-face {
    font-family: 'Lato';
    src: url('../../../fonts/lato/Lato-Medium.eot'); /* IE9 Compat Modes */
    src: url('../../../fonts/lato/Lato-Medium.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../../../fonts/lato/Lato-Medium.woff2') format('woff2'), /* Modern Browsers */
         url('../../../fonts/lato/Lato-Medium.woff') format('woff'), /* Modern Browsers */
         url('../../../fonts/lato/Lato-Medium.ttf') format('truetype');
    font-style: normal;
    font-weight: 500;
    text-rendering: optimizeLegibility;
}

/* Webfont: Lato-MediumItalic */@font-face {
    font-family: 'Lato';
    src: url('../../../fonts/lato/Lato-MediumItalic.eot'); /* IE9 Compat Modes */
    src: url('../../../fonts/lato/Lato-MediumItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../../../fonts/lato/Lato-MediumItalic.woff2') format('woff2'), /* Modern Browsers */
         url('../../../fonts/lato/Lato-MediumItalic.woff') format('woff'), /* Modern Browsers */
         url('../../../fonts/lato/Lato-MediumItalic.ttf') format('truetype');
    font-style: italic;
    font-weight: 500;
    text-rendering: optimizeLegibility;
}

/* Webfont: Lato-Regular */@font-face {
    font-family: 'Lato';
    src: url('../../../fonts/lato/Lato-Regular.eot'); /* IE9 Compat Modes */
    src: url('../../../fonts/lato/Lato-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../../../fonts/lato/Lato-Regular.woff2') format('woff2'), /* Modern Browsers */
         url('../../../fonts/lato/Lato-Regular.woff') format('woff'), /* Modern Browsers */
         url('../../../fonts/lato/Lato-Regular.ttf') format('truetype');
    font-style: normal;
    font-weight: 400;
    text-rendering: optimizeLegibility;
}

/* Webfont: Lato-Semibold */@font-face {
    font-family: 'Lato';
    src: url('../../../fonts/lato/Lato-Semibold.eot'); /* IE9 Compat Modes */
    src: url('../../../fonts/lato/Lato-Semibold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../../../fonts/lato/Lato-Semibold.woff2') format('woff2'), /* Modern Browsers */
         url('../../../fonts/lato/Lato-Semibold.woff') format('woff'), /* Modern Browsers */
         url('../../../fonts/lato/Lato-Semibold.ttf') format('truetype');
    font-style: normal;
    font-weight: 600;
    text-rendering: optimizeLegibility;
}

/* Webfont: Lato-SemiboldItalic */@font-face {
    font-family: 'Lato';
    src: url('../../../fonts/lato/Lato-SemiboldItalic.eot'); /* IE9 Compat Modes */
    src: url('../../../fonts/lato/Lato-SemiboldItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../../../fonts/lato/Lato-SemiboldItalic.woff2') format('woff2'), /* Modern Browsers */
         url('../../../fonts/lato/Lato-SemiboldItalic.woff') format('woff'), /* Modern Browsers */
         url('../../../fonts/lato/Lato-SemiboldItalic.ttf') format('truetype');
    font-style: italic;
    font-weight: 600;
    text-rendering: optimizeLegibility;
}

/* Webfont: Lato-Thin */@font-face {
    font-family: 'Lato';
    src: url('../../../fonts/lato/Lato-Thin.eot'); /* IE9 Compat Modes */
    src: url('../../../fonts/lato/Lato-Thin.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../../../fonts/lato/Lato-Thin.woff2') format('woff2'), /* Modern Browsers */
         url('../../../fonts/lato/Lato-Thin.woff') format('woff'), /* Modern Browsers */
         url('../../../fonts/lato/Lato-Thin.ttf') format('truetype');
    font-style: normal;
    font-weight: 200;
    text-rendering: optimizeLegibility;
}

/* Webfont: Lato-ThinItalic */@font-face {
    font-family: 'Lato';
    src: url('../../../fonts/lato/Lato-ThinItalic.eot'); /* IE9 Compat Modes */
    src: url('../../../fonts/lato/Lato-ThinItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../../../fonts/lato/Lato-ThinItalic.woff2') format('woff2'), /* Modern Browsers */
         url('../../../fonts/lato/Lato-ThinItalic.woff') format('woff'), /* Modern Browsers */
         url('../../../fonts/lato/Lato-ThinItalic.ttf') format('truetype');
    font-style: italic;
    font-weight: 200;
    text-rendering: optimizeLegibility;
}

[jafolkerts]

@milimetric Can you please post an example of the URL you used in the @font-face definition?

[milimetric]

@jafolkerts if you follow my guide you'll see the urls. You need all of them. But for example one of them is:

https://fonts.gstatic.com/s/lato/v11/v0SdcGFAl2aezM9Vq_aFTQ.ttf