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.
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
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With