html - Certain fonts not working with @font-face? -
here's what's frustrating here. got font pack sansation, , tried use @font-face. regular version works , "bold" version doesn't. checked filename , it's correct. understanding font should work. missing something?
@font-face { font-family: sansation_regular; src: url('/fonts/sansation_regular-webfont.ttf'), url('/fonts/sansation_regular-webfont.eot'); }
i then, without changing font-family in css corresponding text element, change to:
@font-face { font-family: sansation_regular; src: url('/fonts/sansation_bold-webfont.ttf'), url('/fonts/sansation_bold-webfont.eot'); }
thanks assistance.
you should run font through fontsquirel full set http://www.fontsquirrel.com/tools/webfont-generator
the css it'll generate like:
/* fonts */ @font-face { font-family: 'sansation_regular-webfont'; src: url('../fonts/sansation_regular-webfont.eot'); src: url('../fonts/sansation_regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/sansation_regular-webfont.woff') format('woff'), url('../fonts/sansation_regular-webfont.ttf') format('truetype'), url('../fonts/sansation_regular-webfont.svg#sansation_regular-webfont') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'sansation_bold-webfont'; src: url('../fonts/sansation_bold-webfont.eot'); src: url('../fonts/sansation_bold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/sansation_bold-webfont.woff') format('woff'), url('../fonts/sansation_bold-webfont.ttf') format('truetype'), url('../fonts/sansation_bold-webfont.svg#sansation_bold-webfont') format('svg'); font-weight: normal; font-style: normal; }
also i'd avoid using full ulr refs - check path fonts folder correct css file
Comments
Post a Comment