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.