Typekit v's Caxton (web fonts)

Hi

I have used Typekit to enable me to use web fonts on my website. It is very easy to set up, but (and it is a big but) Firefox will display the site with the fallback fonts in the font stack, and then switch to the linked fonts after they’ve finished loading. This results in a flash of unstyled text, or FOUT. This flash of different fonts looks terrible. For an example see http://www.kevan.tv/ in Firefox (note this isn’t my website).

Will the same happen if I use the Caxton Action?

Am I correct in saying with the Caxton Action the web fonts reside on my server and are downloaded from there by the user. Does this slow down the load time?

Thank you


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

It looks like the problem is specifically related to @font-face (which, I think, is what both Caxton and Typekit use) so will be the same regardless of the method you use. How can you improve things? Take a look here (code alert):
http://paulirish.com/2009/fighting-the-font-face-fout/

Joe

On 9 Feb 2011, at 10:29, Mark wrote:

Hi

I have used Typekit to enable me to use web fonts on my website. It is very easy to set up, but (and it is a big but) Firefox will display the site with the fallback fonts in the font stack, and then switch to the linked fonts after they’ve finished loading. This results in a flash of unstyled text, or FOUT. This flash of different fonts looks terrible. For an example see http://www.kevan.tv/ in Firefox (note this isn’t my website).

Will the same happen if I use the Caxton Action?

Am I correct in saying with the Caxton Action the web fonts reside on my server and are downloaded from there by the user. Does this slow down the load time?

Thank you


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Joe

That is a real shame. In Firefox the ‘flash’ between fonts looks horrible. Typekit give some code to make the text invisible while the font loads (as per other browsers). This is better than the ‘flash’ but I’m not sure how to add this code to FW?

http://typekit.assistly.com/customer/portal/articles/6852-controlling-the-flash-of-unstyled-text-or-fout-using-font-events

Cheers

Mark


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Mark,

You need to add the style element into the head of your pages. Go to Page>HTML Markup and in the dialog that appears, select “Before ” from the dropdown menu and paste the code in the big text area.

The code you would use completely depends on the styles and elements you’re using in your site. This is the code from their example:

.wf-loading h1 { font-family: 'Droid Sans'; visibility: hidden; } .wf-active h1 { visibility: visible; }

