html - Font not rendering? -
i have following css (generated byn sass):
@font-face { font-family: "locust"; src: url(/assets/locust.ttf) format("truetype"); src: url(/assets/locust.svg) format("svg"); }
the path seems accessible - i'm on localhost:3000
, if can download/see fonts typing localhost:3000/assets/locust.ttf
, instance.
yet firefox don't render font:
<h1 style="font-family: locust;">test</h1>
i'm using rails, don't think problem related, since html , css generated seems correct me, , fonts accessible. if knew need generate, know how fix.
asset url
here code use:
#app/assets/stylesheets/fonts.css.scss @font-face { font-family: 'lato'; src: asset_url('layout/fonts/lato/lato-hairline-webfont.eot'); src: asset_url('layout/fonts/lato/lato-hairline-webfont.eot?#iefix') format('embedded-opentype'), asset_url('layout/fonts/lato/lato-hairline-webfont.woff') format('woff'), asset_url('layout/fonts/lato/lato-hairline-webfont.ttf') format('truetype'), asset_url('layout/fonts/lato/lato-hairline-webfont.svg#latohairline') format('svg'); font-weight: 100; font-style: normal; }
notice asset_url
used -- provides css-compatible path url (hence why you're not able access path)
webfonts
if have full rights use font, you'd better using webfont generator here: http://www.fontsquirrel.com/tools/webfont-generator
this creates cross-browser webfont files in .tff
, .woff
, .svg
, .eot
formats
Comments
Post a Comment