Search code examples
htmlcssfontslightweight-processes

Light/Easy weight font for slow internet connection CSS

Could you advise me which font I should use in CSS file if we guess that user would have a slow internet connection to my site ?

I've connected local file of font: 

@font-face {
    font-family: 'Open Sans 2';
    src: url('fonts/OpenSans-Light.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

Opera shows me that this font would be downloaded for 2 secs !

Opera

As a result, site will be opened only per 5 secs. This is unnormal ...

Q: How to include only part of font file or could you give me some kind of lightweight font ?

Thank you for view : ) !

Solution

  • If your main goal is to have no downtime with your font then you should use native cross-browser fonts and not use CDN or Local ones : http://www.w3schools.com/cssref/css_websafe_fonts.asp You'll be good with that.

    If you really want to use other fonts GoogleFonts is a solid option or maybe a local one + cache. Also you can use a JS font loader like explain here https://www.lockedowndesign.com/load-google-fonts-asynchronously-for-page-speed But you'll have a blinking effect when the font is loaded I think.

    You have to think of your audiences and what is the most important for you. If you know they will all have slow connections, then go with using only native/safe fonts.