<p>Your css and your fonts should be in the public section of the craft website. So put your css in "root/public/assets/css" and "root/public/assets/fonts/bootstrap". Than remove the {{ siteurl }} twig code (in this therme only use plain css).</p>

CC BY-SA 3.0
2015-05-05T19:12:01.490Z
I don't understand why you suggest putting css and js in public folder... This doesn't solve the problem. I was able to fix my font issue by using this as a path in my css file {{ siteUrl }}craft/templates/assets/fonts/bootstrap/ and it works so why put everything in a public folder?
Bowenac
CC BY-SA 3.0
2015-05-05T19:23:56.477Z
Moving all css and js to a public folder I then use ../fonts/bootstrap/ but it still works the same. Just moving it to the public folder wasn't the reason the fonts were not working, and really css and js should be able to be in any folder you want as long as your path is correct.
Bowenac
CC BY-SA 3.0
2015-05-05T20:08:10.803Z
*"css and js should be able to be in any folder "* – The folder must be above web root. Best practice is to have craft/ below that and a folder public/ (or named like you want) with Craft's index.php and .htaccess above. @Bowenac
carlcs
CC BY-SA 3.0
2015-05-05T20:16:13.803Z
It's also not a very good idea to use Twig in your CSS (see [Brandon's post](http://craftcms.stackexchange.com/a/3093/125))! Better use relative or root relative paths for your fonts as explained in this answer.
carlcs
CC BY-SA 3.0
2015-05-05T16:31:34.207Z
2015-05-05T16:38:03.477Z
2015-05-05T16:38:03.477Z
Tom Bauer
<p>So not sure what the problem is really have tried a few ways but I can't get font-files to work.</p>

<p>I have placed my font files in </p>

<pre><code> root/craft/templates/assets/fonts/bootstrap
</code></pre>

<p>Here is an example of @font-face that I am using...</p>

<pre><code>@font-face {
    font-family: "Glyphicons Halflings";
    src: 
    url("{{ siteUrl }}/assets/fonts/bootstrap/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"), 
    url("{{ siteUrl }}/assets/fonts/bootstrap/glyphicons-halflings-regular.woff2") format("woff2"), 
    url("{{ siteUrl }}/assets/fonts/bootstrap/glyphicons-halflings-regular.woff") format("woff"), 
    url("{{ siteUrl }}/assets/fonts/bootstrap/glyphicons-halflings-regular.ttf") format("truetype"), 
    url("{{ siteUrl }}/assets/fonts/bootstrap/glyphicons-halflings-regular.svg#glyphicons_halflingsregular") format("svg");
}
</code></pre>

<p>In firebug I get "NetworkError: 500 Internal Server Error - <a href="http://example.com/assets/fonts/bootstrap/glyphicons-halflings-regular.woff" rel="nofollow">http://example.com/assets/fonts/bootstrap/glyphicons-halflings-regular.woff</a>"</p>

<p>If I try to access the file directly I get the following message with craft styling etc so this is a craft error not a typical 500 error.</p>

<pre><code>Internal Server Error

Unexpected character ""
</code></pre>

<p>Now if I try to access a css file it works fine, but my font files are returning 500 errors.</p>

<p>I have placed my css files in </p>

<pre><code> root/craft/templates/assets/css
</code></pre>

<templating><assets><config>
Problem with @font-face url 500 server error craft style
# Problem with @font-face url 500 server error craft style

(Asked by: username_0 on 2015-05-05)

So not sure what the problem is really have tried a few ways but I can't get font-files to work.
I have placed my font files in 
 root/craft/templates/assets/fonts/bootstrap

Here is an example of @font-face that I am using...
@font-face {
    font-family: "Glyphicons Halflings";
    src: 
    url("{{ siteUrl }}/assets/fonts/bootstrap/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"), 
    url("{{ siteUrl }}/assets/fonts/bootstrap/glyphicons-halflings-regular.woff2") format("woff2"), 
    url("{{ siteUrl }}/assets/fonts/bootstrap/glyphicons-halflings-regular.woff") format("woff"), 
    url("{{ siteUrl }}/assets/fonts/bootstrap/glyphicons-halflings-regular.ttf") format("truetype"), 
    url("{{ siteUrl }}/assets/fonts/bootstrap/glyphicons-halflings-regular.svg#glyphicons_halflingsregular") format("svg");
}

In firebug I get "NetworkError: 500 Internal Server Error - http://example.com/assets/fonts/bootstrap/glyphicons-halflings-regular.woff"
If I try to access the file directly I get the following message with craft styling etc so this is a craft error not a typical 500 error.
Internal Server Error

Unexpected character ""

Now if I try to access a css file it works fine, but my font files are returning 500 errors.
I have placed my css files in 
 root/craft/templates/assets/css

**Tags:** templating, assets, config


---

## 1 answers

### Answer by username_1 on 2015-05-05. Score: 3

Your css and your fonts should be in the public section of the craft website. So put your css in "root/public/assets/css" and "root/public/assets/fonts/bootstrap". Than remove the {{ siteurl }} twig code (in this therme only use plain css).

> **Comments:**
> **username_0**: I don't understand why you suggest putting css and js in public folder... This doesn't solve the problem. I was able to fix my font issue by using this as a path in my css file {{ siteUrl }}craft/templates/assets/fonts/bootstrap/ and it works so why put everything in a public folder?  
> **username_0**: Moving all css and js to a public folder I then use ../fonts/bootstrap/ but it still works the same. Just moving it to the public folder wasn't the reason the fonts were not working, and really css and js should be able to be in any folder you want as long as your path is correct.  
> **username_2**: *"css and js should be able to be in any folder "* – The folder must be above web root. Best practice is to have craft/ below that and a folder public/ (or named like you want) with Craft's index.php and .htaccess above. @username_0  
> **username_2**: It's also not a very good idea to use Twig in your CSS (see [Brandon's post](http://craftcms.stackexchange.com/a/3093/125))! Better use relative or root relative paths for your fonts as explained in this answer.  

---

