webfonts vs websafe fonts and alternatives

[Matthew]

Apologies for me having no idea…hence I am here.

Have purchased a futura condensed bold italic webfont to use on a website. From what I understand this means it can be used with @font-face reference in the style sheet, I save the font file on server and the font will be loaded on a certain range of compatible browsers.

As a back up I am assuming I should include a reference to other common similar fonts, including a true websafe font.

A couple of questions..

How widely compatible is font-face? (e.g will this font say load on an iphone)
What are the alternatives to this approach? (e.g. google fonts)
Are font “families” pre-defined or can I “create my own” with my own range of fonts? (e.g. can i stick my futura font in a row with say franklin gothic, arial narrow bold italic, arial)

Any help would be greatly appreciated

[chrisburton]

This is the support for @font-face: http://caniuse.com/fontface

Yes, it will load on the iPhone (svg).

Yes, you can call multiple font families (up to 4).

And no, I wouldn’t use Google’s web fonts.

The alternatives are Typekit, MyFonts, etc.

[Zoom]

> And no, I wouldn’t use Google’s web fonts.

Why?

[Andy Howells]

The quality of google web fonts is pretty poor. Plus I loathe @importing from a public source.

[Zoom]

> The quality of google web fonts is pretty poor.

What is the best place for good free fonts?

> Plus I loathe @importing from a public source.

Why? Is it slower? You can also use link or javascript and I believe you can download them and keep them on your own server.

Is Typekit faster than all methods that Google Fonts can be used?

[Andy Howells]

@importing is another HTTP request to worry about and will slow down a sites load time.

Regarding fonts, you get what you pay for and Typekit is dirt cheap. However, if you’re adamant you want free fonts check out [FontSquirrel](http://fontsquirrel.com).

Typekit is faster insofar as you can use async, so it loads alongside your content and doesn’t get in the way. I use Typekit though mainly for the quality of the fonts and the variety available.

[chrisburton]

@andy_unleash Typekit also has a free plan.

@Zoom Why? Why wouldn’t you want to support someone who worked very hard designing a typeface for you to use?

[Andy Howells]

@chrisburton – Ah I didn’t know they had a free one (It covers just one site). I just do the $5/month one because we use it for customer sites.

[chrisburton]

The only downside for the free plan is it adds a badge. Personally, I like creating my own colophon but it might work for those who have no budget but also don’t want to sacrifice quality.

[Zoom]

>Typekit is faster insofar as you can use async, so it loads alongside your content and doesn’t get in the way.

Is that faster than having the fonts on your server and using @font-face? And wouldn’t the async method of loading cause “FOUT” (if content is displayed before fonts are done loading it makes sense that FOUT would occur)

[chrisburton]

Not if you add .wf-loading {visibility: hidden;} to your css. Although, I’m not sure if Typekit is actually faster. Both Typekit and Google use the same font loader.

[Zoom]

> Why? Why wouldn’t you want to support someone who worked very hard designing a typeface for you to use?

So the reason that you don’t use GWF is because is free? The higher quality of fonts is an advantage for typekit, but the freeness is an advantage for GWF.

> The only downside for the free plan is it adds a badge.

The free plan of typekit is very limited. It is not just the badge, they also have a limit of 25,000 Pageviews/month and as far as I understand you can’t download the fonts in order to use them in a Graphics application and I am guessing that the 1 website limit means that they wouldn’t work on my local server during development either.

If the quality of fonts is the only real criticism of GWF then I am personally fine with it. I am not a typography expert and many of the fonts at Google seem nice to me.

[chrisburton]

> So the reason that you don’t use GWF is because is free? The higher quality of fonts is an advantage for typekit, but the freeness is an advantage for GWF.

Only to those who don’t value someone else’s work. Quality is more important to me than price. That’s like advocating for developers to work for free. I don’t expect those who don’t know what it takes to design typefaces and optimize fonts to understand.

It’s not only about the quality of GWF. Matthew Butterick has done a few blog posts about their product. There has also been a blog post about them copying from other typefaces.

> they also have a limit of 25,000 Pageviews/month

Do you expect to go over that? If so, that’s understandable but seriously, it’s less than the price of a cup of coffee (per month!).

> as far as I understand you can’t download the fonts in order to use them in a Graphics application

Why would you want to use a webfont for graphics? That’s what desktop fonts are for. Webfonts are optimized for the web.

> I am guessing that the 1 website limit means that they wouldn’t work on my local server during development either

You can add localhost or whatever in the settings.

[Zoom]

>Only to those who don’t value someone else’s work. Quality is more important to me than price. That’s like advocating for developers to work for free. I don’t expect those who don’t know what it takes to design typefaces and optimize fonts to understand.

So you are against everything Open Source / free for the same reasons? Some people value recognition more than money and others gain indirectly by offering something for free. There is nothing wrong with this.

I often need more than 25.000 page views per month per site. Also when creating websites mockups I want to use the same fonts as those that will be used on the live site. This is why being able to download the fonts is an advantage.

Just to be clear I don’t claim that GWF is better than Typekit. All I am saying is that GWF seems to be sufficient in most cases and being free is an advantage, not a disadvantage.

[chrisburton]

@Zoom

GWF is not really open source. Read some articles by Type Designer, Matthew Butterick, who has pointed this out. I doubt people in general care who made the webfonts they’re using. By the way, the Type Designers do get paid for putting their work on GWF, although, the pay isn’t that good. Anyway, in general I am not against open source projects. In fact, Adobe came out with an open source font that I thought was pretty cool. However, I haven’t read too much into it.

> I want to use the same fonts as those that will be used on the live site.

Yeah, I get that. But people spend an enormous amount of time (sometimes years) creating webfonts for us to use. You still think they should be free? I just don’t understand that way of thinking…where everything should be free. I’m sure if you created a product and spent countless hours, weeks, months, or even years on it, you’d say otherwise. If you’d like to use the webfonts on Typekit locally (with Mamp. Wamp, Xamp), you can by editing the URL in the kit settings. If I remember correctly, FontShop or FontDeck (one of the two), offers a plugin for Photoshop to use their fonts.

> Just to be clear I don’t claim that GWF is better than Typekit. All I am saying is that GWF seems to be sufficient in most cases and being free is an advantage, not a disadvantage.

Why is free an advantage over quality?

[Author]

Posts