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

Popular posts from this blog

c# - How to get the current UAC mode -

postgresql - Lazarus + Postgres: incomplete startup packet -

javascript - Ajax jqXHR.status==0 fix error -