UPDATE: I&#39;ve written a blog post about what I&#39;ve learned about this issue.  I still don&#39;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][1]

I have a page where I&#39;m using @font-face to import a custom font for icons.  The icons are created with a class:

    .icon {font-family: &#39;icon-font&#39;;}
    .icon:before {content: &#39;A&#39;;}

And voila, I have whatever icon is used for &quot;A&quot;.  Pretty standard stuff, works in all browsers, including IE8.  

However, in IE8, I have a bizarre bug.  When the page loads, the font is not working.  Instead of icons, I have letters all over the place.  Once I hover OVER the page (body), half the letters become icons.  The rest become icons when I hover over them.  

SO the font-face is embedding properly.  The font-family and content properties are both working, but something else is causing the icons to load only after hover.

So there&#39;s some sort of bug with @font-face in IE8 when you try to use the font with :before{content: &#39;a&#39;} but I have no idea what the bug is.

I&#39;ve searched for hours on here for a similar bug/IE8 issue/anything, but I&#39;ve had no luck and I&#39;m about to go crazy.  ANY suggestions?  

Let me know if I can provide anymore info that might be helpful. 

EDIT: Updated the broken link to the blog post.


  [1]: http://andymcfee.com/2012/04/04/icon-fonts-pseudo-elements-and-ie8

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

Is it possible to load an external font via inline CSS?

Note: I&#39;m *not* talking about using an external CSS file with a `@font-face` definition, but rather something like the following:

    &lt;h1 style=&quot;font-family:myfont;
        src:(&#39;http://example.com/font/myfont.tff&#39;)&quot;&gt;test&lt;/h1&gt;

Loading an external font via inline CSS

I noticed this `info log` began to appear in Google Chrome Dev (Version 55.0.2883.18 dev) and I can&#39;t imagine why.

&gt; Slow network is detected. Fallback font will be used while loading: http://font-path.extension`

It appears on all websites that use `font-face`, even on local pages and Chrome extensions.

[![Print screen of a local website][1]](https://i.stack.imgur.com/OrX5p.png)

  [1]: https://i.stack.imgur.com/OrX5p.png



Why does this &quot;Slow network detected...&quot; log appear in Chrome?

In my ASP.NET MVC application, I&#39;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 RegisterBundles(BundleCollection bundles) {
        RegisterStyles(bundles);
        BundleTable.EnableOptimizations = true;
    }

    private static void RegisterStyles(BundleCollection bundles) {
    bundles.Add(new StyleBundle(&quot;~/BundleStyles/css&quot;).Include(
		&quot;~/Content/Styles/bootstrap/bootstrap.css&quot;,
		&quot;~/Content/Styles/reset.css&quot;,
        &quot;~/Content/Styles/gridpack/gridpack.css&quot;,

        &quot;~/Content/Styles/fontFaces.css&quot;,
        &quot;~/Content/Styles/icons.css&quot;,

        &quot;~/Content/Styles/inputs.css&quot;,
        &quot;~/Content/Styles/common.css&quot;,
        &quot;~/Content/Styles/header.css&quot;,
        &quot;~/Content/Styles/footer.css&quot;,
        &quot;~/Content/Styles/cslider/slider-animations.css&quot;,
        &quot;~/Content/Styles/cslider/slider-base.css&quot;));
    }

And here is the css for fonts.

       @font-face {
          font-family: ProximaNova;
          src: url(&#39;../Fonts/ProximaNova/ProximaNova-Bold.otf&#39;) format(&#39;opentype&#39;);
          font-weight: bold;
          font-style: normal;
        }

Here is how CSS is beeing referenced in the page.

    &lt;link href=&quot;/BundleStyles/css?v=pANk2exqBfQj5bGLJtVBW3Nf2cXFdq5J3hj5dsVW3u01&quot; rel=&quot;stylesheet&quot;/&gt;

However, when i checked with Chrome Debugger tool, the font files are not loading to the page and my page looks bad with wrong fonts.

What am I doing wrong?

Font files are not loading with ASP.NET Bundles

[This exception occurs in here.][1] You can reproduce it in IE11. So far I have not found the cause of the issue. Any ideas why this is being caused?

![enter image description here][2]

&gt; CSS3114: @font-face failed OpenType embedding permission check.
&gt; Permission must be Installable. File:
&gt; 53d9eae5-63b4-48d7-a5b8-3419455028bb.ttf

The web site is running on Azure Websites platform and is using ASP.NET MVC 5.


  [1]: http://itmcup-stg.azurewebsites.net/
  [2]: http://i.stack.imgur.com/jpmqs.png

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

I&#39;m trying to load a font in my CSS file using `@font-face` but the font never loads. This is my directory structure.

[![enter image description here][1]][1]

Then in `webpack.config.js` I have the loader to get fonts.

    var path = require(&#39;path&#39;);
    var webpack = require(&#39;webpack&#39;);
    
    module.exports = {
      devtool: &#39;eval&#39;,
      entry: [
        &quot;./index.js&quot;
      ],
      output: {
        path: __dirname+&quot;/build&quot;,
        filename: &quot;main.js&quot;
      },
      plugins: [
        new webpack.NoErrorsPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin()
      ],
      resolve: {
        extensions: [&#39;&#39;, &#39;.js&#39;, &#39;.jsx&#39;]
      },
      module: {
          loaders: [
              { test: /\.js$/, loaders: [&#39;react-hot&#39;, &#39;babel-loader&#39;], exclude: /node_modules/ },
              { test: /\.jsx?$/, loaders: [&#39;react-hot&#39;, &#39;babel-loader&#39;], exclude: /node_modules/ },
              { test: /\.svg$/, loader: &quot;raw&quot; },
              { test: /\.css$/, loader: &quot;style-loader!css-loader&quot; },
              { test: /\.(eot|svg|ttf|woff|woff2)$/, loader: &#39;file?name=src/css/[name].[ext]&#39;}
    
          ]
      }
    };

Inside my CSS file I have this:

    @font-face {
      font-family: &#39;Darkenstone&#39;;
      src: url(&#39;./Darkenstone.woff&#39;) format(&#39;woff&#39;);
    }
    
    body {
      background-color: green;
      font-size: 24px;
      font-family: &#39;Darkenstone&#39;;
    }


Finally, I&#39;m calling my CSS file in my `index.js` with:

    import &#39;./src/css/master.css&#39;;

Everything works but de font never loads.


  [1]: https://i.stack.imgur.com/D2QPK.png

Load fonts with Webpack and font-face

I want to create a close button using CSS only.

I&#39;m sure I&#39;m not the first to do this, so does anyone know which font has an &#39;x&#39; the same width as height, so that it can be used cross-browser to look like a close button?

Unicode character for &quot;X&quot; cancel / close?

Summary
---
I&#39;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 doesn&#39;t**. Has anyone seen this behavior? 

The server hosting the font is sending the proper content-type=&quot;application/vnd.ms-fontobject&quot;

I&#39;ve tried multiple fonts, so it&#39;s not specific to the font.

The fonts were generated over at [Font Squirrel][1]



CSS Syntax
-------
    @font-face {
	font-family: &#39;GothamCondensedBold&#39;;
	src:url(&#39;path/to/fontgothmbcd-webfont.eot&#39;);
	src:url(&#39;path/to/fontgothmbcd-webfont.eot?#iefix&#39;) format(&#39;embedded-opentype&#39;),
		url(&#39;path/to/fontgothmbcd-webfont.woff&#39;) format(&#39;woff&#39;),
		url(&#39;path/to/fontgothmbcd-webfont.ttf&#39;) format(&#39;truetype&#39;),
		url(&#39;path/to/fontgothmbcd-webfont.svg#GothamCondensedBold&#39;) format(&#39;svg&#39;);
	font-weight: normal;
	font-style: normal;
    }

Sample Page
--
http://gregnettles.net/dev/font-face-test.html


  [1]: http://www.fontsquirrel.com/fontface/generator

@font-face EOT not loading over HTTPS

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 chrome wrong? is `application/svg+xml` accepted somehow?

I guess this is still a gray area in HTML5 but someone here might know.

Right mime type for SVG images with fonts embedded

The following code works in Google Chrome beta as well as IE 7. However, Firefox seems to have a problem with this. I&#39;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 imports.

But this is all just static HTML and there&#39;s no question of cross-domain.

On my landing-page.html I do a CSS import like so:
 
    &lt;link rel=&quot;stylesheet&quot; href=&quot;../css/main.css&quot; type=&quot;text/css&quot; media=&quot;screen, projection&quot; /&gt;

Within the main.css I have another imports like so:

    @import url(&quot;reset.css&quot;);
    @import url(&quot;style.css&quot;);
    @import url(&quot;type.css&quot;);

and within the type.css I have the following declarations:

    @font-face {
    	font-family: &quot;DroidSerif Regular&quot;;
    		src: url(&quot;font/droidserif-regular-webfont.eot&quot;);
    		src: local(&quot;DroidSerif Regular&quot;), 
    				url(&quot;font/droidserif-regular-webfont.woff&quot;) format(&quot;woff&quot;), 
    				url(&quot;font/droidserif-regular-webfont.ttf&quot;)     format(&quot;truetype&quot;), 
    				url(&quot;font/droidserif-regular-webfont.svg#webfontpB9xBi8Q&quot;)     format(&quot;svg&quot;); 
    	font-weight: normal; font-style: normal; }
    @font-face {
    	font-family: &quot;DroidSerif Bold&quot;;
    	src: url(&quot;font/droidserif-bold-webfont.eot&quot;);
    	src: local(&quot;DroidSerif Bold&quot;), 
    		url(&quot;font/droidserif-bold-webfont.woff&quot;) format(&quot;woff&quot;), 
    		url(&quot;font/droidserif-bold-webfont.ttf&quot;) format(&quot;truetype&quot;), 
    		url(&quot;font/droidserif-bold-webfont.svg#webfontpB9xBi8Q&quot;) format(&quot;svg&quot;);
    	font-weight: normal; font-style: normal; }

    body { font-family: &quot;DroidSerif Regular&quot;, serif; }
    h1 { font-weight: bold; font-family: &quot;DroidSerif Bold&quot;, serif; }


I have a directory called &quot;font&quot; in the same location as type.css. This font directory contains all the woff/ttf/svg files etc.

I&#39;m stumped on this one. **It works in Chrome and IE but not on Firefox**. How is this possible? What am I missing?

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

I have to import the Klavika font and I&#39;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
    Klavika-Medium.otf
    Klavika-Regular-Italic.otf
    Klavika-Regular.otf
Now I would like to know if it&#39;s possible to import those into CSS with just one `@font-face`-query, where I&#39;m defining the `weight` in the query. I want to avoid copy/pasting the query 8 times.

So something like:

    @font-face {
      font-family: &#39;Klavika&#39;;
      src: url(../fonts/Klavika-Regular.otf), weight:normal;
      src: url(../fonts/Klavika-Bold.otf), weight:bold;
    }

Multiple font-weights, one @font-face query

I&#39;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 the font, if possible.

Using custom fonts using CSS?

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:

https://stackoverflow.com/questions/2856502/css-font-face-not-working-with-firefox-but-working-with-chrome-and-ie

With the introduction of Amazon S3 CORS, is there a solution using CORS to address the font loading issue in Firefox?

edit: It would be great to see a sample of the S3 CORS configuration.

edit2: I have found a working solution without actually understanding what it did. If anyone could provide more detailed explanations about the configs and the background magic that happens on Amazon&#39;s interpretation of the config, it will be greatly appreciated, as with nzifnab who put up a bounty for it.

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

I&#39;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: &#39;junctionregularRegular&#39;;
    	src: url(&#39;Junction-webfont.eot&#39;);
    	src: local(&#39;☺&#39;), 
            url(&#39;Junction-webfont.woff&#39;) format(&#39;woff&#39;), 
            url(&#39;Junction-webfont.ttf&#39;) format(&#39;truetype&#39;), 
            url(&#39;Junction-webfont.svg#webfontoNEpZXy2&#39;) format(&#39;svg&#39;);
    }

Now, the smiley face thing has me stumped.  But so too does the number of urls in the src - why do they recommend so many files and will they all be sent to the browser when a page is rendered?  Is there any harm in removing all but the .ttf?

CSS @font-face - what does &quot;src: local(&#39;☺&#39;)&quot; mean?

I&#39;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&#39;s not a license violation.

**I converted the .ttf/.otf versions of font to .woff, .eot and .svg, so to target all major browsers.** The @font-face syntax I used is basically the bulletproof one from [Font Spring][1]:

    @font-face {
    	font-family: &#39;MyFontFamily&#39;;
        src: url(&#39;myfont-webfont.eot&#39;);
    	src: url(&#39;myfont-webfont.eot?#iehack&#39;) format(&#39;eot&#39;), 
    	     url(&#39;myfont-webfont.woff&#39;) format(&#39;woff&#39;), 
    	     url(&#39;myfont-webfont.ttf&#39;)  format(&#39;truetype&#39;),
    	     url(&#39;myfont-webfont.svg#svgFontName&#39;) format(&#39;svg&#39;);
    	}

I modified the HTTP headers (added Access-Control-Allow-Origin = &quot;*&quot;) to allow cross-domain references. **In FF and Chrome it works perfectly, but in IE9 I get:**

    CSS3111: @font-face encountered unknown error.  
    myfont-webfont.woff
    CSS3114: @font-face failed OpenType embedding permission check. Permission must be Installable. 
    myfont-webfont.ttf

I noticed that when converting font from .ttf/.otf to .woff I also get an **.afm** file, but I don&#39;t have a clue whether it&#39;s important or not...

Any ideas how to work it out?

[Edit] - I host my websites (fonts too, but under separate directory and subdomain for static content) under **IIS 7.5**

  [1]: http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax

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

Is it possible to preload or otherwise cache @font-face fonts, most likely with javascript, before the page loads so you don&#39;t get that ugly jump when the page finally does load?

Preloading @font-face fonts?

Is there a way to add some custom font on a website without using images, [Flash][1] 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&#39;t find the right way to add that font on the server. And how do I include that font with CSS into the HTML? Is this possible to do without graphics?

  [1]: http://en.wikipedia.org/wiki/Adobe_Flash


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

I want to use a single font named &quot;Algerian&quot; across my whole website. So, I need to change all HTML tags and I don&#39;t want to write different code for different tags like: 

    button{font-family:Algerian;}
    div{font-family:Algerian;}

The method written below is also highly discouraged:

    div,button,span,strong{font-family:Algerian;}

Applying a single font to an entire website with CSS

I&#39;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 ?


Using .otf fonts on web browsers

When I draw a text in a canvas with a typeface that is loaded via @font-face, the text doesn&#39;t show correctly. It doesn&#39;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 the first drawing with the typeface. After then everything works fine.

Is it the standard behavior or something?

Thank you.

PS: Following is the source code of the test case

    &lt;!DOCTYPE html&gt;
    &lt;html&gt;
        &lt;head&gt;
            &lt;meta charset=&quot;UTF-8&quot;&gt;
            &lt;title&gt;@font-face and &amp;lt;canvas&amp;gt;&lt;/title&gt;
            &lt;style id=&quot;css&quot;&gt;
    @font-face {
        font-family: &#39;Press Start 2P&#39;;
        src: url(&#39;fonts/PressStart2P.ttf&#39;);
    }
            &lt;/style&gt;
            &lt;style&gt;
    canvas, pre {
        border: 1px solid black;
        padding: 0 1em;
    }
            &lt;/style&gt;
        &lt;/head&gt;
        &lt;body&gt;
            &lt;h1&gt;@font-face and &amp;lt;canvas&amp;gt;&lt;/h1&gt;
            &lt;p&gt;
                Description: click the button several times, and you will see the problem.
                The first line won&#39;t show at all, or with a wrong typeface even if it does.
                &lt;strong&gt;If you have visited this page before, you may have to refresh (or reload) it.&lt;/strong&gt;
            &lt;/p&gt;
            &lt;p&gt;
                &lt;button id=&quot;draw&quot;&gt;#draw&lt;/button&gt;
            &lt;/p&gt;
            &lt;p&gt;
                &lt;canvas width=&quot;250&quot; height=&quot;250&quot;&gt;
                    Your browser does not support the CANVAS element.
                    Try the latest Firefox, Google Chrome, Safari or Opera.
                &lt;/canvas&gt;
            &lt;/p&gt;
            &lt;h2&gt;@font-face&lt;/h2&gt;
            &lt;pre id=&quot;view-css&quot;&gt;&lt;/pre&gt;
            &lt;h2&gt;Script&lt;/h2&gt;
            &lt;pre id=&quot;view-script&quot;&gt;&lt;/pre&gt;
            &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js&quot;&gt;&lt;/script&gt;
            &lt;script id=&quot;script&quot;&gt;
    var x = 30,
        y = 10;

    $(&#39;#draw&#39;).click(function () {
        var canvas = $(&#39;canvas&#39;)[0],
            ctx = canvas.getContext(&#39;2d&#39;);
        ctx.font = &#39;12px &quot;Press Start 2P&quot;&#39;;
        ctx.fillStyle = &#39;#000&#39;;
        ctx.fillText(&#39;Hello, world!&#39;, x, y += 20);
        ctx.fillRect(x - 20, y - 10, 10, 10);
    });
            &lt;/script&gt;
            &lt;script&gt;
    $(&#39;#view-css&#39;).text($(&#39;#css&#39;).text());
    $(&#39;#view-script&#39;).text($(&#39;#script&#39;).text());
            &lt;/script&gt;
        &lt;/body&gt;
    &lt;/html&gt;

Drawing text to &lt;canvas&gt; with @font-face does not work at the first time

I want change the default font of webview to a custom font. I&#39;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&#39;t set webview&#39;s default font to my font.

This is what I tried:

    Typeface font = Typeface.createFromAsset(getAssets(), &quot;myfont.ttf&quot;); 
    private WebView webview;
    WebSettings webSettings = webView.getSettings();
    webSettings.setFixedFontFamily(font);

Can anyone correct this or suggest any other method to change webview&#39;s default font to a custom font?

Thanks!


How to change font face of Webview in Android?

I am designing a website (e.g. mywebsite.com) and this site loads font-face fonts from another site (say anothersite.com). I was having problems with the font face font loading in Firefox and I read on [this blog][1]: 

&gt; Firefox (which supports @font-face
&gt; from v3.5) does not allow cross-domain
&gt; fonts by default.  This means the font
&gt; must be served up from the same domain
&gt; (and sub-domain) unless you can add an
&gt; “Access-Control-Allow-Origin” header
&gt; to the font.

How can I set the Access-Control-Allow-Origin header to the font?

  [1]: http://geoff.evason.name/2010/05/03/cross-domain-workaround-for-font-face-and-firefox/

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

I&#39;m looking at the [MDC page for the @font-face CSS rule][1], but I don&#39;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 {
        font-family: &quot;DejaVu Sans&quot;;
        src: url(&quot;./fonts/DejaVuSans.ttf&quot;) format(&quot;ttf&quot;);
    }
    strong {
        font-family: &quot;DejaVu Sans&quot;;
        font-weight: bold;
    }

The browser will not know which font to be used for bold (because that file is DejaVuSansBold.ttf), so it will default to something I probably don&#39;t want. How can I tell the browser all the different variants I have for a certain font?

  [1]: https://developer.mozilla.org/en/CSS/@font-face


How to add multiple font files for the same font?

I&#39;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 delay, by delaying the page rendering until after fonts have loaded or similar.

Wait for fonts to load before rendering web page

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 Chromium is downloading it every time!

My CSS code, based on [font squirrel](http://www.fontsquirrel.com) and [that question](https://stackoverflow.com/questions/2436749/how-to-define-bold-italic-using-font-face) look like this:

    @font-face {
    	font-family: &#39;DejaVu Serif&#39;;
    	src: url(&#39;DejaVuSerif-webfont.eot&#39;);
    	src: local(&#39;DejaVu Serif&#39;), url(&#39;DejaVuSerif-webfont.woff&#39;) format(&#39;woff&#39;), url(&#39;DejaVuSerif-webfont.ttf&#39;) format(&#39;truetype&#39;), url(&#39;DejaVuSerif-webfont.svg#webfontCFu7RF0I&#39;) format(&#39;svg&#39;);
    	font-weight: normal;
    	font-style: normal;
    }
    
    /* ... @font-face definitions for italic and bold omitted ... */
    
    @font-face {
    	font-family: &#39;DejaVu Serif&#39;;
    	src: url(&#39;DejaVuSerif-BoldItalic-webfont.eot&#39;);
    	src: local(&#39;DejaVu Serif Bold Italic&#39;), url(&#39;DejaVuSerif-BoldItalic-webfont.woff&#39;) format(&#39;woff&#39;), url(&#39;DejaVuSerif-BoldItalic-webfont.ttf&#39;) format(&#39;truetype&#39;), url(&#39;DejaVuSerif-BoldItalic-webfont.svg#webfontQAewh7pf&#39;) format(&#39;svg&#39;);
    	font-weight: bold;
    	font-style: italic;
    }


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

How can I use more than `@font-face` rule in my CSS?

I&#39;ve inserted this into my stylesheet:

    body {
        background: #fff url(../images/body-bg-corporate.gif) repeat-x;
        padding-bottom: 10px;
        font-family: &#39;GestaRegular&#39;, Arial, Helvetica, sans-serif;
    }

    @font-face {
        font-family: &#39;GestaReFogular&#39;;
        src: url(&#39;gestareg-webfont.eot&#39;);
        src: local(&#39;☺&#39;),
             url(&#39;gestareg-webfont.woff&#39;) format(&#39;woff&#39;),
             url(&#39;gestareg-webfont.ttf&#39;) format(&#39;truetype&#39;),
             url(&#39;gestareg-webfont.svg#webfontg8dbVmxj&#39;) format(&#39;svg&#39;);
    }

This currently only applies for the whole body of text on the site. But, I would like to specify `h1` to use a different font. How can I do this?

Use multiple @font-face rules in CSS

I&#39;m using `@font-face` on my company&#39;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&#39;ve tried with the fonts in the css folder and even giving the entire url for the font. If remove those fonts from my css file I don&#39;t get a 404 so I know it&#39;s not a syntax error.

Also, I used fontsquirrels tool to create the `@font-face` fonts and code:

    


&lt;!-- language: lang-css --&gt;

    @font-face {
      font-family: &#39;LaurenCBrownRegular&#39;;
      src: url(&#39;/laurencb-webfont.eot&#39;);
      src: local(&#39;☺&#39;), 
        url(&#39;/laurencb-webfont.woff&#39;) format(&#39;woff&#39;), 
        url(&#39;/laurencb-webfont.ttf&#39;) format(&#39;truetype&#39;), 
        url(&#39;/laurencb-webfont.svg#webfontaaFhOfws&#39;) format(&#39;svg&#39;);
      font-weight: normal;
      font-style: normal;
    }

    @font-face {
      font-family: &#39;FontinSansRegular&#39;;
      src: url(&#39;/fontin_sans_r_45b-webfont.eot&#39;);
      src: local(&#39;☺&#39;), 
        url(&#39;/fontin_sans_r_45b-webfont.woff&#39;) format(&#39;woff&#39;), 
        url(&#39;/fontin_sans_r_45b-webfont.ttf&#39;) format(&#39;truetype&#39;), 
        url(&#39;/fontin_sans_r_45b-webfont.svg#webfontKJHTwWCi&#39;) format(&#39;svg&#39;);
      font-weight: normal;
      font-style: normal;
    }




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

I&#39;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: &quot;FontAwesome&quot;;
      src: url(&#39;../font/fontawesome-webfont.eot&#39;);
      src: url(&#39;../font/fontawesome-webfont.eot?#iefix&#39;) format(&#39;eot&#39;), url(&#39;../font/fontawesome-webfont.woff&#39;) format(&#39;woff&#39;), url(&#39;../font/fontawesome-webfont.ttf&#39;) format(&#39;truetype&#39;), url(&#39;../font/fontawesome-webfont.svg#FontAwesome&#39;) format(&#39;svg&#39;);
      font-weight: normal;
      font-style: normal;
    }

How do I know that these files have been loaded and I&#39;m finally able to show the icons?

**Edit:**
I&#39;m not talking when the page is loaded (onload), because the font could be loaded before the whole page.

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

I&#39;m sure I&#39;m missing something really straight forward. Been using a single custom font with normal font face:

&lt;!-- language: lang-css --&gt;

    @font-face {
        font-family: CustomFont;
        src: url(&#39;CustomFont.ttf&#39;);
    }

All works fine when I use it but if I want to add another custom font what do I do? I&#39;ve tried separating by comma the next one or adding a whole other font face but can&#39;t get the second font working.

Use multiple custom fonts using @font-face?

I have a warning in Google for my font-face:

**Resource interpreted as Font but transferred with MIME type application/octet-stream: &quot;.../Content/Fonts/iconFont.ttf&quot;.**

It works even if I have this warning but I prefer avoid this warning. 

Here is my declaration:

    @font-face {
      font-family: &#39;iconFont&#39;;
         src: url(&#39;../Fonts/iconFont.eot?#iefix&#39;) format(&#39;embedded-opentype&#39;), 
         url(&#39;../Fonts/iconFont.svg#iconFont&#39;) format(&#39;image/svg+xml&#39;), 
         url(&#39;../Fonts/iconFont.woff&#39;) format(&#39;font/x-woff&#39;), 
         url(&#39;../Fonts/iconFont.ttf&#39;) format(&#39;truetype&#39;);
      font-weight: normal;
      font-style: normal;
    }

I already search on other posts but no luck so far.

Please note that my server is IIS from Microsoft.

Any idea how can I avoid this warning?

Thanks.

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

Up until now, I&#39;ve used Paul Irish&#39;s [bulletproof font-face syntax][1]

But I was just looking at support for .woff and .woff2 files on [caniuse][2] and it says woff is supported in IE9+. Most articles on this topic are from around 2009, which at the time of this writing was a full 7 years ago. Do we really need to keep declaring ttf, otf, eot, and svg when woff now enjoys such wide support? 


  [1]: http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/
  [2]: http://caniuse.com/#feat=woff

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

I have some fonts being configured in my Scss file like so:

    @font-face {
      font-family: &#39;Icomoon&#39;;
      src: asset-url(&#39;icoMoon.eot?#iefix&#39;, font) format(&#39;embedded-opentype&#39;),
           asset-url(&#39;icoMoon.woff&#39;, font) format(&#39;woff&#39;),
           asset-url(&#39;icoMoon.ttf&#39;, font)  format(&#39;truetype&#39;),
           asset-url(&#39;icoMoon.svg#Icomoon&#39;, font) format(&#39;svg&#39;);
    }

The actual font file are stored in /app/assets/fonts/&lt;filename.ext&gt;

I have added `config.assets.paths &lt;&lt; Rails.root.join(&quot;app&quot;, &quot;assets&quot;, &quot;fonts&quot;)` to my application.rb file

and the compile CSS source is as follows:

    @font-face {
      font-family: &#39;Icomoon&#39;;
      src: url(/assets/icoMoon.eot?#iefix) format(&quot;embedded-opentype&quot;), url(/assets/icoMoon.woff) format(&quot;woff&quot;), url(/assets/icoMoon.ttf) format(&quot;truetype&quot;), url(/assets/icoMoon.svg#Icomoon) format(&quot;svg&quot;);
    }

But when I run the app the font files are not being found. The logs:

&gt; Started GET &quot;/assets/icoMoon.ttf&quot; for 127.0.0.1 at 2012-06-05 23:21:17 +0100
&gt; Served asset /icoMoon.ttf - 404 Not Found (13ms)

Why isn&#39;t the asset pipeline flattening the font files down into just /assets?

Any ideas people?

Kind regards,
Neil


**Extra info:**

When checking the rails console for assets paths and assetprecompile I get the following:

    1.9.2p320 :001 &gt; y Rails.application.config.assets.precompile
    ---
    - !ruby/object:Proc {}
    - !ruby/regexp /(?:\/|\\|\A)application\.(css|js)$/
    - .svg
    - .eot
    - .woff
    - .ttf
    =&gt; nil



    1.9.2p320 :002 &gt; y Rails.application.config.assets.paths
    ---
    - /Users/neiltonge/code/neiltonge/app/assets/fonts
    - /Users/neiltonge/code/neiltonge/app/assets/images
    - /Users/neiltonge/code/neiltonge/app/assets/javascripts
    - /Users/neiltonge/code/neiltonge/app/assets/stylesheets
    - /Users/neiltonge/code/neiltonge/vendor/assets/images
    - /Users/neiltonge/code/neiltonge/vendor/assets/javascripts
    - /Users/neiltonge/code/neiltonge/vendor/assets/stylesheets
    - /Users/neiltonge/.rvm/gems/ruby-1.9.2-p320@neiltonge/gems/jquery-rails-2.0.0/vendor/assets/javascripts
    - /Users/neiltonge/.rvm/gems/ruby-1.9.2-p320@neiltonge/gems/coffee-rails-3.2.1/lib/assets/javascripts
    - /Users/neiltonge/.rvm/gems/ruby-1.9.2-p320@neiltonge/gems/bourbon-1.3.0/app/assets/stylesheets
    - !ruby/object:Pathname
      path: /Users/neiltonge/code/neiltonge/app/assets/fonts
     =&gt; nil

Using fonts with Rails asset pipeline

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?

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

What tab in chrome inspector shows the font files you&#39;re loading via font-face? I can&#39;t find it under resources. I&#39;m having an issue where one group of font-family files are loading, but another font-family is not. I have checked everything from going directly to the URL and seeing they are indeed present, but I would like to look in the inspector and see it loading the one font-family but not the other. Is this possible with chrome?

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

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 that contained the various file types for each font. I also placed a css file called font-face.css on the root of the subdomain and filled it with `@font-face` declarations for each of the fonts, the fonts are linked with an absolute link so that they can be used from anywhere.

My issue is that it seems that I can only use the fonts on that subdomain where they are located, on my other sites the font does not show. Using firebug I determined that the font-face.css file was successfully being linked to and loaded. So why does the font not correctly load? Is there protection on the font files or something? I am using all fonts that I should be allowed to do this with, so I don&#39;t see why this is occurring. Maybe it is an apache issue, but I can download the font just fine when I link to it.

Oh, and just to clarify, I am not violating any copyrights by setting this up, all the fonts I am using are licensed to allow this sort of thing. I would however like to set up a way that only I can have access to this repository of fonts but that&#39;s another project.

All Font Face Solutions on Gang of Coders

Total of 35 Font Face Solutions