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


at company website use custom web font using @font-face named helveticaneue. works except in internet explorer 11 here referring ie11.

in request, first time visitors or on hard refresh, internet explorer first render text (wrapping text soft line breaks) , apply web font. since helveticaneue lot wider browsers default web font text needs re-rendered fit container. other browsers have tested dose fine not ie11.

remember, not happen every time tested on multiple computers same result.

i have attached image explain issue.

example of issue internet explorer 11 , text rendering @font-face

as shown in image above text breaks layout , run out of it´s container or cropped due css overflow: hidden;.

is there way force ie11 either load font before rendering text or force re-render after font loaded... or other idea solution?

the page issue.

and here css used include font in 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 issue visiting site , typing ctrl + f5 repeatedly in ie11 , issue appear.

i fixed re-downloading font kit fonts.com. seems fixed files on side different , load correctly on ie11 now.

cheers


Comments

Popular posts from this blog

java - Plugin org.apache.maven.plugins:maven-install-plugin:2.4 or one of its dependencies could not be resolved -

Round ImageView Android -

How can I utilize Yahoo Weather API in android -