0

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 : ) !

Artfaith
  • 1,183
  • 4
  • 19
  • 29
  • 2
    Just FYI, if you use a [Google hosted font](https://www.google.com/fonts), when you choose a font you can also see an estimation of the time needed to download it, as well as having Google CDN (which are as fast as it can get) to avoid stressing your private server. – William Feb 01 '16 at 10:16
  • 1
    Thx for an advice! But I don't want to use Google repositories ... is there some kind of a local variant ? – Artfaith Feb 01 '16 at 10:22
  • 1
    I guess you can download the Google font on your server (thus keeping the benefit of choosing exactly which style and charset to keep. But why do you prefer local fonts? It's a very good practice to outsource these files to external CDNs (to avoid stress on your server, and also to provide the user with better caching and faster response times). So.. why? :) – William Feb 01 '16 at 11:03
  • I'm creating a unique CMS. So I don't want use there outside sources ; ). Or ... I could guess that this is just a principal suggestion : ). No, althought ... I'll stay on unique CMS xD – Artfaith Feb 01 '16 at 11:30
  • 1
    Well, I don't see why a CMS can't include external dependencies. Take this one for example: http://e107.org/ (it's just one among many). If you look at the source code you'll see that they use a CDN to include jQuery, Bootstrap and FontAwesome. – William Feb 01 '16 at 11:34
  • Nah, only jQuery ; ). I think, in order to have an updated repo. – Artfaith Feb 01 '16 at 11:49
  • 1
    It's not to have the latest version :) as you can see, they include specific versions for each dependency (they are currently using jQuery 2.1.4, Bootstrap 3.0.3, and FontAwesome 4.0.3). They use CDNs because [there are performance benefits](http://encosia.com/6953-reasons-why-i-still-let-google-host-jquery-for-me/). – William Feb 01 '16 at 11:55

1 Answers1

1

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.

Mushr00m
  • 2,258
  • 1
  • 21
  • 30