5 ms·
I self-host fonts for my website, but I only use WOFF. You don't need to use SVG, TTF or EOT unless you want to provide full support for all browsers. If you ar
by interfacesketch 12y ago
I self-host fonts for my website, but I only use WOFF. You don't need to use SVG, TTF or EOT unless you want to provide full support for all browsers. If you are happy to provide support for recent, modern browsers only, you can simplify things by just self-hosting WOFF files:
http://caniuse.com/#feat=woff http://caniuse.com/#feat=woff
For browsers that don't support WOFF, just specify a browser-safe font in your CSS. Those browsers will ignore the Woff declaration and use the browser-safe font instead.
EDIT: As far as file size goes, I use two font weights on my site: Source Sans Pro regular and bold. Each font weighs 27kb - so 54kb in total. This is much less than many Javascript libraries and third-party embeds.
Here's my site (hope it's fine to link) - it's admittedly very simple and has no Javascript (although Javascript is needed to load the fonts!). In the end you have to weigh up the balance between page weight and performance for your own site.
http://www.interfacesketch.com/ http://www.interfacesketch.com/
- coreymaass 12y agoI'm glad you included a link. Those templates are great! Thanks for offering them for free.
- majodev 12y agoCool, I did not know that .woff is supported in every major browser. I will include a .woff only CSS snippet in the service ASAP. EDIT: Done.
- akurilin 12y agoPretty useful info, thank you, never realized one could get away with just WOFF nowadays.
- Animats 12y agoThanks. WOFF format now has enough traction that everything except Opera Mini supports it. Originally, Apple's IOS only supported fonts in SVG, of all things. Then they added TTF in 2010, and WOFF in 2012. Unless you need to support something pre-2012 and have it look pretty there, WOFF is enough. If you need to convert a font for which you have the rights, there's Font Squirrel. (http://www.fontsquirrel.com/tools/webfont-generator http://www.fontsquirrel.com/tools/webfont-generator). That tool can convert a font to all the popular formats. Throw in SVG if you need to support old iPhones. You don't really need Google Fonts as a service any more. That was a workaround. Just host on your own site in WOFF.
- markdown 12y ago> although Javascript is needed to load the fonts! Why do you feel the need to use JS for font-loading?
- interfacesketch 12y agoSorry, I worded my original post poorly. You need Javascript enabled to load fonts. For example, in Firefox, the WOFF fonts won't display unless Javascript is enabled (even if you have no Javascript on the page).
- Kiro 12y agoI don't know. I've had some real issues with WOFF even on modern browsers (Chrome, Mac), where for example it won't render when you don't have an external monitor plugged in (really strange, I know). The only solution I found was using SVG instead.