Hi
I have been looking at @font-face attribute.
I'm a little confused.
I have added this code as a test:
@font-face { font-family: 'Planewalker'; src: url('font/Planewalker.ttf') format('truetype');font-style: normal;} @font-face { font-family: 'League Gothic'; src: url('font/League_Gothic-webfont.ttf') format('truetype');font-style: normal;} .change { font-style: normal; font-family: Planewalker; font-variant: normal; } .change2 { font-style: normal; font-family: League Gothic; font-variant: normal; }
Now!
The first font shows in Safari 5, but not the second. Neither show in Firefox 4, and both DO show in CSSEdit 3 (the styling app I use)
Can anyone tell me what I am doing wrong??
Thanks in advance
Update
I found this example that works in Chrome/Firefox and Safari: Working!!
Since I looked at his code I got the Firefox to work but not the Chrome.
I have a live version here!!
The code now reads:
@font-face { font-family: Planewalker; src: local('Planewalker'), url('font/Planewalker.ttf') format("truetype"); font-style: normal; } .change { font-style: normal; font-family: Planewalker, Verdana, Arial, Helvetica, sans-serif; font-variant: normal; } @font-face { font-family: 'League Gothic'; src: local('League Gothic'), url('font/League_Gothic-webfont.ttf') format('truetype'); font-style: normal; } .change2 { font-style: normal; font-family: League Gothic, Verdana, Arial, Helvetica, sans-serif; font-variant: normal; }
Bulletproof font-face
I've found this solution works best in all browsers.
Managed to fix it! For some
Managed to fix it!
For some reason the font/[font name] route seemed to hold in a cache, but wasn't correct.
as soon as I added the ../ infront everything worked fine!!
CSSelgreco1965 wrote: ...
...
@font-face { font-family: 'League Gothic'; src: local('League Gothic'), url('font/League_Gothic-webfont.ttf') format('truetype'); font-style: normal; } .change2 { font-style: normal; font-family: League Gothic, Verdana, Arial, Helvetica, sans-serif; font-variant: normal; }
You need the single quotes in .change2 as well. Anything with a space in the name requires quoting. Better yet, don't use a space in the name.
You could also use a service
You could also use a service like Font Squirrel that will convert your ttf into different font types that are compaitable with different browsers and will also supply you with the CSS that works on a majority of the brothers.