Comment by interfacesketch | Hacker News Reader

Comment by interfacesketch | Hacker News Reader

Parent Full thread

interfacesketch

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

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/

Thanks. 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). 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.

Cool, 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.

I 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.

I'm glad you included a link. Those templates are great! Thanks for offering them for free.

Pretty useful info, thank you, never realized one could get away with just WOFF nowadays.

> although Javascript is needed to load the fonts!

Why do you feel the need to use JS for font-loading?

Sorry, 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).

Reply on news.ycombinator.com