[Pro] Caxton and FontSquirrel Fonts

Hi,
with Caxton and the @fontface tag becoming more and more popular, I think it’s worth taking stock on what’s available, and what works. I’ve been recommending FontSquirrel because it offers some rather nice kits which you can download and just use. It’s pretty bullet-prooof as far as setting up is concerned. However, the fly in the ointment is the varying quality of fonts that are on offer. A lot work, but some can fail or cause problems - either in Freeway or in the browser. What I’d like to do is have FreewayTalkers help in compiling a list of font kits from FontSquirrel that work, and those that don’t (or present gotchas).

So, if you have use FontSquirrel fonts with Caxton, it would be helpful if you can add your experiences to this thread (Please don’t send them to me direct).

I’d like to know the following information:
1 - The font kits used
2 - Whether you installed the font from the FontKit in your Mac’s Font folder, or whether you used the ODF/TTF/etc download on FontSquirrel separately
3 - Whether the font worked for you - if it didn’t work, what happened?
4 - The version of Freeway used, your Mac OS version, and what language you were using (eg, you may be using Mac OSX 10.6.7 in French)
5 - Any other information.

It’s worth noting that cheap/free fonts can be of lesser quality than ones you pay for. There can be less attention to detail, there may be substantially fewer glyphs available in the fonts, or there may be other underlying problems in the construction of the glyphs that cause redraw problems. Some of the FontKots may have a reduced glyph count compared to the source fonts. Some cheap/free fonts are well made, others less so, and like a lot of things, you tend to get what you pay for.

What would be helpful to you, as well me (and no doubt Softpress) is a list of “safe” fonts which most people should be able to use without any kind of oddness happening. If folk want to wander off the beaten path and be more adventurous, they’ll know the pitfalls beforehand.

It is also worth pointing out (again) that not all fonts are licensed for distribution in an embedded form in websites. Always check that they are before deploying them. Most FontSquirrel fonts come with a license which explains if they can be used in this way. If in doubt, it’s best to leave it out.

Thanks for your help in this.


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

I absolutely love CAXTON! Thanks for this so much.

1/ so far I had good results with: (from fontsquirrel)

-angelina

-garogier (but not in safari. fine in Firefox,chrome and opera)

-good foot

-hattori

-Bodedo

-Josephin

-Liberation

-rock salt

-tenderness

-theano

-FFF tusj works, but looks really far from the outlook on the test drive, unfortunately.

2/always downloaded the font kit , placed it in resources and installed through FontExplorer pro.

3/Some fonts, such as eb-garamond bring some conflict with the existing garamond on my mac. No way to use it.
Garogier doesn’t show up in safari 5. Working on this.

4/FW 5.5.6, mac snowL, english.

5/tried the font-face generator with less success, probably due to the conflicts with already installed fonts.

5b/ Careful with multiple styles. The fonts often don’t get right if too many styles are applied simultaneously.

under http://www.ysuzac.com are a few examples of caxton I used recently. Almost all text on the first page is html using caxton, even in the menus.

Best regards, Vincent


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

Hi Paul,
Assuming you can make the results public in some way it may be worth looking at setting up a Google Docs form (http://www.google.com/google-d-s/forms/) to gather this data. You can then slice and dice the results as you see fit as well as collect it in a much more manageable way IMHO.
Thanks,
Tim.

FreewayActions.com - Freeware and commercial actions for Freeway Express & Pro.

Protect your mailto links from being harvested by spambots with Anti Spam.
Only available at FreewayActions.com

http://www.freewayactions.com


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

Good idea, Tim. People - please use this form instead of posting here.

Vincent - I did post some notes on how you can massage the CSS from FontSquirrel to be more friendly with bold/italic choices in Freeway.

http://www.actionsworld.com/Actions/Caxton/multiplefont.php


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

Thanks Paul, I definitively will apply this to the css of the fonts families.

Another really useful side effect of Caxton: both Google translate and bing Translate will translate the text and publish it with the original caxton font. Quite amazing really.

http://translate.google.com/translate?hl=en&sl=auto&tl=cy&u=http%3A%2F%2Fwww.actionsworld.com%2FActions%2FCaxton%2Ftypewriting.html

best regards,

Vincent


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

Since CAXTON has been out for quite some time now, and with a number of people using it during that time, I would like to know what browsers and browser versions (and OS platforms) support it, and whether all those browsers support it fully.

Also, is there full support for languages other than English (e.g., Japanese)?

Thank you.


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

Caxton enables you to use font face kits from FontSquirrel - details of browser compatibility with their files can be found here:

http://www.fontsquirrel.com/fontface

I’ve not tried Japanese fonts through their font kit generator so I can’t answer that one.
http://www.fontsquirrel.com/fontface/generator


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

James, I’m confused - there is a font called Caxton, are you referring to
something else?

On Tue, Sep 25, 2012 at 4:18 AM, Paul email@hidden wrote:

Caxton enables you to use font face kits from FontSquirrel - details of
browser compatibility with their files can be found here:


Ernie Simpson


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

He means this Action: Caxton

Walter

PS: James is in Tokyo, and probably napping now.

On Sep 25, 2012, at 11:33 AM, Ernie Simpson wrote:

James, I’m confused - there is a font called Caxton, are you referring to
something else?

On Tue, Sep 25, 2012 at 4:18 AM, Paul email@hidden wrote:

Caxton enables you to use font face kits from FontSquirrel - details of
browser compatibility with their files can be found here:


Ernie Simpson


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

(whispers) Thanks Walter, that was confusing me!


Ernie Simpson

On Tue, Sep 25, 2012 at 11:37 AM, Walter Lee Davis email@hiddenwrote:

He means this Action: Caxton

Walter

PS: James is in Tokyo, and probably napping now.


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

Actually, I am next door to Nagoya. Toyko is far more Western in comparison to we Nagoya hicks.

Now that my nap’s over though, I realize that Caxton isn’t going to make my life easier. Japanese fonts are just too big. Looks like I’ll need to retain my GIF header text indefinitely thanks to the continued existence of Windows users. Ah but how much better life would be without Windows!

Oh before I forget… if any of you want to expand your minds today about “CSS3” and “rounded corners,” here’s the still open-ended thread of threads for you:

http://freewaytalk.net/thread/view/47883#m_114037

:slight_smile:

And before I get chastised for emphasizing their importance “too much,” consider well how much rounded corners were a part of the Mac 128k design in 1984, and they are still a part of Apple’s core philosophy today, as evidenced by the Samsung suit:

James W.


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

What are Japanese web-designers doing about fonts and stuff? (that is rhetorical, btw - I don’t have a dog in the whole non-western font thing).

Sent from my iPad

On Sep 25, 2012, at 8:19 PM, “JDW” email@hidden wrote:

Actually, I am next door to Nagoya. Toyko is far more Western in comparison to we Nagoya hicks.

Now that my nap’s over though, I realize that Caxton isn’t going to make my life easier. Japanese fonts are just too big. Looks like I’ll need to retain my GIF header text indefinitely thanks to the continued existence of Windows users. Ah but how much better life would be without Windows!

Oh before I forget… if any of you want to expand your minds today about “CSS3” and “rounded corners,” here’s the still open-ended thread of threads for you:

http://freewaytalk.net/thread/view/47883#m_114037

:slight_smile:

And before I get chastised for emphasizing their importance “too much,” consider well how much rounded corners were a part of the Mac 128k design in 1984, and they are still a part of Apple’s core philosophy today, as evidenced by the Samsung suit:

http://tinyurl.com/ckyl2wd

James W.


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 Japanese use either GIF text or plain vanilla Japanese HTML text, just as you see here:
http://www.sony.jp/walkman/playyou/

That’s why you see so much GIF text on my site!

But I have found joy in making direct calls to the meiryo font on Windows 7. It makes HTML text appear much better on Windows because it is anti-aliased. Fonts on earlier browsers in XP look like a jagged mess. Of course, on the Mac, I can make calls to the standard OS X fonts like Hiragino, which looks spectacular. But the problem is that I cannot get Windows Japanese fonts to go bold enough for nice looking headers, so I have to stick with GIF text.


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

That is kind of interesting… I wonder how search engines index non-western pages. Makes me wonder what’s to lose by just making all your content graphic. All your issues solved.

Sent from my iPad

On Sep 25, 2012, at 8:45 PM, “JDW” email@hidden wrote:

The Japanese use either GIF text or plain vanilla Japanese HTML text, just as you see here:
http://www.sony.jp/walkman/playyou/

That’s why you see so much GIF text on my site!
SCIBORG® 540: DIGI-LINKスマートセキュリティ

But I have found joy in making direct calls to the meiryo font on Windows 7. It makes HTML text appear much better on Windows because it is anti-aliased. Fonts on earlier browsers in XP look like a jagged mess. Of course, on the Mac, I can make calls to the standard OS X fonts like Hiragino, which looks spectacular. But the problem is that I cannot get Windows Japanese fonts to go bold enough for nice looking headers, so I have to stick with GIF text.


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

“Most” is GIF text on many pages, but by no means “all.” I also put a lot of keywords in the META tag, as well as put appropriate ALT tags on pertinent graphics. That also works well when people search my site with Atomz, since it picks up the meta data.

But the facts is that some people like to select and copy text content. Making most everything a graphic prevents that. Also, with the Retina displays on portable devices like the iPad3 now, sites just don’t look as good unless you’ve got a lot of text, because text is rendered at the highest resolution of the screen you’re viewing (graphics are not).


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

Paul, what are the differences and advantages when comparing your “Caxton” Action to Tim Plumb’s “Web Fonts”?

Caxton:
http://www.actionsworld.com/Actions/Caxton/

Web Fonts Action:
http://www.freewayactions.com/product.php?id=034

On the Caxton page it talks about Font Squirrel “Webfont Kits” but it does not go into detail about how to ensure your Caxton page will display nicely in IE, iOS and desktop computers too. More specifically, when you download a Font Squirrel Kit, you get the same font in 4 different formats:

  1. EOT
  2. TTF
  3. WOF
  4. SVG

How are we supposed to use Caxton in conjuction with different formats of the same font, in order to ensure the font displays as expected, cross-platform? Tim’s Action seems to handle that in its Action’s Palette UI, but I don’t see how to accomplish the same with Caxton.

Now for one last question…

How does Font Squirrel compare with Google Fonts in terms of load speed? Or is the difference impossible to notice?

Thanks,

James Wages


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

There are 4 versions of the Font to cover all major browsers ie - the following table shows coverage

So if your Browser is one of those you should be fine.

As far as speed goes - logic says that self hosted fonts should be quicker than Google hosted - practically speaking I dont think that there is going to any significant difference especially since you are likely to have other assets that are larger on your site.

David


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

Thank you for the detailed explanation, David. I can see clearly how establish links to each of the 4 font formats in Tim Plumb’s “Web Fonts” Action, but Paul Dunning’s “Caxton” Action appears to support only 1 of the 4? Or am I missing something?

Have you used both Actions, David?

Thanks,

James Wages


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

Paul Dunning’s “Caxton” Action appears to support only 1 of the 4? Or am I missing something?

This is a Caxton example http://www.deltadesign.co/fw_examples/CSSstuff/caxton.html

And if you look in the source you will see the page references the FontSquirrel stylesheets for each font and each of the 4 versions.

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on June 6, 2012 07:37:03 PM America/New_York */



@font-face {
    font-family: 'AngelinaRegular';
    src: url('angelina-webfont.eot');
    src: url('angelina-webfont.eot?#iefix') format('embedded-opentype'),
         url('angelina-webfont.woff') format('woff'),
         url('angelina-webfont.ttf') format('truetype'),
         url('angelina-webfont.svg#AngelinaRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

D


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

David, thank you for the information. But the root question that I have repeated in my last few posts remains. To say it once again…

Since Tim Plumb’s “Web Fonts” Action seems to make it very convenient to link to all 4 fonts via the Actions palette in Freeway, would it then not be the better choice over Paul Dunning’s “Caxton” Action?

Obviously, I must put forth my question to those who have used and/or reviewed both Actions. I seek to know which Action I should use choose, and why.

Caxton: Caxton

Web Fonts Action: http://www.freewayactions.com/product.php?id=034

Thank you!

James W.


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