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
Choose your font. As example I’ll take “Stint Ultra Expanded”. There is example how to add it to your page: <link href=”http://fonts.googleapis.com/css?family=Stint+Ultra+Expanded” rel=”stylesheet” type=”text/css”> Take only the href and open it in browser. You’ll see something like this: @font-face { font-family: ‘Stint Ultra Expanded’; font-style: normal; font-weight: 400; src: local(‘Stint Ultra Expanded’), local(‘StintUltraExpanded-Regular’), url(http://themes.googleusercontent.com/static/fonts/stintultraexpanded/v1/FeigX-wDDgHMCKuhekhedWmdhyVWfbygZe-w47Q2x_f3rGVtsTkPsbDajuO5ueQw.woff) format(‘woff’); … Read more
Web-font for Japanese, though there are few providers exist, is not really practical as you found the size of the font data is too big to download. Usually Japanese font has 8,000-16,000 glyph so making new fonts means you need to make at least 8,000 glyph, which is pretty heavy task. As a result of … Read more
IE9 supports .WOFF; IE8 does not, and supports only .EOT fonts. Open the IE9 F12 Developer Tools and you see the following messages: CSS3117: @font-face failed cross-origin request. Resource access is restricted. Neuton-webfont.woff CSS3117: @font-face failed cross-origin request. Resource access is restricted. YanoneKaffeesatz-Regular-webfont.woff CSS3114: @font-face failed OpenType embedding permission check. Permission must be Installable. Neuton-webfont.ttf … Read more
Looks like IE8-IE7 can’t understand multiple Google Web Font styles through the same file request using the link tags href. These two links helped me figure this out: See this open Google issue, and look at the comments. Also see this StackOverlow Answer Google Web Fonts don’t work in IE8 The only way I have … Read more
This is how my team went about including the Roboto fonts in our Webpack project: Download the Roboto fonts and make a CSS file in a font-specific folder Create a folder (/fonts). Download all of the Roboto fonts from Font Squirrel. Go to the Webfont Kit tab, then press the Download @font-face Kit button with … Read more
IE8 and the older have a bug in their parsers for the src attribute. So if you include more than 1 font format in the SRC, IE fails to load it and reports a 404 error. The question mark solves that problem as it fools IE into thinking the rest of the string (other src) … Read more
There is one rule that is set by font-awesome.css, which you need to override. You should set overrides in your CSS files rather than inline, but essentially, the icon-ok class is being set to vertical-align: baseline; by default and which I’ve corrected here: <button id=”whatever” class=”btn btn-large btn-primary” name=”Continue” type=”submit”> <span>Continue</span> <i class=”icon-ok” style=”font-size:30px; vertical-align: … Read more
Latin aka Unicode Latin1-Supplement (U+0080 to U+00FF) is meant to support primarily Western European languages (as you mentioned French, German, Spanish, also Portuguese, Italian, Irish, Icelandic, languages of Scandinavian countries and unintentionally also other languages mentioned in the list below). English is supported by standard ASCII. ASCII (first 127 chars, 95 of them are graphemes … Read more
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