If you add a dummy <script> tag right after <body>, Firefox will show the page after all the css from <head> is loaded: <body> <script>0</script> <!– rest of the code –> </body> There is an official bugreport about this FOUC (Flash Of Unstyled Content) on the Firefox site: https://bugzilla.mozilla.org/show_bug.cgi?id=1404468
Well, I think the problem is with your font location. I’m assuming that the bundled css virtual location /BundleStyles/css doesn’t actually exist. and if your folders structure like below Content > Font Content > style If this is true, then try this change /BundleStyles/css to /Content/css <link href=”https://stackoverflow.com/Content/css?v=pANk2exqBfQj5bGLJtVBW3Nf2cXFdq5J3hj5dsVW3u01″ rel=”stylesheet”/> and reference your font like this … Read more
I had the same bug. I fixed it by executing this script on domready (only for IE8 of course): var head = document.getElementsByTagName(‘head’)[0], style = document.createElement(‘style’); style.type=”text/css”; style.styleSheet.cssText=”:before,:after{content:none !important”; head.appendChild(style); setTimeout(function(){ head.removeChild(style); }, 0); This lets IE8 redraw all :before and :after pseudo elements
Is it possible loading an external font with inline css? NOT with an external CSS file [….]. Yes, you can base64 encode a font or fonts as shown in this article from Stephen Scaff and drop them into a style block in your page to avoid the external request. It may also be possible to … Read more
After trying a lot of stuff the next loader made the work. Instead of file-loader, I used url-loader . You need url-loader installed. { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: ‘url-loader?limit=100000’ }
This is because Firefox (from your mention of Firebug) thinks cross-domain, even subdomain, Web font embedding is a bad idea. You can convince it to load fonts from your subdomain by adding this to the top-level .htaccess file of the subdomain where your fonts are being served (updated to adapt code from the same file … Read more
You can also select any text node in the elements panel, then look at the bottom of the computed styles tab to see what fonts are rendered for that element
You need to add the following types to an .htaccess/IIS: AddType application/vnd.ms-fontobject .eot AddType font/ttf .ttf AddType font/otf .otf AddType application/font-woff .woff Updated .woff type from: AddType application/x-font-woff .woff (Thanks to @renadeen in comments below for pointing this out.) Check out my answer to a similar question here: Font Face not loaded Taken from here: … Read more
October 2018 edit tl;dr: use WOFF2, every modern browser supports it, with WOFF fallback because IE11 just won’t bloody die (late 2022 update: Microsoft actually killed it on its promised EOL date of June 15, and the world is a better place for it), and without the local() source indicator, because you want everyone to … Read more
Now on GitHub: https://github.com/patrickmarabeas/jQuery-FontSpy.js Essentially the method works by comparing the width of a string in two different fonts. We are using Comic Sans as the font to test against, because it is the most different of the web safe fonts and hopefully different enough to any custom font you will be using. Additionally we … Read more