Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

Basically, the issue lies with Chrome, as it will not render ttf fonts properly using antialiasing. A popular fix is to order the @font-face directive so that the svg-font is first. Only Chrome will pick this one up, and Chrome actually renders this well. Read more here.

@font-face {
    font-family: 'RockwellStd-Light';
    src: url('rockwellstdlight-webfont.eot');
    src: url('rockwellstdlight-webfont.eot?#iefix') format('embedded-opentype'),
         url('rockwellstdlight-webfont.woff') format('woff'),
         url('rockwellstdlight-webfont.ttf') format('truetype'),
         url('rockwellstdlight-webfont.svg#RockwellStdLight') format('svg');
    font-weight: lighter;
    font-style: normal;

}

/* Chrome behaves if svg is before woff and ttf, as below */

@font-face {
    font-family: 'RockwellStd-Light';
    src: url('rockwellstdlight-webfont.eot');
    src: url('rockwellstdlight-webfont.svg#RockwellStdLight') format('svg'),
         url('rockwellstdlight-webfont.eot?#iefix') format('embedded-opentype'),
         url('rockwellstdlight-webfont.woff') format('woff'),
         url('rockwellstdlight-webfont.ttf') format('truetype');
    font-weight: lighter;
    font-style: normal;

}

Now I'm wondering how to implement this fix in a project using the SharePoint theming engine. We rely on it to generate the appropriate CSS from spcolor and spfont xml files. But this also means that in the end, we are not the ones who write the @font-face directive in the CSS. Is there any way of influencing SharePoint to put them in the right order?

I have also tried -webkit-font-smoothing: antialiased; to no avail. As far as I know, putting the svg-font first is the only way of getting Chrome to behave at the moment.

So can I get SharePoint to put the fonts in the right order in the @font-face directive? Or is there another solution?

share|improve this question
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.