I always liked Opera’s support for SVG, and I really welcomed their initiative to treat SVG as any other image type, like jpg or gif or png. After all SVG (Scalable Vector Graphics) is a vector-image  mark up language (XML), like Flash or Silverlight but free and it’s an Open Standard.

Round corners, gradients, multi-image background, watermarks, nearly everything (animation?) can be handled by SVG, so it’s quite a powerful feature. Creating a dataURL of SVG is possible, so creating a CSS file with several gradient backgrounds, round borders is indeed a very efficient way of designing webpages. It’s cached, and although the initial css file is a bit heavier, no extra server requests are needed  to load additional images. It’s fast, lean and flexible.

I’m glad to see Google Chrome as the first other main browser join Opera in support for SVG images as backgrounds in CSS declarations.

Chrome’s implementation isn’t without errors, see what happens if you start scrolling the webpage in the brand new Chrome for Linux beta, but is a start. I hope Mozilla/Firefox and Apple/Webkit will follow soon.

I’ve given up expectations for Microsoft Explorer, see my other post. To be short: they wanna sell their Silverlight.

I’m not without any hope, , I hope Internet Explorer users will start using other webstandard compliant browsers and consequently MS marketshare will drop significantly. Only then they probably will convert to an attitude of supporting and promoting open standards.

Lets try to redefine the generic fonts with a webfont @font-face definition.
We change:

1. serif
2. sans-serif
3. monospace
4. fantasy

 <style>
    @font-face {
        src: url(http://dev.webonomic.nl/fonts/Pinewood.ttf);
        font-family: 'serif';
    }
    @font-face {
        src: url(http://dev.webonomic.nl/fonts/Pinocchio.ttf);
        font-family: 'sans-serif';
    }
    @font-face {
        src: url(http://dev.webonomic.nl/fonts/rothenbg.ttf);
        font-family: monospace;
    }
    @font-face {
        src: url(http://dev.webonomic.nl/fonts/DevinneSwash.ttf);
        font-family: 'fantasy';
    }
</style>

Paragraph with serif font

style=”font-family:serif” Nec tristique scelerisque, fringilla, cras eget proin. Fames, justo. Dui nisl ad nisi orci lectus curabitur scelerisque vitae. Metus tortor, scelerisque. Adipiscing tellus orci, magnis. Maecenas nullam. Eleifend. In, at enim habitasse dictum, lacinia, auctor.

Paragraph with sans-serif font

style=”font-family:sans-serif” Nec tristique scelerisque, fringilla, cras eget proin. Fames, justo. Dui nisl ad nisi orci lectus curabitur scelerisque vitae. Metus tortor, scelerisque. Adipiscing tellus orci, magnis. Maecenas nullam. Eleifend. In, at enim habitasse dictum, lacinia, auctor.

Paragraph with fantasy font

style=”font-family:fantasy” Nec tristique scelerisque, fringilla, cras eget proin. Fames, justo. Dui nisl ad nisi orci lectus curabitur scelerisque vitae. Metus tortor, scelerisque. Adipiscing tellus orci, magnis. Maecenas nullam. Eleifend. In, at enim habitasse dictum, lacinia, auctor.

Paragraph with monospace font

style=”font-family:monospace” Nec tristique scelerisque, fringilla, cras eget proin. Fames, justo. Dui nisl ad nisi orci lectus curabitur scelerisque vitae. Metus tortor, scelerisque. Adipiscing tellus orci, magnis. Maecenas nullam. Eleifend. In, at enim habitasse dictum, lacinia, auctor.

It seems we were successful: Firefox 3.5 and Safari 4.0 will redefine generic fonts! But we cheated, it happens only when they’re quoted.

Although font-family names are strings and strings should be handled the same if they are unquoted, double or single quoted, it’s different for generic families.

Generic font names aren’t string but keywords, quoted keywords are strings, so generic font names should never be quoted.

Unquoted generic names are not redefined as is shown by monospace

Opera does not redefine the fonts in any case. Chrome and Safari are right here. Firefox behavior is wrong. It let redefine generic fonts by type string, but called as keywords.

Update: Somehow there is inconsistent behavior. Firefox 3.5.3 acts diffently on Linux or XP. Also caching seems to be confusing.

What happens if you redefine a standard font with a new html5 webfonts font-face css property?

Second question: is it case-sensitive?

Answer: as you could guess, it depends of the implementation of vendors. Defining standards is one thing, defining  error handling is a bigger and perhaps even more important challenge.

Here we gonna redefine the verdana font with the Pinewoord webfont, and define a Pinewood and a pinewood font based on different fonts:

<style>
@font-face {
 font-family: verdana;
 src: url(http://dev.webonomic.nl/fonts/Pinewood.ttf);
 }

@font-face {
 src: url(http://dev.webonomic.nl/fonts/Pinewood.ttf);
 font-family: 'pinewood';
 }
@font-face {
src: url(http://dev.webonomic.nl/fonts/Pinocchio.ttf);
font-family: 'pinewood';
}

</style>

Paragraph with Verdana font

Nec tristique scelerisque, fringilla, cras eget proin. Fames, justo. Dui nisl ad nisi orci lectus curabitur scelerisque vitae. Metus tortor, scelerisque. Adipiscing tellus orci, magnis. Maecenas nullam. Eleifend. In, at enim habitasse dictum, lacinia, auctor.

Paragraph with Pinewood font

Nec tristique scelerisque, fringilla, cras eget proin. Fames, justo. Dui nisl ad nisi orci lectus curabitur scelerisque vitae. Metus tortor, scelerisque. Adipiscing tellus orci, magnis. Maecenas nullam. Eleifend. In, at enim habitasse dictum, lacinia, auctor.

Paragraph with pinewood font

Nec tristique scelerisque, fringilla, cras eget proin. Fames, justo. Dui nisl ad nisi orci lectus curabitur scelerisque vitae. Metus tortor, scelerisque. Adipiscing tellus orci, magnis. Maecenas nullam. Eleifend. In, at enim habitasse dictum, lacinia, auctor.

Firefox 3.5 and Safari 4.0 will redefine the Verdana font and render the Verdana and Pinewood font the same.

Opera 10 will stick to the standard font Verdana and will ignore the new definition.

All browsers treat the font-face case-insensitive, there are no differences in the rendering of both Pinewood paragraphs.

Chrome doesn’t render any webfonts in this example by default.
It should be started with the commandline switch: –enable-remote-fonts

I would say Opera’s behaviour is wrong:
Specs state:

If the font family name is the same as a font family available in a given user’s environment, it effectively hides the underlying font for documents that use the stylesheet. This permits a web author to freely choose font-family names without worrying about conflicts with font family names present in a given user’s environment.

As pointed out in an earlier post, HTML5 and the webfont CSS @fontface property will phase out the need for font replacement techniques like sIFR or Cufon.

And another popular javascript driven UI-aid is gonna deprecate soon. The date-picker or calendar tool.

HTML5 that now incorporates the Webform2 specification which has internal support for a calendar tool, range slider and number spinners.

Opera is the only browser that has support for Webform now for several years. I made some internal tools that used it.

It so simpel and powerful. And no more localisation issues.

Some examples (need Opera 9+ to see)
With other HTML5 nonsupporting browsers it will degrade to an ordinary input field.

Datepicker

<input type="datetime-local" />

Email

<input type="email" />

*Note the automatically added special email icon in Opera

Number (with automatic spinner)

<input type="number" />

Range (slider)

<input type='range' />

Default range: 0 – 100. I guess this will be another UI favourite.

You can try the font here. Enter the url of the .ttf font-description.

Url:

See the font in bold. Wow xut lazy fox: Vitae, laoreet eros at sociis. Aliquam, eros, nonummy. Felis pretium blandit, luctus mi praesent egestas, tortor cubilia. Augue, est adipiscing. Fames, ve tristique magna fames. Ac ligula. Taciti augue rhoncus sagittis. Bibendum magnis, cum mi auctor. Euismod ut, purus. Sociis augue, ve, phasellus risus suspendisse placerat. Dis risus. Risus.

And in italic. Also very nice. Erat feugiat, rutrum. Ac cras ve tempor. Parturient dis, risus tempor natoque. Natoque amet quis hymenaeos nonummy, consectetuer consequat montes. Quisque non, turpis natoque class potenti feugiat, quisque hac. Nibh lacinia, donec, porta euismod enim viverra aptent. Fermentum amet viverra purus hymenaeos integer.

Is a strikethrough available? Vestibulum metus imperdiet justo augue. Tellus, etiam mi, magnis magna, aliquet nulla at mollis. Amet, hymenaeos ridiculus. Imperdiet bibendum, dictum ad ve duis erat nisi odio. Pharetra posuere libero quam laoreet commodo diam mi conubia. Curae. Pellentesque. Adipiscing. Et torquent pretium, nullam arcu, ullamcorper ultrices. Ac laoreet. Vitae. Ultricies leo, suspendisse fusce, fames. Accumsan etiam, mus laoreet.

Webfonts is a technique for defining a variety of fonts to be displayed in a web browser.

In CSS authors typically specify font characteristics via a font property (font-family). In CSS1, all fonts were assumed to be present on the client system and were identified solely by name. Designers of webpages had no way to propose other fonts to the user other than generic default fonts installed on the client computer.

Now with CSS3 the situation, when there is no matching font on the client, has been expanded. Fonts can be downloaded over the web by the browser and used on the client. This gives the author much more control over the typography and design of the page, because it’s not longer dependend of locally stored fonts.

This means this is no need anymore for flash based work-arounds like sIFR. The other good thing is that browsers can fall back to more generic fonts, when they don’t support the webfonts.

So there is no reason at all to wait using them.

Like for most web-innovations based on open standards, Microsoft is NOT supporting it. They have there own implementation based on a proprietary standard EOT. This is not a W3C recommendation nor is it supported by any other company. I think we have to wait till Internet Explorers` marketshare is dropping under 30% before Microsoft is starting to support open standards Web Fonts.

To see this paragraph in a different font, try the appropriate buttons.

Pinewood
GothenburgFraktur
Pinocchio

You need a webfont supporting browser: Safari 3.1+, Opera 10 +, Firefox 3.1 + or Chrome 2 +.