New Bulletproof @Font-Face Syntax Using Data Uris in Compass

New Bulletproof @font-face syntax using Data URIs in Compass

For those interested, the workaround mentioned in the question seems to work pretty well. It is probably a good idea to move the eot file attribute from data URI @font-face rule to the one using a standard url(). It appears sometimes the data: URL's generated are too long, which breaks the entire @font-face rule. Also, make sure the data URI rule is loaded last, since Firefox 5 and up seems to load only the last rule encountered. Hence, keep the inline fonts (woff, ttf, otf) in the last rule and the linked fonts (svg, eot) in the first, like so:

@include font-face('PTSans', font-files('ptsans/pts55fwebfont.svg#PTSansRegular') 'ptsans/pts55fwebfont.eot', normal, normal);
@include font-face('PTSans', inline-font-files('ptsans/pts55fwebfont.woff', woff, 'ptsans/pts55fwebfont.ttf', truetype), $weight: normal, $style: normal);

Bulletproof @Font-Face syntax subtleties

Icomoon appends query string parameters (everything after the ?, in this case -w9xgwa), to either distinguish the font you were served from others generated, or more likely, to break the cache when your font is updated. Your font when served to users is likely cached (so they don't have to download it each time they view your page). Appending the query string, and changing it will cause the user agent to download it again.

I would recommend hard-coding the css generated by icomoon, and changing it when you update the font. If you don't plan on ever changing it (or needing to break the cache of a user viewing your font), then your probably fine using the mixin generated version.

Compass font-face mixin bold

acarabott, I've made a commit to compass for this some time ago, and it seems to ship with 0.12.alpha.

Notice the $weight and $style parameters here:
http://beta.compass-style.org/reference/compass/css3/font_face/

Compass font-face outputs wrong path to font file

Set http_fonts_path or :relative assets, true. :)

@include font-face SCSS issue

Random numbers were added because browser cache fonts base on url, then these random numbers cause every time you compile your codes and put it in your html, it download fonts again.

I have Visual Studio 2013 and compile your code with sass and the result is:

@font-face {
  font-family: "NexaBold";
  src: font-files("nexa_bold-webfont.woff", "nexa_bold-webfont.ttf", "nexa_bold-webfont.svg", "nexa_bold-webfont.eot"); }

and here is my compass source for font-face mixin:

@mixin font-face(
  $name, 
  $font-files, 
  $eot: false,
  $weight: false,
  $style: false
) {
  $iefont: unquote("#{$eot}?#iefix");
  @font-face {
    font-family: quote($name);
    @if $eot {
      src: font-url($eot);
      $font-files: font-url($iefont) unquote("format('eot')"), $font-files; 
    }
    src: $font-files;
    @if $weight {
      font-weight: $weight;
    }
    @if $style {
      font-style: $style;
    }
  }
}

if you look my compass version doesn't add any random number at the end of file path.

I myself suggest you to use font-face without compass, use code below:

@font-face {
    font-family: 'IranSans';
    src: url('/css/fonts/IranSans.eot'); /* IE9 Compat Modes */
    src: url('/css/fonts/IranSans.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('/css/fonts/IranSans.woff') format('woff'), /* Modern Browsers */
    url('/css/fonts/IranSans.ttf') format('truetype'), /* Safari, Android, iOS */
    url('/css/fonts/IranSans.svg') format('svg'); /* Legacy iOS */
}

when compass save scss file to css file the @font face ( name, font-file( ) ) doesn't work properly

I found the solution.

If somebody have same problem as I have,

It's probably "config.rb" need to be uncomment relative_assets = "true"

What I mean is "REMOVE #" from #relative_assets = "true"

but don't do it if you use http_font_dir

---

Related Topics