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.
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?
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
Post a Comment