SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    I Use MODx kenquad's Avatar
    Join Date
    Dec 2009
    Posts
    424
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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

  2. #2
    SitePoint Zealot vassilevsky's Avatar
    Join Date
    Dec 2009
    Location
    Ulyanovsk, Russia
    Posts
    126
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You totally could. Google just made it.
    Usus magister est optimus.

  3. #3
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,862
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by kenquad View Post
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  4. #4
    I Use MODx kenquad's Avatar
    Join Date
    Dec 2009
    Posts
    424
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the replies.

    Quote Originally Posted by felgall View Post
    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...

  5. #5
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,862
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  6. #6
    I Use MODx kenquad's Avatar
    Join Date
    Dec 2009
    Posts
    424
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    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.

  7. #7
    SitePoint Addict laburke's Avatar
    Join Date
    Jan 2005
    Location
    Michigan
    Posts
    219
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  8. #8
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    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).

  9. #9
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code CSS:
     
    @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.
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  10. #10
    I Use MODx kenquad's Avatar
    Join Date
    Dec 2009
    Posts
    424
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AlexDawson View Post
    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.

  11. #11
    I Use MODx kenquad's Avatar
    Join Date
    Dec 2009
    Posts
    424
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by logic_earth View Post
    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:
    Code CSS:
     
    @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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •