Posts Tagged ‘webfonts’

Comments Off on Google webfonts for everyday use?

Google webfonts for everyday use?

Tuesday, October 19th, 2010

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

This text is Tangerine italic

This text is Tangerine bold

This text is Cantarell

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.

Comments Off on HTML5 Webfonts woes II: redefining generic fonts

HTML5 Webfonts woes II: redefining generic fonts

Tuesday, September 29th, 2009

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

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

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

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.

Comments Off on HTML5 Webfonts woes: redefining standard fonts

HTML5 Webfonts woes: redefining standard fonts

Tuesday, September 29th, 2009

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 scoped>
@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.

Comments Off on Try your Webfont on this blogpost

Try your Webfont on this blogpost

Monday, April 13th, 2009

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

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.

Edit this alinea yourself (click and type)

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.