Embedding fonts the Google Way

For a while I toyed with the idea of using embedded fonts to liven up my web pages. I would read articles on how to do it and get discouraged. Some browsers needed one kind of font, some another—it was too much bother.

Then Google came out with a font embedding system that is dead easy. You can get started with them at the Google Font API page.

For completeness, I must add other sources for embeddable fonts. One is Font Squirrel. It uses a different technique involving the CSS @font-face declaration. With Font Squirrel, you download the font and put it on your server. TypeKit sells access to embeddable fonts, which are on their server network. TypeKit has many more fonts than the free sources do. The price structure on TypeKit is very reasonable.

The How To

Google’s tools are the easiest to use. Here’s how you would use Google fonts.

  1. Pick a font you like from the Webfonts page.
    font choices
  2. Click a font you like. You see it in various sizes. Click the Tab that says “Get the Code”
  3. There are two code snippets. The first you paste into the head of your HTML document. Make it the first thing in the head. (I’ll get to why in a minute.) I wanted to try the Cantarell, so I pasted this code into my web page.
    link in head to embedded font
  4. The second code snippet goes into your CSS file. I changed it up a bit to include three sizes of headings and default to sans-serif rather than the serif in their example code. Here’s how my CSS looked.
    CSS rule for embedded font
  5. Upload the HTML and the CSS to your server and take a look at your page. (You may need to refresh the page.) Here’s how Cantarell looks on my web site.
    browser display of embedded font

The Caveats

The Google fonts work with most browsers, but with limits. One limit is that you need a pretty up to the minute version of any browser to see the magic. That means don’t remove that old font rule in your stylesheet, just put the new one calling a font from Google after your original rule. If the browser doesn’t know the embedded font magic, it will still show your original font.

The other limit is download time. If you have a lot of users with dial up, mobile users or users with slow connections of some other kind, you may want to stay away from the idea for a while longer. It’s whiz-bang fast with cable or DSL, but that may not be who your web page targets.

It works in Google Chrome versions 4.249.4+. Chrome renders the rest of the page, but until the web font has loaded, it displays a blank space in place of the text that uses the font. This may cause a problem with slow connections. Apple Safari versions 3.1+ work. Like Chrome, Safari renders the rest of the page, but until the web font has loaded, it displays a blank space in place of the text that uses the font. The same thing applies in Internet Explorer versions 6+. The reason the LINK element you paste into the document head must go first is because of Internet Explorer. If it isn’t the first thing there, the whole page may not render.

The fonts work in Mozilla Firefox version: 3.5+. In Firefox, the first display is the text in the default font. Firefox then re-renders text in the web font once it has loaded. So, the user sees something, but it may change appearance unexpectedly when the connection speed is slow.

For Opera versions 10.5+, Google mentions no problems. Imagine that.

In one of those interesting coincidences, A List Apart published Web Fonts at the Crossing today, which gives the insatiably curious the whole story on web fonts.

Useful links: psuweb10, PHP

The hashtag to follow the Penn State web conference ongoing today and tomorrow is #psuweb10. The conference site is the place to watch for other reports from the conference.

The third in a series of PHP posts by Lorna Jane Mitchell is up at Think Vitamin. Each has a slightly different focus on PHP, with examples and code.

More than one way to kill Flash

Apple announced a new HTML5 demo site. The site features all sorts of HTML5 demo projects, with the video demo coming right at the top of the list. There are demos on transitions, typography and more. Viewable in Safari, naturally. (Insert snark here.)

At the bottom of the page, there’s a subtly placed link to Steve Jobs’ article explaining why iPhone and iPad don’t support Flash—in case you didn’t make the connection to Flash from the rest of the page.

To me, the interesting part of this effort from Apple is the link to the developer information about the demos. You can pick up examples, instructions and code. There might be some gems useful to educators among the instructions.

Useful Links: Microsoft, textbooks, SVG

Microsoft’s Networked Approach To Accelerating Social Change Through Technology at Beth’s Blog. Beth talked about a conference which revealed a side of Microsoft I’ve never heard about before.

I had an opportunity to attend Microsoft’s “Accelerator Summit,” a day of conversation with Microsoft employees, partners, academics,  journalists, and bloggers about their corporate citizenship program. Their strategy focuses on technology and partnerships that can accelerate systemic on the ground social change and economic issues.

Textbooks may go the way of Netflix, with BookRenter starting up to loan students textbooks. This notion may change the way the world works on college campuses.

Some of the readers here may be interested in the No Bit, Sherlock competition. The contest lets you to come up with a progress control developed solely with SVG. This contest is from Web Directions North.

Failure to Launch

There’s a browser monster on my computer, eating browsers. First I  couldn’t get Chrome to launch after a normal installation. Tried a bunch of times.

Then I decided to upgrade Opera to the latest version. Download. Install. Click to open. Won’t launch.

What the heck is going on?

I run Disk Repair, have a few permission errors, fix them. Try again. Opera still won’t launch.

What do I do now? I’m stumped. And I’m quickly running out of browsers.

Facebook’s New Privacy Settings: This is simple?

Last week Facebook responded to the screams of anger over their privacy policies. On the Facebook blog, Mark Zuckerberg explained Facebook’s new rules. Supposedly, the steps Facebook is taking will make monitoring your privacy settings simpler.

Today we’re starting to roll out some changes that will make all of these controls a lot simpler. We’ve focused on three things: a single control for your content, more powerful controls for your basic information and an easy control to turn off all applications.

Whether Facebook succeeded in making things simpler is open for debate. The problem with Facebook privacy settings is that so many applications, features, functions, partnerships, advertisers, and connections run into and out of Facebook. So many settings are needed to control all these data streams, that it’s hard for me to regard the process as simple.

Trying to tame Facebook’s privacy settings is like trying to get a kid into a onesie while she is kicking and rolling and practicing her semaphore technique. It’s like the kid has forty arms and legs to trap instead of just four, and you can never quite get everything snapped up before she slips an appendage out again.

The headline at Search Engine Land says it all for me: Drill (Down), Baby, Drill: Facebook’s New “Simple” Privacy Settings Still Pretty Complex.

The new settings are rolling out slowly. If you look at your Privacy settings in Facebook and the heading is “Privacy Settings,” you still have the old system in place. When the new one reaches you, the page heading will say “Choose Your Privacy Settings.” You can see a screen shot of the new privacy page in Live Blog: Facebook Unveils New Privacy Controls.

A video tutorial by the EFF shows step by step directions for every menu and submenu involved in deciding on your privacy settings. The EFF page gives a text version of the video, which is helpful. If you can grasp all the steps from just the video and don’t need the written version, here’s the video from YouTube.

Wired Pen, in Facebook Principles Deciphered takes a tongue-in-cheek look at the new principles Zuckerberg announced and explains what they mean. For example, here’s one principle and its deciphered meaning:

We do not share your personal information with people or services you don’t want. (That is, unless a friend of yours has done so but we warn you about this in our privacy settings so that means we aren’t sharing your information, your friends are.)

On a more serious note, Wired Pen wrote today about the privacy controversy being deliberate on Facebook’s part.

Some people delivered kudos for the new settings. You’re in Control with New Facebook Privacy Settings is a good example of showing some approval to Facebook for respecting the demands of its users.

I agree that Facebook gets points for responding to the complaints. However, from my viewpoint, putting “you” in control of your Facebook privacy settings is part of the problem. Instead of opting in, you are forced to opt out. Instead of relying on your personal privacy and safety being respected, you are forced to police your settings with a microscope. If you are distracted or confused or not alert and things go awry—too bad, because you were in control.

Movements to get Facebook users to quit Facebook have fallen flat. Most people have concluded that Facebook is too big to quit. The only option left is to be in control of your privacy settings—and it’s not that simple.