Lato font used from origin site server with cache controll

Qubabos · July 24, 2017

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 · July 24, 2017

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 · July 25, 2017

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 · July 25, 2017

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 · July 25, 2017

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 · July 25, 2017

@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 · July 25, 2017

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 · July 25, 2017

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 · July 25, 2017

Yes of course

Qubabos · July 25, 2017

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

Mark Round · July 25, 2017

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 · July 25, 2017

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

Mark Round · July 25, 2017

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

Invision Community 4: SEO, prepare for v5 and dormant account notifications

Invision Community 5: Beta testing and latest updates

Invision Community 4: A more professional report center

Invision Community 5: A video walkthrough creating a custom theme and homepage

Lato font used from origin site server with cache controll

Recommended Posts

Qubabos

Mark Round

Qubabos

Mark Round

Mark Round

Qubabos

Mark Round

Qubabos

Mark Round

Qubabos

Mark Round

Qubabos

Mark Round

Archived

Recently Browsing 0 members

More