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

CSS @font-face - what does "src: local('☺')" mean?

I'm using @font-face for the first time and downloaded a font-kit from fontsquirrel The code they recommend inserting into my CSS is: @font-face { font-family: 'junctionregularRegular'; src: url('Junction-webfont.eot'); src: local('☺'),…
stephenmurdoch
  • 34,024
  • 29
  • 114
  • 189
135
votes
19 answers

Make Adobe fonts work with CSS3 @font-face in IE9

I'm in the process of building a small intranet application and try, with no luck, to use Adobe font I purchased lately. As I was informed, in our case it's not a license violation. I converted the .ttf/.otf versions of font to .woff, .eot and .svg,…
Piotr Szmyd
  • 13,371
  • 6
  • 44
  • 61
127
votes
10 answers

Applying a single font to an entire website with CSS

I want to use a single font named "Algerian" across my whole website. So, I need to change all HTML tags and I don't want to write different code for different tags like: button{font-family:Algerian;} div{font-family:Algerian;} The method written…
Michelle Smith
  • 1,123
  • 2
  • 10
  • 17
124
votes
20 answers

Drawing text to with @font-face does not work at the first time

When I draw a text in a canvas with a typeface that is loaded via @font-face, the text doesn't show correctly. It doesn't show at all (in Chrome 13 and Firefox 5), or the typeface is wrong (Opera 11). This type of unexpected behavior occurs only at…
lemonedo
  • 1,241
  • 2
  • 9
  • 3
109
votes
5 answers

How to add an Access-Control-Allow-Origin header

I am designing a website (e.g. mywebsite.example) and this site loads font-face fonts from another site (say anothersite.example). I was having problems with the font face font loading in Firefox and I read on this blog: Firefox (which supports…
Mazatec
  • 11,481
  • 23
  • 72
  • 108
108
votes
15 answers

How to change font face of Webview in Android?

I want change the default font of webview to a custom font. I'm using webview in developing an bilingual browser app for Android. I tried getting an instance of custom typeface by placing my custom font in assets. But still couldn't set webview's…
Dhanika
  • 1,271
  • 2
  • 9
  • 13
107
votes
13 answers

Wait for fonts to load before rendering web page

I'm using @font-face to embed fonts in my website. First the text renders as the system default, and then (once the font file has loaded presumably) the correct font renders a fraction of a second later. Is there a way to minimise/get rid of this…
wheresrhys
  • 22,558
  • 19
  • 94
  • 162
99
votes
3 answers

Use multiple @font-face rules in CSS

How can I use more than @font-face rule in my CSS? I've inserted this into my stylesheet: body { background: #fff url(../images/body-bg-corporate.gif) repeat-x; padding-bottom: 10px; font-family: 'GestaRegular', Arial, Helvetica,…
Tim
  • 2,589
  • 6
  • 34
  • 39
94
votes
3 answers

@font-face src: local - How to use the local font if the user already has it?

What is the right way to use @font-face so that the browser will not download the font if the user already have it? I am using @font-face to define DejaVu, which is already installed on my system (linux). Firefox is not downloading the font, but…
dbarbosa
  • 2,969
  • 5
  • 25
  • 29
88
votes
10 answers

How to know if a font (@font-face) has already been loaded?

I'm using Font-Awesome, but while the font files are not loaded, the icons appear with . So, I want these icons to have display:none while files are not loaded. @font-face { font-family: "FontAwesome"; src:…
Shankar Cabus
  • 9,302
  • 7
  • 33
  • 43
86
votes
5 answers

Use multiple custom fonts using @font-face?

I'm sure I'm missing something really straight forward. Been using a single custom font with normal font face: @font-face { font-family: CustomFont; src: url('CustomFont.ttf'); } All works fine when I use it but if I want to add another…
James MV
  • 8,569
  • 17
  • 65
  • 96
76
votes
3 answers

Are eot, ttf, and svg still necessary in the font-face declaration?

Up until now, I've used Paul Irish's bulletproof font-face syntax But I was just looking at support for .woff and .woff2 files on caniuse and it says woff is supported in IE9+. Most articles on this topic are from around 2009, which at the time of…
paulcpederson
  • 1,367
  • 1
  • 9
  • 13
71
votes
3 answers

Where to see font files loaded by chrome in the inspector?

What tab in chrome inspector shows the font files you're loading via font-face? I can't find it under resources. I'm having an issue where one group of font-family files are loading, but another font-family is not. I have checked everything from…
o_O
  • 5,527
  • 12
  • 52
  • 90
68
votes
7 answers

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

I have a warning in Google for my font-face: Resource interpreted as Font but transferred with MIME type application/octet-stream: ".../Content/Fonts/iconFont.ttf". It works even if I have this warning but I prefer avoid this warning. Here is my…
Bronzato
  • 9,438
  • 29
  • 120
  • 212
61
votes
4 answers

Loading an external font via inline CSS

Is it possible to load an external font via inline CSS? Note: I'm not talking about using an external CSS file with a @font-face definition, but rather something like the following:

Randomize
  • 8,651
  • 18
  • 78
  • 133

1
2
3
…
99 100