8

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?

Improve this question

3 Answers 3

Reset to default
6

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.

Improve this answer
6
  • 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. Commented Aug 17, 2012 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. Commented Aug 17, 2012 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. Commented Aug 17, 2012 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. Commented Aug 18, 2012 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? Commented Aug 18, 2012 at 16:20
4

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.

Improve this answer
5
  • 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. Commented Aug 18, 2012 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. Commented Aug 18, 2012 at 5:57
  • Sorry, got overwhelmed by the number of links, I'll do that now. Commented Aug 18, 2012 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. Commented Aug 18, 2012 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. Commented Aug 18, 2012 at 6:24
2

To follow up, I ended up using the advanced options of the @font-face generatorto subset my fonts, so I only loaded the characters needed.

One of the options was to Base64 encode the fonts (which allowed me to embed them in my CSS file). If memory serves, it Base64 encodes the .woff and the .ttf font.

While I like to support as many users of as many browsers as possible, I decided it wasn't worth slowing down the users of modern browsers with extra, likely redundant, data so I used Modernizr (which uses yep/nope.js) to asynchronously load a separate CSS file with references to all the font formats as per the hardened bulletproof font face syntax.

I went back and forth between Base64 encoding the .woff font and including the rest of the font declarations in the primary CSS file or only including the Base64 encoded .woff in the primary CSS and then including the other formats in a CSS file which I loaded asynchronously via Modernizr.load.

I prefer fast load times to aesthetics so FOUC wasn't a big concern but I will note that most browsers sort of 'blinked' on the fonts when they loaded (which was after the Base64 encoded fonts in the CSS had loaded) async.

On the plus side, once the fonts were loaded and stored in cache (long expires headers set on server) the 'blink' was eliminated and I was able to load extended sets of the fonts so that users who spoke other languages (and used the Google translate widget that was included) would still see stylized text.

Since this was my own site, I was able to experiment but I was largely doing it to "show off", I am more conservative with client sites.

Another technique I implemented was putting all the .svg fonts into a single file and identifying each with its own ID rather than having each in a separate file as the @font-face generator produces.

Improve this answer

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.