self-hosted font variations #30

remitbri opened this Issue Jun 13, 2011 · 5 comments


None yet

5 participants


In a stylesheet I have

@font-face {
    font-family: 'myfont';
    font-weight: bold;
    font-style: normal;
    src: url('../fonts/myfont-Bold-webfont.eot');
    src: url('../fonts/myfont-Bold-webfont.eot?iefix') format('eot'),
         url('../fonts/myfont-Bold-webfont.woff') format('woff'),
         url('../fonts/myfont-Bold-webfont.ttf') format('truetype'),
         url('../fonts/myfont-Bold-webfont.svgz#webfontfJXKJAfV') format('svg'),
         url('../fonts/myfont-Bold-webfont.svg#webfontfJXKJAfV') format('svg');
@font-face {
    font-family: 'myfont';
    font-weight: normal;
    font-style: normal;
    src: url('../fonts/myfont-Book-webfont.eot');
    src: url('../fonts/myfont-Book-webfont.eot?iefix') format('eot'),
         url('../fonts/myfont-Book-webfont.woff') format('woff'),
         url('../fonts/myfont-Book-webfont.ttf') format('truetype'),
         url('../fonts/myfont-Book-webfont.svgz#webfont3yluhAu4') format('svg'),
         url('../fonts/myfont-Book-webfont.svg#webfont3yluhAu4') format('svg');

and in a script, I have

    custom: {
        families: ['myfont:r,b']

Yet, for some reasons, the resulting class gets to be wf-myfontrb-n4-active,
instead of wf-myfont-n4-active + wf-myfont-n7-active

Or any other variation :
['myfont:regular,bold']gives me in the end wf-myfontregularbold-n4-active,
['myfont:normal,bold']gives me in the end wf-myfontnormalbold-n4-active,
['myfont:400,700']gives me wf-myfont400700-n4-active,

As soon as I use non-self hosted fonts, everything's fine, though. Have I missed something ?


I wish I could!


The major issue I see coming out of this would be that for any fonts that get defined in one stylesheet using the method remitbri used, it actually crashed my browser when I was using Safari for Mac. It seemed to work fine when I used the hosted version of a font, however, which I guess defined things in such a manner. I wish I knew more javascript or the WFL library but will see if I can be of help.


See pull request 51: #51

Typekit member

This is available in the custom module now (well, in a couple days when the Google JS CDN gets updated.)

@bramstein bramstein closed this Feb 1, 2013
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment