Tell me more ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.
up vote 5 down vote favorite

My homepage currently uses 5 web fonts--I'd like it to be 6 due to spotty support for Helvetica Neue. One of the fonts is 'FontAwesome' icons, the other 4 are only used for a word or two (i.e. I have a heading that reads "Optimization" written in letters that look like an old computer).

2 of these fonts are available through Google and I request only the letters needed (and that works great). However, the other 2 are from openfontlibrary.org, and are only available in a single format. Which isn't a big deal (I'll need them securely anyway so local copies are better), a quickie with the Fontsquirrel.com @font-face generator and I have them in multiple formats, and the CSS to boot.

And then I test my page load time...ugh. I assume it would be possible for me to subset my local copies, anybody have have experience in this area?

share|improve this question

2 Answers

up vote 2 down vote accepted

Using non-standard web fonts have a significant performance impact on page load times compared to just using standard web-safe system fonts. This is the case regardless of whether you're using JavaScript or @font-face.

One should always carefully analyze whether or not non-standard web fonts should be used.

Some questions to ask yourself when considering using non-standard web fonts:

  • Are you using them just to show that you can and know how to?
  • Does it server a purpose in executing a better design and provide a better user experience?
  • Is the method used to implement the fonts cross-browser compatible?
  • Could an image suffice, especially if it is only a few words on a single page or just a few pages?
  • Is the font different enough from the web-safe fonts to make it worth-while to use?
  • If the font is used as body text, is it easily readable, or is the font designed for headers?

Make sure you at least understand the fundamentals of typography and how it impacts your design, and use that to your advantage.

share|improve this answer
Thanks for the detailed answer but I am going to admit a bit of frustration with the answers thus far. I realize it is impacting load time; I know about typography and web-safe fonts. I realize I could use an image (or image sprites) and alt text. However, those are last resorts for me. I could use a very safe font stack but that defeats the purpose of having web fonts (and even substitutes require an HTTP connection). Then you get into SEO, accessibility issues of font size adjust, translations, settings for the visually impaired, etc. If reasonable, I prefer to optimize my web fonts. – adam-asdf Aug 18 '12 at 5:32
If you had read the first article I linked to, you would have found information on ways to improve page load times while using non-standard web fonts. – nojak Aug 18 '12 at 5:57
Sorry, got overwhelmed by the number of links, I'll do that now. – adam-asdf Aug 18 '12 at 5:59
You were right, sorry for my impatience (it is actually the second link he gives). Details self-hosting, TypeKit, Google, font-squirrel (somehow I missed thinking of trying the advanced option of the @font-face generator), and even an analysis of different methods in different browsers. For those who comes across this down the road, it answered all my questions. – adam-asdf Aug 18 '12 at 6:14
Thanks for letting me know it was the second link. I mixed them up in the post. It's fixed now, so it's the first link. You may also want to look into Cufon and sIFR, if you haven't already. Also, a lot of my answer was meant for future readers, so that they think a bit before following the crowd in regards to using web fonts. – nojak Aug 18 '12 at 6:24
up vote 6 down vote

the other 4 are only used for a word or two

Is that a literal statement?
If so why are you bothering to embed these fonts at all, subsets or not? You shouldn't even be optimizing in this case, just removing. Make images of the text you need and use your favorite text-replacement technique. You're adding HTTP requests and download time to your site for the sake of a few words.

share|improve this answer
That had occurred to me, I just feel like if I say I can code with CSS3 a couple web fonts and a responsive design via media queries is probably wise. – adam-asdf Aug 17 '12 at 0:39
I noticed you have a lot of respect in this community (and apparently practical experience). What am I looking at? I know http(s) requests each take time, but give me something to make an informed decision...are we talking 2 seconds or 2 microseconds? I am practical but having a background in design I am aesthetically oriented. Give me a way to make an informed decision, please. – adam-asdf Aug 17 '12 at 4:02
1  
@Su' is entirely correct. Each site is different as far as HTTPRequests, it all really depends on the route between the client and your server. Someone using Dial-up (still) or a satellite connection will experience longer load times than someone on DSL or T1. Good aesthetics is incredibly important, but good structure and optimization is just as important. Minimizing the margin of load times is a common practice, thus limiting the number of HTTPRequests to your site. Making an image of the words will decrease the load time and your users won't know a thing. Look into CSS Sprites as well. – Christopher Aug 17 '12 at 5:26
@Christopher I'm glad you mentioned sprites, I guess you could say I am looking for a way to create a custom, locally available version of sprites in webfonts. – adam-asdf Aug 18 '12 at 5:22
@user1332729 Easy, do as Su' suggested (Create images of the words) and apply the CSS Sprite principles to it. Bang, there's as optimized as you can really get without going through image formats. What do you mean locally available? To you or your client? – Christopher Aug 18 '12 at 16:20
show 1 more comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.