font-face

font-face with wrong MIME type in Chrome

As usual, different browsers have different needs. Here is a cross browser @fontface declaration, taken from the Paul Irish blog – @font-face { font-family: ‘Graublau Web’; src: url(‘GraublauWeb.eot’); src: local(‘☺’), url(‘GraublauWeb.woff’) format(‘woff’), url(‘GraublauWeb.ttf’) format(‘truetype’); } .eot is for IE, the rest of the browsers use either .woff or .ttf If you need to generate the … 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

CSS @font-face not working in IE8

this works in ie8/9 http://dev.bowdenweb.com/a/fonts/serif/alegreya/demo.html @font-face { font-family: ‘AftaserifRegular’; src: url(‘AftaSerifThin-Regular-webfont.eot’); src: url(‘AftaSerifThin-Regular-webfont.eot?#iefix’) format(’embedded-opentype’), url(‘AftaSerifThin-Regular-webfont.woff’) format(‘woff’), url(‘AftaSerifThin-Regular-webfont.ttf’) format(‘truetype’), url(‘AftaSerifThin-Regular-webfont.svg#AftaserifRegular’) format(‘svg’); font-weight: normal; font-style: normal; }

@Font-face not working on mobile

You need to add all src needed to @font-face like this example: @font-face { font-family: ‘MyWebFont’; src: url(‘webfont.eot’); /* IE9 Compat Modes */ src: url(‘webfont.eot?#iefix’) format(’embedded-opentype’), /* IE6-IE8 */ url(‘webfont.woff2’) format(‘woff2’), /* Super Modern Browsers */ url(‘webfont.woff’) format(‘woff’), /* Pretty Modern Browsers */ url(‘webfont.ttf’) format(‘truetype’), /* Safari, Android, iOS */ url(‘webfont.svg#svgFontName’) format(‘svg’); /* Legacy iOS … Read more

Fallback fonts on special characters

What you described is the default behaviour of a browser – it should naturally fall back to basic font for missing characters. However, sometimes custom fonts use blank characters, in that case you can try using the unicode-range For example: @font-face { font-family: BBCBengali; src: url(fonts/BBCBengali.ttf) format(“opentype”); unicode-range: U+00-FF; } Taken from this interesting article: … Read more

Google warning: Resource interpreted as Font but transferred with MIME type application/octet-stream

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

Multiple font-weights, one @font-face query

Actually there is a special flavor of @font-face that will permit just what you’re asking. Here’s an example using the same font-family name with different styles and weights associated with different fonts: @font-face { font-family: “DroidSerif”; src: url(“DroidSerif-Regular-webfont.ttf”) format(“truetype”); font-weight: normal; font-style: normal; } @font-face { font-family: “DroidSerif”; src: url(“DroidSerif-Italic-webfont.ttf”) format(“truetype”); font-weight: normal; font-style: italic; … Read more

Use multiple @font-face rules in CSS

Note, you may also be interested in: Custom web font not working in IE9 Which includes a more descriptive breakdown of the CSS you see below (and explains the tweaks that make it work better on IE6-9). @font-face { font-family: ‘Bumble Bee’; src: url(‘bumblebee-webfont.eot’); src: local(‘☺’), url(‘bumblebee-webfont.woff’) format(‘woff’), url(‘bumblebee-webfont.ttf’) format(‘truetype’), url(‘bumblebee-webfont.svg#webfontg8dbVmxj’) format(‘svg’); } @font-face { … Read more