• Locked
5 replies [Last post]
Fri, 2011-04-22 16:29
CSSelgreco1965
CSSelgreco1965's picture
Offline
Enthusiast
Greece
Last seen: 10 years 25 weeks ago
Greece
Timezone: GMT+3
Joined: 2004-06-13
Posts: 51
Points: 28

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

The web becomes a tangled mess when Microsoft gets involved!

Top
Tags:
Fri, 2011-04-22 17:14
#1
CSSelgreco1965
CSSelgreco1965's picture
Offline
Enthusiast
Greece
Last seen: 10 years 25 weeks ago
Greece
Timezone: GMT+3
Joined: 2004-06-13
Posts: 51
Points: 28

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;
}

The web becomes a tangled mess when Microsoft gets involved!

Top
Fri, 2011-04-22 17:31
#2
sticks464
Offline
Enthusiast
Topeka, KS.
Last seen: 9 years 47 weeks ago
Topeka, KS.
Timezone: GMT-6
Joined: 2006-10-18
Posts: 116
Points: 71

Bulletproof font-face

I've found this solution works best in all browsers.

Top
Fri, 2011-04-22 18:02
#3
CSSelgreco1965
CSSelgreco1965's picture
Offline
Enthusiast
Greece
Last seen: 10 years 25 weeks ago
Greece
Timezone: GMT+3
Joined: 2004-06-13
Posts: 51
Points: 28

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!!

The web becomes a tangled mess when Microsoft gets involved!

Top
Fri, 2011-04-22 19:18
#4
Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 2 weeks 14 hours ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2050
Points: 2282

CSSelgreco1965 wrote: ...

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.

Top
Fri, 2011-04-22 20:25
#5
Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 4 years 14 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

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.

all ยป http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Top
  • Locked