6

I am trying to load some custom fonts via the CSS @font-face. I am using the rails fonts_path method. It succesfully generates the correct path in my development browser: 

/assets/fonts/my_font.eot?#iefix

However it appends this path to 0.0.0.0:3000 (rails Development server) which may not be the location of /assets/fonts/ in my Rails project. I don't know the relationship between routes that are routed by Rails and things like Rails assets.

Here is the error: 

Failed to load resource: the server responded with a status of 404 (Not Found)    http://0.0.0.0:3000/assets/fonts/my_Ffent.woff

Here is my stylesheet: 

<style type="text/css">
@font-face{
  font-family:"My Font";
  src:url(<%=font_path('/assets/fonts/my_font.eot?#iefix')%>);
  src:url(<%=font_path('/assets/fonts/my_font.eot?#iefix')%>) format("eot"),url(<%=font_path('/assets/fonts/my_font.woff')%>) format("woff"),url(<%=font_path('/assets/fonts/my_font.ttf')%>) format("truetype"),url(<%=font_path('/assets/fonts/my_font.svg#c1b10d74-5304-41c3-b9de-00f29187df91')%>) format("svg");
}
</style>

The stylesheet is placed in application.html.erb which may be part of the problem? It is defined in the <head> tag.

Thalatta
  • 4,510
  • 10
  • 48
  • 79

1 Answers1

1

Looked through my code where ive used @font-face and ive documented it this way. Give it a try and see if it works for you. As you can see ive declared the font src localy by just declaring its name. 

@font-face {
    font-family: 'yourfont Novum Light';
    src: local('yourfont Novum Light') url("https://cns.xx.com/ux/site/1.1/fonts/yourfont-novum/yourfont-Novum-Light.eot");

font-weight: 400;
font-style: normal

}

TheSearcher
  • 64
  • 9