Bypassing @font-face declaration that overrides "helvetica" font family

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?

@PerSalbark: It would be removed before you could blink :) – thirtydot Jun 12 '12 at 15:34 — thirtydot, Jun 12 '12 at 15:34

Anish Gupta · Accepted Answer · 2012-06-13T14:58:23.210

4

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. */
}

edited Jun 13 '12 at 14:58

answered Jun 12 '12 at 15:44

Anish Gupta

2,218
2
23
37

3

Even though I answered my own question, I will accept yours since it was the first non-self posted solution =) – Tautologistics Jun 12 '12 at 16:57

ausi · Answer 2 · 2012-06-12T15:42:36.353

You can add the following css to create a custom font name that maps to a local installed font:

@font-face{
    font-family: mycustomuniquefontname;
    src: local("Helvetica");
}

For the styling of the widget you should use this:

font-family: mycustomuniquefontname, Helvetica, sans-serif;

If you are using more font styles such as bold and italic, you have to define all of them:

@font-face{
    font-family: mycustomuniquefontname;
    src: local("Helvetica");
}
@font-face{
    font-family: mycustomuniquefontname;
    src: local("Helvetica Bold");
    font-weight: bold;
}
@font-face{
    font-family: mycustomuniquefontname;
    src: local("Helvetica Italic");
    font-style: italic;
}
@font-face{
    font-family: mycustomuniquefontname;
    src: local("Helvetica Bold Italic");
    font-weight: bold;
    font-style: italic;
}

score 1 · Answer 3 · answered Jun 12 '12 at 15:34

As soon as I submitted this question I got some inspiration. What I found works is the following...

Create a the following css rule:

@font-face {
    font-family: 'RealHelvetica';
    src: local('helvetica');
}

In the elements that require the real helvetica system font specify the font-family as 'RealHelvetica' instead of just helvetica:

.widget {
    font-family: 'RealHelvetica',helvetica,sans-serif !important;
}

score 0 · Answer 4 · answered Jun 12 '12 at 15:39

Wrap your widget in an iframe. Don't know if it the best solution, but it is a solution.

http://jsfiddle.net/bwcNX/

var $frame = $('<iframe style="width:200px; height:100px;">');
$('body').append( $frame );
setTimeout( function() {
    var $doc = $($frame[0].contentWindow.document.documentElement);
    $doc.html("<head><title>abc</title></head><body><div>def.</div></body></html>");
    $doc.find('div').append('<div>ghi.</div>');
}, 1 );

Bonus: Should future proof your widget against most other CSS or font related problems.

Excellent point but the functionality/interaction of my widget precludes using an iFrame. In general, that would be viable option. — Tautologistics, Jun 12 '12 at 16:56

Bypassing @font-face declaration that overrides "helvetica" font family

4 Answers4