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
592
votes
2 answers

Using .otf fonts on web browsers

I'm working on a website that requires font trials online, the fonts I have are all .otf Is there a way to embed the fonts and get them working on all browsers? If not, what other alternatives do I have ?
Naruto
  • 6,398
  • 5
  • 21
  • 24
576
votes
21 answers

How to add some non-standard font to a website?

Is there a way to add some custom font on a website without using images, Flash or some other graphics? For example, I was working on a wedding website, and I found a lot of nice fonts for that subject. But I can't find the right way to add that…
vaske
  • 9,332
  • 11
  • 50
  • 69
543
votes
9 answers

How to add multiple font files for the same font?

I'm looking at the MDC page for the @font-face CSS rule, but I don't get one thing. I have separate files for bold, italic and bold + italic. How can I embed all three files in one @font-face rule? For example, if I have: @font-face { …
Felix
  • 88,392
  • 43
  • 149
  • 167
427
votes
14 answers

Why is @font-face throwing a 404 error on woff files?

I'm using @font-face on my company's site and it works/looks great. Except Firefox and Chrome will throw a 404 error on the .woff file. IE does not throw the error. I have the fonts located at the root but I've tried with the fonts in the css folder…
dcp3450
  • 10,959
  • 23
  • 58
  • 110
381
votes
3 answers

Why should we include ttf, eot, woff, svg,... in a font-face

In CSS3 font-face, there are multiple font types included like ttf, eot, woff, svg and cff. Why should we use all of these types? If they are special to different browsers, why is the number of them greater than the number of the major web browsers?
user16948
  • 4,801
  • 10
  • 30
  • 41
355
votes
13 answers

Using fonts with Rails asset pipeline

I have some fonts being configured in my Scss file like so: @font-face { font-family: 'Icomoon'; src: asset-url('icoMoon.eot?#iefix', font) format('embedded-opentype'), asset-url('icoMoon.woff', font) format('woff'), …
rctneil
  • 7,016
  • 10
  • 40
  • 83
323
votes
19 answers

Unicode character for "X" cancel / close?

I want to create a close button using CSS only. I'm sure I'm not the first to do this, so does anyone know which font has an 'x' the same width as height, so that it can be used cross-browser to look like a close button?
Leonti
  • 10,400
  • 11
  • 43
  • 68
317
votes
19 answers

Why does this "Slow network detected..." log appear in Chrome?

I noticed this info log began to appear in Google Chrome Dev (Version 55.0.2883.18 dev) and I can't imagine why. Slow network is detected. Fallback font will be used while loading: http://font-path.extension` It appears on all websites that use…
Acauã Montiel
  • 3,281
  • 2
  • 14
  • 8
249
votes
6 answers

Multiple font-weights, one @font-face query

I have to import the Klavika font and I've received it in multiple shapes and…
Rvervuurt
  • 8,589
  • 8
  • 39
  • 62
240
votes
1 answer

Right mime type for SVG images with fonts embedded

This is the usual SVG mime type: image/svg+xml And it works great. However, when embedding an SVG font, chrome tells you the mime type is incorrect, obviously because you return a font instead of an image. Is there any universal mime type? is…
cmplieger
  • 7,155
  • 15
  • 55
  • 83
205
votes
8 answers

Using custom fonts using CSS?

I've seen some new websites that are using custom fonts on their sites (other than the regular Arial, Tahoma, etc.). And they support a nice amount of browsers. How does one do that? While also preventing people from having free access to download…
Radicate
  • 2,934
  • 6
  • 26
  • 35
199
votes
23 answers

Failed to decode downloaded font

This is an error I am getting in Chrome and unfortunately searching for it hasn't given me much results. The font itself is appearing correctly. However I still get this error/warning. More specifically, this is the full warning: "Failed to decode…
Luís Ferreira
  • 2,458
  • 3
  • 19
  • 27
198
votes
30 answers

CSS @font-face not working with Firefox, but working with Chrome and IE

The following code works in Google Chrome beta as well as IE 7. However, Firefox seems to have a problem with this. I'm suspecting it to be a problem of how my CSS files are included, cause I know Firefox is not too friendly about cross-domain…
KG -
  • 7,130
  • 12
  • 56
  • 72
147
votes
16 answers

Preloading @font-face fonts?

Is it possible to preload or otherwise cache @font-face fonts, most likely with javascript, before the page loads so you don't get that ugly jump when the page finally does load?
dougoftheabaci
142
votes
13 answers

Amazon S3 CORS (Cross-Origin Resource Sharing) and Firefox cross-domain font loading

There has been a long standing issue with Firefox not loading font from different origin than the current webpage. Usually, the issue arise when the fonts are served on CDNs. Various solutions has been raised in other questions: CSS @font-face not…
VKen
  • 4,964
  • 4
  • 31
  • 43
1
2 3
…
99 100