@font-face continued failure

HTML & CSS
1

I’m exhausted with this.

I think it’s in my directory tree somehow but I’ve played with it for three days now with no success.

mydesign (root directory with index.html)
Sub directory of root is my css folder
Four subdirectories of (tied) to the css folder are:

/fonts
/graphs
/images
/scripts

I’ve tried ('…css/fonts/font names . . . . ')
I’ve tried ('mydesign/css/fonts/font names . . . . ‘)
I’ve tried (’…/fonts/font names . . . . ')

Nothing works!

I re-downloaded from FontSquirrel.com again just to be sure.


@font-face {
    font-family: 'TangerineRegular';
    src: url('../css/fonts/Tangerine_Regular-webfont.eot');
    src: url('../css/fonts/Tangerine_Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../css/fonts/Tangerine_Regular-webfont.woff') format('woff'),
         url('../css/fonts/Tangerine_Regular-webfont.ttf') format('truetype'),
         url('../css/fonts/Tangerine_Regular-webfont.svg#TangerineRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}


.tang	{font-family:'TangerineRegular', arial, san-serif;
		 font-size:460%;
		 color:#6CF;
         font-weight:normal;
		 text-align: right;
		 font-weight: normal;
    	 font-style: normal;
}

FontSquirrel does not have that little ‘:)’ happy face in there.

I think I need that, correct?

Would love to get this part finished.

Thanks
Rick

2

Maybe this will help - W3c Validation, or in my case invalidation!

This basically says that it doesn’t exist???


6  [COLOR="Red"]Value Error : font-family Property font-family doesn't exist in CSS level 2.1[/COLOR] but exists in : 'TangerineRegular' 'TangerineRegular'  
7  Property src [COLOR="Red"]doesn't exist[/COLOR] : url('../css/fonts/Tangerine_Regular-webfont.eot') url('../css/fonts/Tangerine_Regular-webfont.eot')  
12  Property src [COLOR="red"]doesn't exist[/COLOR] : url('../css/fonts/Tangerine_Regular-webfont.eot?#iefix') format('embedded-opentype'),url('../css/fonts/Tangerine_Regular-webfont.woff') format('woff'),url('../css/fonts/Tangerine_Regular-webfont.ttf') format('truetype'),url('../css/fonts/Tangerine_Regular-webfont.svg#TangerineRegular') format('svg') url('../css/fonts/Tangerine_Regular-webfont.eot?#iefix') format('embedded-opentype'),url('../css/fonts/Tangerine_Regular-webfont.woff') format('woff'),url('../css/fonts/Tangerine_Regular-webfont.ttf') format('truetype'),url('../css/fonts/Tangerine_Regular-webfont.svg#TangerineRegular') format('svg')  
13  Value Error : font-weight Property font-weight [COLOR="red"]doesn't exist in CSS level 2.1 [/COLOR]but exists in : normal normal  
14  Value Error : font-style Property font-style [COLOR="red"]doesn't exist[/COLOR] in CSS level 2.1 but exists in : normal normal  

This is index.html

44 #outer  Value Error : max-width only 0 can be a length. You must put a unit after your number : 1200 1200  
45 #outer  Value Error : min-width only 0 can be a length. You must put a unit after your number : 600 600  
62 #nav  Property word-wrap doesn't exist : break-word break-word  
109 #footer  Value Error : font-style attempt to find a semi-colon before the property name. add it

This is how I had the css at the time of W3c validation.


@font-face {
    font-family: 'TangerineRegular';
    src: url('../css/fonts/Tangerine_Regular-webfont.eot');
	/*src: local("☺"),*/
    src: url('../css/fonts/Tangerine_Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../css/fonts/Tangerine_Regular-webfont.woff') format('woff'),
         url('../css/fonts/Tangerine_Regular-webfont.ttf') format('truetype'),
         url('../css/fonts/Tangerine_Regular-webfont.svg#TangerineRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

.tang	{font-family:'TangerineRegular', arial, san-serif;
		 font-size:460%;
		 color:#6CF;
         font-weight:normal;
		 text-align: right;
		 font-weight: normal;
    	 font-style: normal;
}
3

If the /fonts/ folder is inside the /css/ folder, then the link should be

'fonts/font names . . . . ’

e.g.

src: url(‘fonts/Tangerine_Regular-webfont.eot’);

The …/ at the front means “go up one folder and then look for a /fonts/ folder”, which is not what you want (it seems).

4

Ralph - that fixed it on the first try!

I love it - thank you, and those who have had to move me along with a cattle prod.

Thanks.

Now on to new education.

Rick

5

Glad that helped, Rick. :slight_smile:

6