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)
@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.
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.
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.
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)
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.
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.
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.
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.
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.
You still think they should be free? I just don't understand that way of thinking...
I didn't say they should be free. I am just pointing out the fact that some fonts are free. (and I am using the term "free" loosely here. Google pays for the fonts, and Google gains a lot of money from us)
Why is free an advantage over quality?
They are both advantages. Each service has its pros and cons. If one service had everything better then we would all use that service and the others would have no point to exist.
Hmm I don't understand why you would rely on a 3rd party at all for fonts. Seems overkill. There's plenty of optimized types out there, that can be loaded via your own management system from your own server. Maybe I'm missing something but I come from graphic design roots - fonts don't change enough nor are diverse enough to justify a service. There's basically 8 font faces in total... All fonts fall into these 8
Yeah for this example, but all fonts too. Web safe fonts are simply dynamic antialiased and flexi-proportion as opposed to software based rendering trickery.
Humans have spent the last 90 years perfecting linotype Inc as an example.... To make it Web safe took like a month more. There's just nothing more we humans/google can do to streamline tried and true type faces. Changing a pixel of data for 36pt header fonts does not warrant reliance on 3rd parties.
And I agree, pay for good fonts. There's a reason adobe owns the proportions and spacing.... It flows on all displays. Open source cannot [legally] capture this artistic design essence. Imagine that 1px of change in a 12pt font instead of 36 header and you get the idea.... The readable is untouchable. Its all about the 12pt. Good fonts are locked down, give in, obey, pay :)
I guess moral of the story would be stick with tried and true Web fonts (further pimped with css text shadow), lean and mean non-reliance on any display services, and buy the industry standard design faces for your icing on the cake.
Google Web Fonts are downloadable, so you can have them on your own server without relying on any 3rd parties.
I am not sure what are the "industry standard design faces" that you talk about. Can you clarify, and let me know how much exactly they would cost to buy them with a license that would allow you to use them on any website without any kind of restriction?
@Zoom caslon, garamond, and gothic are examples of very established display faces. (as opposed to block faces like arial or times).
Gothic you may recognize - its such a clean font. Been around since the 40's. Things like the proportion of lowercase a or how the tails of the e and s end in a way that implies great horizontal eyeflow. Line heights are important too - notice how tall the lower cases are, lends itself to "solid" sans face.
yes it s pricey but if your clients are A list or require work on par with the rest of their industry, its worth it.... Even if just for logotype and marketing/slider/sales regions (accents a more "open" block face underneath).
And a random thought to keep in mind - kerning is important. Almost all fonts will look rather unfinished at display size... until letter spacing is adjusted just right. That's the big "secret" of typesetting hah. Css can sorta kern but not really. Use images so you can granular adjust big gun typesets or logos. Save the css for last resort sub-focal kern/shadow, like if h1 is getting dominated by content, can't be bigger, and needs a bit more eye pull. Theres a massive difference in readability/pull between naked h1 and optimized h1. Use with care :)
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
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.
Why?
The quality of google web fonts is pretty poor. Plus I loathe @importing from a public source.
What is the best place for good free fonts?
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?
@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.
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.
@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?
@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.
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.
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)
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.
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 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.
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.
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!).
Why would you want to use a webfont for graphics? That's what desktop fonts are for. Webfonts are optimized for the web.
You can add localhost or whatever in the settings.
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.
@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.
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.
Why is free an advantage over quality?
I didn't say they should be free. I am just pointing out the fact that some fonts are free. (and I am using the term "free" loosely here. Google pays for the fonts, and Google gains a lot of money from us)
They are both advantages. Each service has its pros and cons. If one service had everything better then we would all use that service and the others would have no point to exist.
“Nowadays people know the price of everything and the value of nothing.” - Oscar Wilde
Hmm I don't understand why you would rely on a 3rd party at all for fonts. Seems overkill. There's plenty of optimized types out there, that can be loaded via your own management system from your own server. Maybe I'm missing something but I come from graphic design roots - fonts don't change enough nor are diverse enough to justify a service. There's basically 8 font faces in total... All fonts fall into these 8
@Dhaupin You're specifically speaking of web-safe fonts (Arial, Georgia, etc), yes?
Yeah for this example, but all fonts too. Web safe fonts are simply dynamic antialiased and flexi-proportion as opposed to software based rendering trickery.
Humans have spent the last 90 years perfecting linotype Inc as an example.... To make it Web safe took like a month more. There's just nothing more we humans/google can do to streamline tried and true type faces. Changing a pixel of data for 36pt header fonts does not warrant reliance on 3rd parties.
And I agree, pay for good fonts. There's a reason adobe owns the proportions and spacing.... It flows on all displays. Open source cannot [legally] capture this artistic design essence. Imagine that 1px of change in a 12pt font instead of 36 header and you get the idea.... The readable is untouchable. Its all about the 12pt. Good fonts are locked down, give in, obey, pay :)
I guess moral of the story would be stick with tried and true Web fonts (further pimped with css text shadow), lean and mean non-reliance on any display services, and buy the industry standard design faces for your icing on the cake.
Google Web Fonts are downloadable, so you can have them on your own server without relying on any 3rd parties.
I am not sure what are the "industry standard design faces" that you talk about. Can you clarify, and let me know how much exactly they would cost to buy them with a license that would allow you to use them on any website without any kind of restriction?
@Zoom caslon, garamond, and gothic are examples of very established display faces. (as opposed to block faces like arial or times).
Gothic you may recognize - its such a clean font. Been around since the 40's. Things like the proportion of lowercase a or how the tails of the e and s end in a way that implies great horizontal eyeflow. Line heights are important too - notice how tall the lower cases are, lends itself to "solid" sans face.
http://www.fonts.com/font/linotype/trade-gothic
yes it s pricey but if your clients are A list or require work on par with the rest of their industry, its worth it.... Even if just for logotype and marketing/slider/sales regions (accents a more "open" block face underneath).
just a heads up, typekit's portfolio plan is now included free if you have a creative cloud account with adobe.
pretty sweet deal.
And a random thought to keep in mind - kerning is important. Almost all fonts will look rather unfinished at display size... until letter spacing is adjusted just right. That's the big "secret" of typesetting hah. Css can sorta kern but not really. Use images so you can granular adjust big gun typesets or logos. Save the css for last resort sub-focal kern/shadow, like if h1 is getting dominated by content, can't be bigger, and needs a bit more eye pull. Theres a massive difference in readability/pull between naked h1 and optimized h1. Use with care :)
People like diversity instead of being restricted with limitations.
Give a Look at [http://www.fonts.com/] (http://www.fonts.com/) on [ShopTalk Show] (http://shoptalkshow.com/episodes/040-with-laura-kalbag/) Laura Kalbag explains that Fonts.com delivery fonts using CSS while TypeKit uses Javascript.
Is Worth give a Look, and the fonts are inexpensive.