Search code examples
cssinternet-explorerfontsfont-face

How to fix issue with Internet Explorer 11 rendering text before applying @font-face which lead to text overflow

At my company website we use a custom web font using a @font-face named HelveticaNeue. It works perfectly except in Internet Explorer 11 here by referring to as IE11.

In some request, usually first time visitors or on some hard refresh, Internet Explorer first render the text (wrapping text with soft line breaks) and then apply the web font. Since HelveticaNeue is a lot wider then the browsers default web font the text needs to be re-rendered to fit the container. All other browsers I have tested dose this fine but not IE11.

Remember, this does not happen every time but it is tested on multiple computers with same result.

I have attached an image which explain the issue.

Example of issue with Internet Explorer 11 and text rendering with @font-face

As shown in the image above the text breaks the layout and run out of it´s container or get cropped due to CSS overflow: hidden;.

Is there a way to force IE11 to either load the font before rendering the text or to force it to re-render after the font is loaded... Or any other idea for a solution?

The page with the issue.

And here the CSS used to include the font in a external stylesheet.

@font-face{
    font-family: 'HelveticaNeue';
    src: url('../../typo3conf/ext/site/Resources/Public/Fonts/helveticaneuebold-webfont.eot');
    src: url('../../typo3conf/ext/site/Resources/Public/Fonts/helveticaneuebold-webfont.eot?#iefix') format('embedded-opentype')
        , url('../../typo3conf/ext/site/Resources/Public/Fonts/helveticaneuebold-webfont.woff') format('woff')
        , url('../../typo3conf/ext/site/Resources/Public/Fonts/helveticaneuebold-webfont.ttf') format('truetype')
        , url('../../typo3conf/ext/site/Resources/Public/Fonts/helveticaneuebold-webfont.svg#HelveticaNeueLTCom75BoldJARE') format('svg');
    font-weight: 700;
    font-style: normal
}
@font-face{
    font-family: 'HelveticaNeue';
    src: url('../../typo3conf/ext/site/Resources/Public/Fonts/helveticaneuelight-webfont.eot');
    src: url('../../typo3conf/ext/site/Resources/Public/Fonts/helveticaneuelight-webfont.eot?#iefix') format('embedded-opentype')
        , url('../../typo3conf/ext/site/Resources/Public/Fonts/helveticaneuelight-webfont.woff') format('woff')
        , url('../../typo3conf/ext/site/Resources/Public/Fonts/helveticaneuelight-webfont.ttf') format('truetype')
        , url('../../typo3conf/ext/site/Resources/Public/Fonts/helveticaneuelight-webfont.svg#HelveticaNeueLTCom45LightJARA') format('svg');
    font-weight: 400;
    font-style: normal
}
@font-face{
    font-family: 'HelveticaNeue';
    src: url('../../typo3conf/ext/site/Resources/Public/Fonts/helveticaneueultralight-webfont.eot');
    src: url('../../typo3conf/ext/site/Resources/Public/Fonts/helveticaneueultralight-webfont.eot?#iefix') format('embedded-opentype')
        , url('../../typo3conf/ext/site/Resources/Public/Fonts/helveticaneueultralight-webfont.woff') format('woff')
        , url('../../typo3conf/ext/site/Resources/Public/Fonts/helveticaneueultralight-webfont.ttf') format('truetype')
        , url('../../typo3conf/ext/site/Resources/Public/Fonts/helveticaneueultralight-webfont.svg#HelveticaNeueLTCom25UltraLtJARA') format('svg');
    font-weight: 300;
    font-style: normal
}

You can confirm the issue by visiting the site and typing Ctrl + F5 repeatedly In IE11 and suddenly the issue will appear.

Solution

  • I fixed it by re-downloading the font kit from fonts.com. It seems they fixed the files on their side as they are different and load correctly on IE11 now.

    Cheers