Google fonts - why can't just anybody do that?

[kenquad]

Hi all:

Uninformed question follows :):

I have always been somewhat baffled as well as irritated by the widely-accepted fact that there’s no reliable way to embed fonts into a website. My understanding has always been that cross-browser issues and copyright issues prevented embedding from being a viable option. However, I’m just wondering how Google and other font-linking services accomplish this and why I couldn’t do the same thing on a local website using high-quality open source fonts, of which there are thousands available.

Someone please enlighten me.

Thanks

[kenquad]

@logic_earth

Can use FontSquirrel.com’s Generator to take any font and use it on the web. However, you have to respect the license of the font else you will be in hot water. The CSS is then pretty standard:

@font-face {
    font-family: "Danube";

    src: url( "danube/regular.eot" );
    src: local( "☺" ), /* Solves the IE problem. */
       url( "danube/regular.woff" ) format( "woff" ),
       url( "danube/regular.ttf" ) format( "truetype" ),
       url( "danube/regular.svg#webfont" ) format( "svg" );

    font-weight: normal;
    font-style: normal;
}

This will work in IE 4 at minimum.

How could I have overlooked this post? How could I have been so blind?

As you can tell from the above lament, I now wish I had started with this @font-face method and left typeface.js and cufon, its cousin, alone.

For the benefit of others, here is what I experienced with typeface:

1. Questionable rendering speed on IE.
2. Sketchy text selectability.
3. No :hover color function.

In addition to some of these problems, Cufon suffers from:

4. Awkward (in my opinion) invocation syntax, requiring javascript edits and special classes to use its fonts, instead of simple CSS declarations triggering the js functions.

@font-face, on the other hand, with Font Squirrel’s generator, rocks. The only thing I would change is to borrow a handy feature from typeface and cufon’s font converters: The ability to eliminate unnecessary characters, such as the Cyrillic Alphabet, from the font for smaller file sizes. As it is, Font Squirrel’s files are still pretty hefty.

Thanks for pointing me in the right direction, logic_earth, even though it took me a few days to see it.

[logic_earth]

Can use FontSquirrel.com’s Generator to take any font and use it on the web. However, you have to respect the license of the font else you will be in hot water. The CSS is then pretty standard:

@font-face {
    font-family: "Danube";

    src: url( "danube/regular.eot" );
    src: local( "☺" ), /* Solves the IE problem. */
       url( "danube/regular.woff" ) format( "woff" ),
       url( "danube/regular.ttf" ) format( "truetype" ),
       url( "danube/regular.svg#webfont" ) format( "svg" );

    font-weight: normal;
    font-style: normal;
}

This will work in IE 4 at minimum.

[kenquad]

@AlexDawson

the range of open source high quality fonts are VERY low in numbers

Unfortunately, it seems you are right; working on a mis-impression, I spoke too soon regarding the numbers of open source fonts. When one digs into it, there seem to be some good ones - but it’s more like dozens than thousands…

Still, that possibility, together with Google’s product, multiplies the number of available fonts by a factor of 5-10 at least from the old arial-times-verdana-impact.

Which is a very positive development.

[AlexDawson]

I think some of the reasons why few people have attempted it is because currently, the range of open source high quality fonts are VERY low in numbers (same for the web friendly fonts without needing “protection”). Therefore while the demand may be high, the range is pretty restrictive. I’m glad Google are doing this, it removes the costly solutions for those who don’t want to shell out and Google have the funding and infrastructure to start mass buying up and negotiating deals to increase the range of typefaces. I for one will actually consider using Google’s service (I had no wish to pay for Typekit).

[vassilevsky]

You totally could. Google just made it.

[felgall]

@kenquad

However, I’m just wondering how Google and other font-linking services accomplish this and why I couldn’t do the same thing on a local website using high-quality open source fonts, of which there are thousands available.

Someone please enlighten me.

Thanks

So take a look at how Google have done it to find out how.

[kenquad]

@felgall

Don’t forget to test it with JavaScript turned off as well so that you make sure it still works for all those visitors without JavaScript as well.

Good thought - it’s supposed to have graceful degradation, but I will need to test before using.

[laburke]

Thanks for posting this, kenquad. I was just looking for info on this. Being a graphic designer, I have always been really frustrated at the limited options we have on the web. If I never see Times, Arial, Verdana, or Impact again it will be too soon.

[felgall]

Don’t forget to test it with JavaScript turned off as well so that you make sure it still works for all those visitors without JavaScript as well.

[kenquad]

Thanks for the replies.

@felgall

So take a look at how Google have done it to find out how.

I did take a look over there and it appeared they are using some kind of scripting which was not immediately self-evident. I thought somebody here might have already figured it out

Anyway, in the meantime I researched it a bit on my own and found a javascript program called typeface.js which, combined with a few of my favorite open source fonts, should accomplish what I want to do.

I’ll probably be using Google Fonts as well.

Goodbye Arial!
Farewell Times New Roman!
I’m off to get some new fonts…