Lato font used from origin site server with cache controll

[Qubabos]

Hto to use Lato webfont avalaible in IPS 4.2 stock theme as local resource instead of loading this font from Google Webfonts ? 

Quote

Optionally choose a Google Web Font to use for body text. 'Default' uses whichever font face this theme defines in its stylesheet.

I want to use this font with custom theme and load to users from my server with cache control feature, allowing to store this font in users local cache.

Anyone ? 

[Mark Round]

For this you would have to upload the font to your server and then Reference the font face in your css , you would need the ttf wofff  svg and eot to do this and also the license for the font if required. 

[Qubabos]

7 hours ago, Mark Round said:

For this you would have to upload the font to your server and then Reference the font face in your css , you would need the ttf wofff  svg and eot to do this and alias the license for the font if required. 

how to do this ?

[Mark Round]

I will test this on my site and report back the findings for you. I haven't tried this in 4.2 yet but it shouldn't be an issue.

[Mark Round]

Ok, you need to upload the lato webfonts to your server in a location of your choice,then you need to add the following to your css.For this example i put the fonts in a folder called fonts and placed this on the server root.Once you have this css you can call on the font in any area of your site using any of the font family listed below.Let me know if you need any assistance with this.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

[Qubabos]

@Mark Round thank you so much for this  I need to include all type of this font or just leave one of them ? Which one wil be most similar to this one included in IPS 4.2 theme setting ?

[Mark Round]

You only need to include the ones you want,you can upload them all if you like but you just need to reference the one you want to use.Test it out and see which ones you like best   i got the fonts from here for testing purpose http://www.latofonts.com/lato-free-fonts/

[Qubabos]

once again - thank you @Mark Round  So this way Lato font will be loaded just like default one - from local server resource, right ?

[Mark Round]

Yes of course

[Qubabos]

What css template I need to use ? base theme or custom ? I put this into custom.css and it doesnt work.

[Mark Round]

You paste the code into custom css , then you need to target the elements of your theme with the font. 

For example

body {

font-family: 'yourfont' ;

}

[Qubabos]

all good, it works but only for chrome and ff. Guess edge uses different font.

[Mark Round]

im sure there is a workaround for edge too,glad its working mate