Stack Overflow
Stack Overflow

Questions tagged [font-face]

@font-face is a CSS rule that allows the definition of embedded fonts within a webpage.

Initially proposed in CSS2 (and supported in IE 5 using the EOT font format), and subsequently removed from CSS2.1, @font-face was re-introduced as a CSS3 module. Different browsers require different font formats to work, and the license of the font itself needs to permit its use with the @font-face rule.

3439 questions
38
votes
12 answers

@font-face works in IE8 but not IE9

As described above, I have issues with @font-face not displaying in IE9 although it displays fine in every other browser including IE8 and under. Additionally, when viewing locally on my computer, IE9 does display the font, just not when fully…
DanC
  • 1,297
  • 4
  • 24
  • 42
38
votes
1 answer

Typekit and @fontface issues on all Windows browsers with Ruby on Rails app, especially Chrome

My Ruby on Rails app hates custom fonts and I don't know why. Here are some of the errors and troubleshooting that I have gone through. First, there were devastating display errors that only happened on Google Chrome on a PC. The text will overlap,…
Brenda
  • 835
  • 8
  • 11
37
votes
5 answers

font-face with wrong MIME type in Chrome

This is the @font-face declaration I have used: @font-face { font-family: SolaimanLipi; src: url("font/SolaimanLipi_20-04-07.ttf"); } This is working perfectly in Firefox but not in Chrome. After "inspect element" I got the following…
moonstruck
  • 2,729
  • 2
  • 26
  • 29
37
votes
6 answers

Fix custom font line-height with CSS

I've been experiencing a strange issue when using a custom font on a new webapp i'm working on. This custom font (FF DIN) Seem to have naturally vertical off-center line-height, which force me to put some padding-top hack to compensate the top space…
kirkas
  • 1,749
  • 2
  • 12
  • 22
37
votes
8 answers

Downsizing an .OTF font by removing glyphs

I can't quite believe this question hasn't been asked specifically for OpenType fonts, but does anyone know of a way to remove glyphs from these fonts? I have an .OTF with a very large file-size (almost 10MB) and I need to make it smaller. The…
shennan
  • 10,798
  • 5
  • 44
  • 79
37
votes
3 answers

@font-face url pointing to local file

I need to include a font (OpenSymbol) in a html file and the font file is in a local folder (I know the exact absolute path to it). If I use @font-face like this: @font-face { font-family: "OpenSymbol"; src: url("/OpenSymbol.ttf")…
Cedric Reichenbach
  • 8,970
  • 6
  • 54
  • 89
36
votes
3 answers

How to know when font-face has been applied

I am currently building a corporate website for a customer that uses custom fonts extensively. On jQuerys DOM-ready I am doing placement calculations to figure out where some pop-up menus with dynamic width and height should be placed based on their…
Martin Jespersen
  • 25,743
  • 8
  • 56
  • 68
36
votes
4 answers

To use local font in HTML using font face

I trying to use local font to apply styles in html, below is the code.Font is not getting applied for harlow class used element