Like I said, the code you use depends on your site, for instance, this code specifically targets h1 elements. The easiest thing to do may be to replace h1 with the name of the style containing the custom font. So the line “.wf-loading h1 {” would become “.wf-loading .stylename {”, for example.

Hope this helps,

Joe

On 9 Feb 2011, at 11:28, Mark wrote:

Hi Joe

That is a real shame. In Firefox the ‘flash’ between fonts looks horrible. Typekit give some code to make the text invisible while the font loads (as per other browsers). This is better than the ‘flash’ but I’m not sure how to add this code to FW?

http://typekit.assistly.com/customer/portal/articles/6852-controlling-the-flash-of-unstyled-text-or-fout-using-font-events

Cheers

Mark


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

The font files will transfer as fast as the servers and infrastructure will allow. It is possible that storing your fonts on your server will give faster response times than those hosted elsewhere. YMMV (as always). Even hosting the fonts on your own server will not guarantee a fast transfer - other files may get in the way, be first in the queue, etc…

I’m not 100% convinced about masking or hiding text prior to the font load. This is because people will want to start reading immediately, and if they see a whole page of nothing, it looks bad - worse than a slight page re-draw.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I asked this in another Caxton thread moments ago, but I’d like to add the same question in this thread too. What is the browser support for either method?

Having never used @FontFace before, the deciding factor for me is to know how things will look in IE6/7/8/9/10 on Windows XP/Vista/7/8, and newer versions of Firefox/Safari/Chrome on Mac and Windows.

For if browser support is spotty, and if it’s hard to implement, it seems better to me to stick with GIF text, despite the hit you’ll take on page SEO.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On 25 Sep 2012, at 06:48, JDW wrote:

For if browser support is spotty, and if it’s hard to implement, it seems better to me to stick with GIF text, despite the hit you’ll take on page SEO.

Actually, I’d argue that it would be far, far better to work with the limited web-safe font sets already in Freeway.

Arial, Verdana, Times, Courier, Trebuchet. Dull, dull, dull.

http://www.coudal.com

OK, it’s not a Freeway-designed site, but Coudal have used Verdana and Times for years. They also call up Gill Sans for those of us who use Macs or have it installed on our PCs, but it falls back gracefully to Verdana.

Does it look dull, just because the site doesn’t use a custom font?

Cheers

Heather


Imagic Design * Good Design - No Compromise
email@hidden
http://www.imagic-design.co.uk
Twitter @Imagic-Design
T: 01634 864017


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

But I primarily use Japanese on my sites, Heather. The choices for websafe Japanese fonts are far more limited than that of English. Hence, much of my site text now is GIF. I do that because I want to layout my sites with a particular design that doesn’t allow much font variance among browsers. Have a look:

Try to make all THAT text HTML within the same space constraints and keep it consistent among all the popular browsers on Windows and Mac!

But if I were able to specify fonts and font spacing/kerning/width, then I could get HTML text within that exact design. That’s what I want.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On 25 Sep 2012, at 08:07, JDW wrote:

But I primarily use Japanese on my sites, Heather. The choices for websafe Japanese fonts are far more limited than that of English.

Of course. Sorry!

In that case, provided you can find suitable fonts in the character sets you require, and which have been licensed for web use, then Caxton, Google Fonts, or CSS3 @font-face ought to work for you.

Layout, though will still be an issue. It is possible to control letter and word spacing with HTML within Freeway. CSS3 also has descriptors that let you “stretch” a font. These aren’t currently supported within Freeway itself, but you can create an external stylesheet.

http://www.w3schools.com/css3/css3_fonts.asp

However, you then come across that knotty problem of Internet Explorer. Essentially, anything older than IE9 simply doesn’t work nicely with all the CSS goodness we have access to.

Awkward.

Heather


Imagic Design * Good Design - No Compromise
email@hidden
http://www.imagic-design.co.uk
Twitter @Imagic-Design
T: 01634 864017


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Then it’s a show stopper for me. IE8 is the last browser that runs on WinXP, and a huge number of Japanese Windows users still use XP, with no immediate plans to upgrade. More than 90% of our web visitors use IE on Windows.

If it’s not IE8 compatible, it’s out of the question.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hmmm… - well, my personal method is using Tim’s WebFont-Action and usually Google WebFonts. Within Freeway I set my Font-Sets fallback to either sans-serif or serif without any specific font-specification such as Arial, Helvetica or Georgia, Times (depends…). This method worked for me pretty fine (honestly I do not test all PC stuff available).

Basically I tend to agree Heather, not only for web-safe purposes but as well due the fact, that the FONT resource(s) are often “extreme heavy-weight”. There are FONTs about 200kb and more out there which is open spoken heavier than some PNGs you use in your artwork.

I had a look at typekit, too (only as TRIAL). Honestly I haven’t had a client yet (hooorray), wanting to pay an extra-fee per year just for using a specific FONT.

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Japanese fonts are much bigger than English fonts. For example the Georgia TT font is 380k. The Japanese Kozuka OTF font for Bold only weighs in at 5.6MB. The lighter weight Osaka font is 3.6MB.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On 25 Sep 2012, at 08:24, Thomas Kimmich wrote:

that the FONT resource(s) are often “extreme heavy-weight”. There are FONTs about 200kb and more out there which is open spoken heavier than some PNGs you use in your artwork.

This is true. Caxton embeds the font in the site itself, so it’s uploaded with all the other code. I’m using Paul’s Action for the Imagic Design site currently.

I will have to look at Tim’s Action. I tried to use Google Fonts myself, but only got it partially working.

Cheers

Heather


Imagic Design * Good Design - No Compromise
email@hidden
http://www.imagic-design.co.uk
Twitter @Imagic-Design
T: 01634 864017


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

All these methods require the font to be stored somewhere - it’s another resource like a graphic, movie, sound file, etc… They have to be downloaded somewhere. Whether you store the font on your site locally, or reference Google or one of the other websites which serve web fonts, you’ll get that awkward delay as the files are downloaded. Some browsers clearly handle this better than others.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

This is true. Caxton embeds the font in the site itself, so it’s uploaded with all the other code.

WebFonts Action, too - however I throw the action after the initial upload out and stripe it manually in to avoid “publishing ever and ever again”.

I will have to look at Tim’s Action. I tried to use Google Fonts myself, but only got it partially working.

I’m currently recording/screencasting a whole design process how I’m used to work with Freeway. 90 minutes are already recorded and uploaded and WebFonts Action and Externalizing will be part of it for sure - but I stuck currently due to the fact of my limited timescale (and partial idleness).

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Typekit and Google Fonts are very very easy to use. I prefer to use these methods of serving up web fonts to FW Actions. But that is just my preference.

Mark


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options