CODEWITHSUNDEEP
cssruby-on-railsfontssass
23tux
23tux

Reputation: 14736

Rails asset pipeline: fonts not found

I have a strange error, where some fonts are found but some aren't. Basically I have two fonts font1 (custom font from IconMoon) and Brandon (from fonts.com). My directory structure is

- app
  - assets
    - fonts
      - font1.eot
      - ...
      - 172fdde2-f56b-433a-a6e2-ebeab9dfb588.eot
      - ...

I'm using SCSS to load my fonts:

@font-face {
  font-family: 'font1';
  src:font-url('font1.eot?-kpzpl9');
  src:font-url('font1.eot?#iefix-kpzpl9') format('embedded-opentype'),
  font-url('font1.woff?-kpzpl9') format('woff'),
  font-url('font1.ttf?-kpzpl9') format('truetype'),
  font-url('font1.svg?-kpzpl9#font1') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face{
  font-family:'Brandon Grot W01 Medium';
  src:font-url('172fdde2-f56b-433a-a6e2-ebeab9dfb588.eot?#iefix');
  src:font-url('172fdde2-f56b-433a-a6e2-ebeab9dfb588.eot?#iefix') format('eot'),
  font-path('50ca6f6f-b64d-4af0-9b30-526cf363d87e.woff2') format('woff2'),
  font-url('050c2cbf-b818-4b8e-b6d2-71b70478bd9d.woff') format('woff'),
  font-url('7da41ce3-b3fd-4fca-a85f-4f3099884c15.ttf') format('truetype'),
  font-url('37c88f3d-9532-4547-9e11-7cca7f66048c.svg#37c88f3d-9532-4547-9e11-7cca7f66048c') format('svg');
}

When I try to load the font1 fonts, everything works. But when I try to load the Brandon font I get 404 errors. This is the generated CSS:

@font-face {
  font-family: 'font1';
  src: url(/assets/font1.eot?-kpzpl9);
  src: url(/assets/font1.eot?#iefix-kpzpl9) format("embedded-opentype"), url(/assets/font1.woff?-kpzpl9) format("woff"), url(/assets/font1.ttf?-kpzpl9) format("truetype"), url(/assets/font1.svg?-kpzpl9#font1) format("svg");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Brandon Grot W01 Medium';
  src: url(/assets/172fdde2-f56b-433a-a6e2-ebeab9dfb588.eot?#iefix);
  src: url(/assets/172fdde2-f56b-433a-a6e2-ebeab9dfb588.eot?#iefix) format("eot"), "/assets/50ca6f6f-b64d-4af0-9b30-526cf363d87e.woff2" format("woff2"), url(/assets/050c2cbf-b818-4b8e-b6d2-71b70478bd9d.woff) format("woff"), url(/assets/7da41ce3-b3fd-4fca-a85f-4f3099884c15.ttf) format("truetype"), url(/assets/37c88f3d-9532-4547-9e11-7cca7f66048c.svg#37c88f3d-9532-4547-9e11-7cca7f66048c) format("svg");
}

Calls to /assets/font1.eot result in a 200 and calls to /assets/172fdde2-f56b-433a-a6e2-ebeab9dfb588.eot result in a 404.

I'm not sure why this happens, because they are in the same directory. The logs look like this

Started GET "/assets/font1.eot" for 127.0.0.1 at 2016-02-05 10:38:22 +0100
Served asset /font1.eot - 304 Not Modified (0ms)

Started GET "/assets/172fdde2-f56b-433a-a6e2-ebeab9dfb588.eot" for 127.0.0.1 at 2016-02-05 10:39:25 +0100
Served asset /172fdde2-f56b-433a-a6e2-ebeab9dfb588.eot - 404 Not Found (6ms)

I'm on Rails 3.2.9

Any ideas on how to debug this issue?

Upvotes: 4

Views: 1387

Answers (1)

Jon
Jon

Reputation: 10898

The problem is caused by the hyphens in the name.

If you rename your files to use underscores instead, for example 172fdde2_f56b_433a_a6e2_ebeab9dfb588.eot, and then replace the hyphens with underscores in your css files, everything should work.

It's caused by sprockets trying to strip out fingerprints when resolving the asset. Ultimately it strips out part or all of the filename and then finds no matching file.

Upvotes: 5

Related Questions