Friday, February 18, 2011 at 11:00 AM
Webmaster level: AllIn the past, when you created a website or web app, you were largely limited to a few select “web safe” fonts such as Times and Arial. If you deviated from these fonts, you were required to use Adobe Flash or to embed text in images, which introduced a whole new set of trade offs. For example, images aren’t semantic, cannot be translated into other languages automatically, and can be much larger in file size than text. In addition, text in images cannot be copied to a user’s clipboard, read with screen-reading software, or easily indexed by search engines.
The good news is, with Google Web Fonts it is now possible to use hundreds of web safe fonts on your web pages. Launched last May, Google Web Fonts allows you to simply choose the font(s) you’d like to use on your webpage, blog, or web app, and embed the snippet of HTML and CSS. In about 30 seconds, you can have beautiful fonts on your pages that will render correctly in the large majority of popular modern web browsers. No longer will you need to use images or Flash to embed the font of your choice.
Unlike Times and Arial, which are references to fonts installed on a user’s local machine, web fonts are served via a browser request (much like an image would be served). That means you can push any web font to a user’s machine. Users will be delighted when they realize these fonts behave just as any other text in Arial would behave.
Some example web fonts, offered by the Google Web Fonts service
The adoption of the web font technology has been rapid. Google Web Fonts now serves roughly 50 million daily requests[1], across roughly 800,000 unique websites[2], and is growing at about 30% each month. Here at Google, we’re excited about the potential for web fonts to change the very fabric of the web. Beautiful typography makes the web more pleasant to browse, expressive, and interesting.
Here’s to a beautiful Web!
[1] A request is a single call to the Google Font API for one or more fonts.
[2] We count a unique website as unique domains, except that “www” subdomains are not counted. For example, www.myblog.com and myblog.com would count as one domain. However, sam.myblog.com and sally.myblog.com would count as two domains.
40 comments:
Brilliant! How did I miss that Google fonts have been around since last May? Thanks for the post. I'm off to explore a font update to our web site!
I have been using google fonts for some time now. Easy to use and a nice selection for something different.
There is just one big problem: Google Web Fonts are VERY slow and against all Page Speed practices.
I used Google Web Fonts with a huge impact for my users. Also, now that Google uses speed to rank websites, it's a bad idea to use Web Fonts.
It's so slow that there isn't any major Google product using Web Fonts.
Any chance for larger character sets?
Sérgio,
It doesn't affect page render speed as far as googlebot is concerned.
Try to include Bengali fonts. We need regional fonts very much.
Hi, me and my friend have a idea for you. Why don't have "Google, the humans best friend" as a slogan at the startpage.
Best regards,
Daniel and Max
From Sweden Västerås
I agree with Sérgio, it has been very slow in my experience - validated by the Site Performance section of Webmaster Tools.
Is there any validity to tlhunter's comment that it does not affect googlebot's rendering time?
Of course googlebot isn't affected, it's CSS and Web Fonts. But my users are affected very hard, and that is the main problem.
Also, Google's site speed measure has nothing to do with googlebot. As you can see in your Webmasters Tools profile under Site Performance, site speed is measured by users using Google Toolbar with the PageRank feature activated.
My advice is: if you are concerned about speed, do not use Web Fonts.
Just discovered Google fonts and love them! Like the "sunshiney" font - great for my site.
What about dealing with the issue with WebKit and keeping text invisible until loaded?
I'm running Chrome, but I don't like the way I can't see the text for 3-4 seconds.
Excellent selection and nice to see the library growing. Have been using it to season a site or two in the last year. Now that I see the selection expanding I will begin to use it more actively.
Thanks again, Google!™
I am already using this feature in my few blogs.. I got it while changing my blog template. Its awesome and a good feature from Google. thank you.
Smashingmagazine is one of the sites using these fonts. The page speed report at http://www.webpagetest.org/result/110219_S7_Y64/1/details/ shows the font taking 707 ms to load. Although other downloads are taking place at that time, the thread could be used by something else, reducing the overall time for the page.
I get the benefit of a pretty page, but are we encouraging slow-loading pages?
I think performance concerns are unjustified with the technology itself. I had a play with font embedding when it first became available in Firefox (at which point one could assume a large proportion of users could get it and without the evil Microsoft implementation issues).
Of course I have the fonts hosted on a folder of my website, so no "google DNS look-up", no additional CSS fetch (it is in the sites CSS), and I control the cache time on the font files (which can be forever if you serve them with a checksum in the URL), and no complex security headache to ensure Google meant you should be able to snaffle their bandwidth for your sites look and feel.
Sure first time a piece of text on the site is rendered in a font there will be a delay, and mobile device users might prefer not to have these in their style sheet. But as long as you don't go mad and put every piece of text in a different font - it does open up the possibilities.
Well done on the fonts. Does this affect the SEO potential of the website?
But only 17 fonts are allowed in documents created using google docs...
begono thoo...
toko modem online musbiz
visit modem usb estore
http://modemusb.biz/
If I have been using Comic Sans MS for my H1 font does this mean that I have been dragging an anchor tied to my own ankle because Google Bot hasn't been able to read my h1 font for ever?? Infact I can't even find Comic Sans MS in the list...
I just now changed my h1 to Arial just for now. I do like the hand written font of Comic Sans MS and may end up going with Permanent marker but someone please reply: Am I possibly in for a boost now that Google Bot will be able to read my H1 (as well as other human visitors)
Was having Comic Sans MS detrimental??
My only problem with changing to one of the fonts listed above is the piece of code I will have to add to all my pages. (I dont have an "Include" before my title tags right now / yet :(
Thanks
Thank you Google for helping save the web from lousy layout, image-based text and other evils. More fonts, please!
My pages load in less than one second. I'm not sure what the speed concerns others are expressing are about. Perhaps they are loading too many fonts.
If they work so well, why didn't you just use them, instead of using an image for the examples?
I was very enthusiastic about Google fonts when I first tried them on one of my sites that I had been building for my friend. Everything looked great in Google Chrome, but in Firefox it just did not work. Finally I understood that Google fonts were blocked by NoScript plugin. Then one of my friends reported that Kaspersky antivirus plugin also blocked google fonts. I think other antivirus plugins could block fonts as well.
And of course those fonts did not work in IE6, that was installed on my customer's laptop. I was so confused when we sat together, loaded the site and I saw... Arial instead of Google fonts. Well that was not a real customer, just my friend. But I can imagine what would a real customer say if he saw that ugly distorted layout just because his brower is not new enough.
That was a good lesson for me and I am sure I will not use Google fonts in my commercial projects.
Thanks for the fonts. I can't comment yet as I have done testing but I'm curious about page speed and SEO. Thanks.
Hundreds? Where? I only see 83 on the latin page, without counting a few variants
I find it awesome and indeed a big step forward. However, the speed issue plus the limited collection of fonts is still demotivating. Also, to put image-text and flash-embedded-text in the same bag is not really fair. For the time being, to use Flash (external-) text combined with XML+PHP still works for me. This way, I'm able to use any font I want, to let the user to select it (or not) and to make it visible to search-engines.
This is actually a really good idea, because often I want to include advanced fonts on my website but decide not to because I don't expect my visitors to have those fonts installed. Now I don't have to worry, especially if Google Web Fonts does not add much pageload time.
This new web font is a great idea. I have a military website and try to use fonts for each era, ie; Revolutionary War, Civil War, etc. Most of the fonts I want to use are expensive, so use what I can find for free. I want to give your web fonts a try on a future update...Looks promising!
@David Wurtz - while this is nice, I think it would be better if you pointed out that site's search rankings could be negatively effected due to the performance hit. Matt Cutts has confirmed that speed is a factor.
90% of the fonts does not work with east european characters, for example Ő and Ű :(
Other hand it would be a great thing, if I could use it on the webpages what I create...on hungarian.
Almost a year later and I'm //still// getting jagged/artifacted edges on the Web Fonts from my Windows 7 64-bit machine.
How can I use these fonts for my clients and websites if they don't render properly?
Thank you, but I think that font-face with fontsquirrel are doing a better job in this way :) start introducing a real antialias in chrome... it will be good
I use it, but it lacks utf8 multilanguage support. Most of the fonts don't havecharacters like šđžćč
Rendering quality appalling. How does this contribute to a more beautiful web? SIFR or Cufon are way better at quality and performance if you ask me.
Firefox 3.6.10 with ubuntu 10.10 crashes when viewing this post and also when trying out the fonts on other sites.
Also as most say its too slow. Google fix it up!
Adding a font file that's larger than all the other resources on my site is a no no, especially if it's not very cachable.
Where do I get help with Google fonts? I've installed the code as the Getting started pages suggested, uploaded them and they are NOT loading??? I couldn't find support for this kind of thing anywhere.
No. This will just encourage junkier pages.
Web design... even professional... is appaling most of the time. Even when done correctly the mantra still seems to be "CRAM, CRAM, CRAM".
Now we'll have crammed pages with ~10 different fonts and half of them "defaulting" to arial (at least not Courier, haha!)
Its hard enough to find the ONE link I am looking for most of the time.
No thanks...
And yeah.... actually using them in your example might help convince us to go for your point of view.
Thanks for the share.
Couple of nice resources for people interested in web typography is available here. http://www.blissfulinterfaces.com/free-web-safe-fonts-that-are-beautiful/
Be aware that Googlebots do not see text which is present on a page using a Google Web Fonts. I just proved this by running "Fetch as Googlebot" on a live page - it sees only the text in normal fonts. I now have to remove the Google fonts...
So much for "Web safe!"
Post a Comment