Let’s try some webfonts again from the Google Webfont api. Tangerine and Canterell. I like the webfont idea from Google. Read more about it on their blogpost.
This text is Tangerine italic
This text is Tangerine bold
This text is Cantarell italic
This text is Cantarell bold
A tad small compared to the default font. And Opera 10.63 renders all font-styles bold and italic as normal. Weird, for the inventors of the webfont.
Dunno, maybe it’s a new kind of spam. Or another quick and dirty SEO trick.
Maybe the two beautiful cities London and Amsterdam are battling to lure German tourists into their hotels. The English national tourist-agency just scored a superb goal:
London – Amsterdam: 1-0
A `wandeling door amsterdam` in Dutch (`a walk in amsterdam`) is translated by Google to `London Walks` in German.
Really?
Really!!
No, I wasn’t drunk writing this post, just had a long hot shower.
No, you don’t need new specs, this text is slightly blurred.
Scrubbing my back I was thinking about the new CSS3 stuff, and what you can do about spicing up the layout.
After my hot shower, steam filling my bathroom, I looked at myself in the mirror, razor-blade in hand to deliver a fast and clean shave.
Stop!
No shaving in the mist, no blood in the tub, but EUREKA
Fuzzy fonts with CSS!
How? (more…)
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.
SVG support as background image in Google Chrome
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.
Google Chrome rendering issues SVG background
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.
Another example of using SVG-object as background-images for HTML elements.
Lorem ipsum dolor sit amet consectetuer nibh tellus Nulla ut tortor. Mauris nisl sem parturient urna amet Nam orci pretium Morbi nunc. Id pellentesque sed sed et et nunc Nam Vestibulum tincidunt penatibus. Nibh quis eu dolor tellus nulla malesuada condimentum sed Curabitur sed. Urna metus senectus Phasellus justo et Nulla leo tincidunt Curabitur turpis. Enim mauris eu sit lacus Ut Phasellus molestie eros nascetur tincidunt. Justo pretium cursus.
Metus massa eros ipsum consequat et dui id ligula sem nibh. Et ut malesuada Maecenas pede Cum fames Ut non convallis Quisque. Vitae nibh porttitor orci nisl semper vitae justo orci Curabitur eu. Elit quis condimentum ridiculus dictumst quis laoreet tempus consectetuer lacus vel. Lorem wisi porttitor sollicitudin auctor id ipsum tempus libero nec.
Lets try to redefine the generic fonts with a webfont @font-face definition.
We change:
<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>
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.
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.
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.
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.
