Jump to content

Lato font used from origin site server with cache controll

Qubabos
in Technical Problems

Featured Replies

Posted

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 ? 

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. 

Edited by Mark Round

  • Author
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 ?

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.

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;
}

 

  • Author

@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 ?

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/

Edited by Mark Round

  • Author

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

Edited by Qubabos

Yes of course

  • Author

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

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' ;

}

  • Author

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

Edited by Qubabos

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

Edited by Mark Round

Archived

This topic is now archived and is closed to further replies.

Go to topic listing

Recently Browsing 0

  • No registered users viewing this page.