font-face
How do I use fontello fonts?
Inside the bundle, there is “font” folder and a “css” folder. Move the font folder into your project. Your project might look something like this: /project-root — /stylesheets — /images — /javascripts — /font Include the Fontello css. Inside the “css” folder in the bundle, you’ll see: [yourfontname]-codes.css [yourfontname]-embedded.css [yourfontname]-ie7-codes.css [yourfontname]-ie7.css [yourfontname].css For most cases, … Read more
“NetworkError: 404 Not Found fontawesome-webfont.woff?v=4.0.3
This worked for me: Add the following lines to your web.config <system.webServer> <staticContent> <remove fileExtension=”.woff”/> <mimeMap fileExtension=”.woff” mimeType=”application/x-font-woff” /> </staticContent> </system.webServer> You have to add these lines because by default Apache is not configured with .woff as a default MIME-type. Apache default MIME-type This holds for IIS as well. As Seb Duggan explains here:IIS default … Read more
Using jQuery to know when @font-face fonts are loaded?
I use this function – tested in Safari, Chrome, Firefox, Opera, IE7, IE8, IE9: function waitForWebfonts(fonts, callback) { var loadedFonts = 0; for(var i = 0, l = fonts.length; i < l; ++i) { (function(font) { var node = document.createElement(‘span’); // Characters that vary significantly among different fonts node.innerHTML = ‘giItT1WQy@!-/#’; // Visible – so … Read more
Is there a legal way for me to embed the Calibri font into a website for non Windows Vista/7 visitors? [closed]
Somehow, Google has Calibri and Cambria in their directory. You might be able to use it through their link: Calibri → https://fonts.googleapis.com/css?family=Calibri:400,700,400italic,700italic Cambria → https://fonts.googleapis.com/css?family=Cambria:400,700,400italic,700italic
Helvetica Neue Light with @font-face .. legal? [closed]
If you are just referencing the users system fonts then the licensing requirement is on the User. If you are providing the font then you (or your client) will need to licence the Font — even if it’s a free font there will likely be some form of licence. @font-face uses two forms of reference: … Read more
@font-face EOT not loading over HTTPS
I ran into this problem with HTTPS, but not HTTP. For some reason IE would continue through the different font options, ignoring 200 OK responses. In my case, the problem was the HTTP header Cache-Control: no-cache for the font. While this will work fine with HTTP, over HTTPS it causes Internet Explorer to ignore the … Read more
How can I convert OTF/TTF files to EOT format?
Use the Font Squirrel Generator – this will produce not just EOT, but also SVG and WOFF formats, and converting multiple font files at once, and providing everything in a single archive along with the relevant CSS.
@font-face failed OpenType embedding permission check. Permission must be Installable
sibaspage answer pointed me into the right direction. But I still see the error message in IE11. For me it worked using the following syntax: @font-face { font-family: ‘Font-Name’; src: url(‘../fonts/Font-Name.eot?#iefix’) format(’embedded-opentype’), url(‘../fonts/Font-Name.ttf’) format(‘truetype’); }
Flash of unstyled content (FOUC) in Firefox only? Is FF slow renderer?
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