Questions tagged [font-face]
@font-face is a CSS rule that allows the definition of embedded fonts within a webpage.
3,449
questions
604
votes
2
answers
801k
views
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 ...
- 6,518
584
votes
21
answers
1.0m
views
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 ...
- 9,422
551
votes
9
answers
289k
views
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? ...
- 89k
427
votes
14
answers
231k
views
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 ...
- 11.1k
391
votes
3
answers
187k
views
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 ...
- 4,901
354
votes
13
answers
190k
views
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....
- 7,088
344
votes
20
answers
366k
views
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 ...
- 10.7k
322
votes
19
answers
277k
views
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....
- 3,331
261
votes
6
answers
197k
views
Multiple font-weights, one @font-face query
I have to import the Klavika font and I've received it in multiple shapes and sizes:
Klavika-Bold-Italic.otf
Klavika-Bold.otf
Klavika-Light-Italic.otf
Klavika-Light.otf
Klavika-Medium-Italic.otf
...
- 8,783
244
votes
1
answer
217k
views
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 ...
- 7,235
209
votes
8
answers
472k
views
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 ...
- 2,974
208
votes
23
answers
433k
views
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 ...
- 2,548
198
votes
30
answers
229k
views
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 ...
- 7,170
151
votes
16
answers
189k
views
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
103k
views
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 ...
- 4,984
141
votes
2
answers
94k
views
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: ...
- 34.4k
135
votes
19
answers
102k
views
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 ....
- 13.4k
132
votes
10
answers
280k
views
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;...
- 1,173
125
votes
20
answers
94k
views
Drawing text to <canvas> 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). ...
- 1,251
113
votes
13
answers
129k
views
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 ...
- 23k
109
votes
5
answers
291k
views
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 ...
- 11.6k
108
votes
15
answers
118k
views
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 ...
- 1,271
99
votes
3
answers
248k
views
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-...
- 2,609
97
votes
3
answers
149k
views
@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 (...
- 3,019
88
votes
10
answers
84k
views
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: "...
- 9,562
87
votes
5
answers
165k
views
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 ...
- 8,657
79
votes
3
answers
27k
views
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 ...
- 1,397
73
votes
4
answers
60k
views
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-...
- 5,647
69
votes
7
answers
62k
views
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 ...
- 9,332
65
votes
9
answers
117k
views
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'...
- 1,341
62
votes
4
answers
107k
views
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:
<h1 style="...
- 8,913
61
votes
11
answers
51k
views
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.
...
- 611
59
votes
4
answers
36k
views
@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 ...
- 1,713
57
votes
15
answers
49k
views
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....
- 671
56
votes
5
answers
56k
views
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;...
- 3,394
53
votes
7
answers
83k
views
@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 ...
- 6,624
51
votes
6
answers
72k
views
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 ...
- 24.5k
51
votes
18
answers
54k
views
@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 ...
- 561
47
votes
6
answers
97k
views
Helvetica Neue Light with @font-face .. legal? [closed]
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 ...
- 3,932
46
votes
7
answers
43k
views
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 ...
- 42k
46
votes
3
answers
73k
views
Is there a legal way for me to embed the Calibri font into a website for non Windows Vista/7 visitors? [closed]
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 ...
- 837
43
votes
4
answers
55k
views
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 ...
- 905
42
votes
4
answers
179k
views
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
<!DOCTYPE html>
<html>
<head>
<style>
@font-...
- 1,423
41
votes
6
answers
30k
views
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 ...
- 1,799
40
votes
8
answers
83k
views
"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
"...
- 2,596
40
votes
1
answer
1k
views
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 ...
- 855
39
votes
2
answers
53k
views
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 (...
- 1,519
39
votes
3
answers
79k
views
@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: "...
- 9,210
38
votes
5
answers
82k
views
Changing font-family for placeholder
Is it posible for an input field to have one font-family and it's placeholder another?
I have tried to change font-family for the input's placeholder with an already defined @font-face in CSS but it's ...
- 1,620
38
votes
12
answers
92k
views
@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 ...
- 1,307