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
60
votes
9 answers

Load fonts with Webpack and font-face

I'm trying to load a font in my CSS file using @font-face but the font never loads. This is my directory structure. Then in webpack.config.js I have the loader to get fonts. var path = require('path'); var webpack =…
Ebenizer Pinedo
  • 1,261
  • 1
  • 10
  • 13
59
votes
4 answers

@font-face fonts only work on their own domain

I am trying to create a type of font repository for use on my websites, so that I can call to any font in the repository in my css without any other set-up. To do this I created a subdomain on which I placed folders for each font in the repository…
Ben Kulbertis
  • 1,713
  • 4
  • 17
  • 30
57
votes
15 answers

IE8 CSS @font-face fonts only working for :before content on over and sometimes on refresh/hard refresh

UPDATE: I've written a blog post about what I've learned about this issue. I still don't fully understand it, but hopefully someone will read this and shed some light on my issue: http://andymcfee.com/2012/04/04/icon-fonts-pseudo-elements-and-ie8 I…
Andy
  • 671
  • 1
  • 6
  • 6
56
votes
9 answers

Flash of unstyled content (FOUC) in Firefox only? Is FF slow renderer?

I'm not seeing this issue in any other browser that I've tested - IE, Chrome, Opera - but whenever I load a page from the server, I'm seeing a flash of unstyled content before the CSS is applied. This is even happening on subsequent page loads where…
user3199790
  • 561
  • 1
  • 4
  • 3
56
votes
5 answers

Font files are not loading with ASP.NET Bundles

In my ASP.NET MVC application, I'm using Bundles to compress css and js files. The problem is - the fonts are not loading after i enable the optimization mode. BundleTable.EnableOptimizations = true; Here is the C# code public static void…
Zafar
  • 3,394
  • 4
  • 28
  • 43
53
votes
7 answers

@font-face failed OpenType embedding permission check. Permission must be Installable

This exception occurs in here. You can reproduce it in IE11. So far I have not found the cause of the issue. Any ideas why this is being caused? CSS3114: @font-face failed OpenType embedding permission check. Permission must be Installable.…
Jakub Holovsky
  • 6,543
  • 10
  • 54
  • 98
51
votes
18 answers

@font-face EOT not loading over HTTPS

Summary I'm running into an issue using @font-face over HTTPS in IE 7,8,9 - it simply is not loading. It does not matter whether the containing HTML page is hosted on HTTPS or not, when I try to load the EOT font over HTTP it works, HTTPS it…
Greg
  • 561
  • 1
  • 4
  • 8
51
votes
6 answers

How can I convert OTF/TTF files to EOT format?

I need to use @font-face feature and my fonts are in OTF/TTF format and Microsoft browsers support only EOT format. I tried to use Microsoft tool WEFT, but it didn't work or I didn't understand how it works. Is there any other way to convert my…
newbie
  • 24,286
  • 80
  • 201
  • 301
47
votes
6 answers

Helvetica Neue Light with @font-face .. legal?

My team and I have developed a site using the Helvetica Neue Light font face via @font-face in our stylesheet. We're curious about whether it's legal for us to do this and who owns that font (if anyone?) Does anyone know how we can find this out -…
John Hunt
  • 4,265
  • 8
  • 45
  • 59
46
votes
3 answers

Is there a legal way for me to embed the Calibri font into a website for non Windows Vista/7 visitors?

I would like to use Calibri for my website. I would like to use the Calibri font for my website even when the visitor does not have the font installed (ie. non Windows Vista/7 visitors). Does Microsoft allow embedding of the Calibri font into a Web…
Jamie
  • 837
  • 2
  • 8
  • 8
45
votes
7 answers

Using jQuery to know when @font-face fonts are loaded?

I am using @font-face and I hate that Firefox shows the default font, waits to load the @font-face font, then replaces it. So the whole page flashes with the new font. Webkit browsers just don't display the text until the font is loaded and it is a…
Nic Hubbard
  • 41,587
  • 63
  • 251
  • 412
43
votes
4 answers

Downloadable font on firefox: bad URI or cross-site access not allowed

I'm a webmaster at http://www.beperk.com (I'm giving you the URL so you are able to check the problem) and I'm having lots of problems using @font-face in CSS. I want to use the foundicons from zurb dot com so I hosted them at Amazon S3. I set up…
dolarsrg
  • 905
  • 1
  • 9
  • 10
39
votes
8 answers

"NetworkError: 404 Not Found fontawesome-webfont.woff?v=4.0.3

I'm getting this error message whenever I load my application page. I'm using Apache. Following is my css code. url('../fonts/fontawesome-webfont.woff?v=4.0.3') format('woff') Firefox throws "NetworkError: 404 Not Found…
Zeshan
  • 2,496
  • 3
  • 21
  • 26
39
votes
2 answers

How do I use fontello fonts?

According to one source, this is how I use Fontello fonts: Now it's trivial to make a custom icon webfont, exactly for your needs. First, select the icons you like. Then update glyph codes (optional), and download your webfont bundle. Fontello…
Nancy Collier
  • 1,469
  • 4
  • 17
  • 21
38
votes
4 answers

How we can use @font-face in Less

In Less, it seems almost impossible to use @font-face selector. Less gives errors when I try to use font-family: my_font Here is how I try to use it: @font-face { font-family: my_font; src: url('http://contest-bg.net/lg.ttf'); } p { …
Alex Kolarski
  • 3,255
  • 1
  • 25
  • 35
1 2
3
…
99 100