Referencing @fontface on a ghost installation

Question

I just generated a personalized font-awesome using http://fontello.com/

When I try referencing it on my Ghost Installation the files always return 404. Here's what I did:

I added the complete folder of generated font files on the folder /content/themes/[theme name]/assets/fonts
I reference the main .css file from default.hbs

Like this:

<link rel="stylesheet" type="text/css" href="{{asset "fonts/custom_webfont.css"}}">

This .css file has a directive that allows different browsers to choose the supported file type for the font being served:

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

When any page on my ghost installation gets rendered it correctly serves the CSS on this address:

/assets/fonts/custom_webfont.css?v=594627dbc0 (I assume the additional v number is for cache purposes)

But no font files are served. If I try any of these URLs nothing is found:

http://localhost:2368/assets/fonts/custom_webfont.woff/?v=594627dbc0
http://localhost:2368/assets/fonts/custom_webfont.woff
http://localhost:2368/assets/fonts/custom_webfont.eof/?v=594627dbc0
http://localhost:2368/assets/fonts/custom_webfont.eof

PDXIII PDXIII · Accepted Answer · 2014-11-07T12:52:01

Probably I am late for this question, but it’s worth a try!

I am pretty sure you building the path wrong. Try it like this:

rel="stylesheet" type="text/css" href="{{asset}}/fonts/custom_webfont.css">

This works for me!

Referencing @fontface on a ghost installation

1 Answers