@font-face CSS help!

[swhitty]

I have a toolbar on my cosmetics site "

http://www.makeupsexx.com"

and I want to use the font SegoeUI using @font-face. I've tried several methods to no avail.

Any help would be greatly appreciated!!

Scott
webmaster

 

[feherke]

Hi
[ul]
[li]Make sure the font files are available :

[tt][COLOR=white red] X [/color] [red]"NetworkError: 404 Not Found - [ignore]

http://www.makeupsexx.com/segoeuil-webfont.woff

[/ignore]"[/red]
[COLOR=white red] X [/color] [red]"NetworkError: 404 Not Found - [ignore]

http://www.makeupsexx.com/segoeuil-webfont.ttf

[/ignore]"[/red][/tt]

[/li]
[li]Use it. The font's given name is SegoeUILight, calling it other ways will not work :

[tt]font-family: "segoe UI";
font-family: Segoe UI;[/tt]

font-family: SegoeUILight;

[/li]
[li]Beside that, setting the [tt]font-family[/tt] for .clearFix:after will have no visual effect. Use the .clearfix class only for its intended purpose : to clear the floats.[/li]
[/ul]

Feherke.

 

[feherke]

Hi

Ah, found your other post in thread253-1655611. There you wrote

I have uploaded the font to a folder in the siteroot called "fonts" and the font is named SEGOEUIL.TTF

Then why not specified that in your CSS ?

@font[teal]-[/teal]face [teal]{[/teal]
    [COLOR=coral]font-family:[/color] '[COLOR=darkgoldenrod]SegoeUILight[/color]';
    [COLOR=coral]src:[/color] [COLOR=darkgoldenrod]url[/color]('[COLOR=darkgoldenrod]segoeuil-webfont.eot[/color]');
    [COLOR=coral]src:[/color] [COLOR=darkgoldenrod]url[/color]('[COLOR=darkgoldenrod]segoeuil-webfont.eot[/color]?[green][i]#iefix[/i][/green]') [COLOR=darkgoldenrod]format[/color]('[COLOR=darkgoldenrod]embedded-opentype[/color]'),
         [COLOR=darkgoldenrod]url[/color]('[COLOR=darkgoldenrod]segoeuil-webfont.woff[/color]') [COLOR=darkgoldenrod]format[/color]('[COLOR=darkgoldenrod]woff[/color]'),
         [COLOR=darkgoldenrod]url[/color]('[highlight][COLOR=darkgoldenrod]fonts[/color]/[COLOR=darkgoldenrod]SEGOEUIL.TTF[/color][/highlight]') [COLOR=darkgoldenrod]format[/color]('[COLOR=darkgoldenrod]truetype[/color]'),
         [COLOR=darkgoldenrod]url[/color]('[COLOR=darkgoldenrod]segoeuil-webfont.svg[/color]#') [COLOR=darkgoldenrod]format[/color]('[COLOR=darkgoldenrod]svg[/color]');
    [COLOR=coral]font-weight:[/color] [COLOR=darkgoldenrod]normal[/color];
    [COLOR=coral]font-style:[/color] [COLOR=darkgoldenrod]normal[/color];
[teal]}[/teal]

And similarly for the other font files, if you have them. If not, then you could remove them from the rule.

( By the way, your question has absolutely nothing to do with web design. This question should be asked in forum215. )


Feherke.

 

[ChrisHunt]

For future reference, there's a useful @font-face generator at

http://www.fontsquirrel.com/

that will sort out the syntax for you.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd