Question

I have a bookmarklet that inserts a widget into any site’s pages. The styling of the widget is being broken by a certain site that has the following CSS @font-face declaration:

@font-face {
    font-family: "helvetica";
    src: url("http://cdn2.yoox.biz/Os/fonts/helveticaneueltstdmdcn.eot?iefix") format("eot"),
         url("http://cdn2.yoox.biz/Os/fonts/helveticaneueltstdmdcn.woff") format("woff"),
         url("http://cdn2.yoox.biz/Os/fonts/helveticaneueltstdmdcn.ttf") format("truetype"),
         url("http://cdn2.yoox.biz/Os/fonts/helveticaneueltstdmdcn.svg#svgFontName") format("svg");
}

The widget that my bookmarklet inserts uses helvetica everywhere and on this one site it looks horrible because the browser is mapping helvetica to the @font-face declaration of that name rather than the standard helvetica system font.

The question: is there any way to override/bypass this @font-face declaration or create another @font-face declaration that maps to the system helvetica font?

Answer 1

Unless the stylesheet overrides it by referencing the stylesheet with !important after your widget’s stylesheet, this could work:

@font-face {
    font-family: 'ProperHelvetica'; /* Make a name for the "proper" Helvetica */
    src: local('helvetica'); /* Assign it to the Helvetica font on the user's system */
}
.your-widget {
    font-family: 'ProperHelvetica', helvetica, sans-serif !important; /* Make everything 
in your widget use the "proper" Helvetica and if the user doesn't have it,
use the site's helvetica. */
}