Lets try to redefine the generic fonts with a webfont @font-face definition.
We change:
- serif
- sans-serif
- monospace
- 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.