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?
Optimizing (reducing) web font requests
optimization;fonts
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 providea 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 asingle 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 thefont 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.