CSS - @font Face

Hey everyone, the development site I'm working on is here....

http://firstchoiceflooring.stealthwd.ca/

The font in the top navigation is Media Gothic.... well, it's SUPPOSED to be. It's rendering really strange. I'm using @font-face.

My font looks fine in photo shop, but it doesn't render correctly in FF or website (no IE yet).

My CSS is like this....

Code:

@font-face {  
	font-family: mediaGothic;  
	src: url( "http://firstchoiceflooring.stealthwd.ca/images/fonts/Md_Gothic11.eot" ); /* IE */
	src: url( "http://firstchoiceflooring.stealthwd.ca/images/fonts/Md_Gothic11.ttf" ) format("truetype"); /* non-IE */  
} 

Code:

#topNavContainer p{
	height:100%;
	width:100%;
	text-align:center;
	font-family: mediaGothic;
}

Any help would be appreciated. This is my first time using @font-face

Hi everyone. Here is the url

http://v3p2.stealthwd.ca/

its the dev version of my companies soon-to-be-new website.

The font-face code is...

Code:

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

Any idea why its timing out?

Thanks

Hi there,

I'm completely new to CSS. I'm trying to do this more than one hour but can't get it right.

Code:

<font color='white'><font size='1' face=verdana size=1>

I couldn't find the equivalent of this in CSS

This is my last experiment but it doesn't seem to work either

Code:

fontstyle { color : #FFFFFF; font-family : verdana ; font-size :1;}

Thanks

I have a 'DIV' tag, its css height property is set to 15px.
Why is it, that it's not really 15px until I insert
"font: 10px Verdana " *** one of the rules?


So fi I have:

#topSeperate {
height: 15px;
width: 100%;
background-color: #00FF00;
font-weight: bold;
font: 10pt Verdana;
}

The div is perfect, but as soon as I remove the font: tag,
it grows in height about 4px even though there is no text
typed in the 'DIV'.

If this doesnt make sense and you need further explaination, Let me know.

Hi there,

Does anyone know what font this is that is used for text such as

"Everything you need to get a professional website online" at the top and below: "Takeaway Website Standard"

When I highlight it, it has a black bacground which is unusual.

Any ideas?

Thanks!

Hi guys
I've started this thread in this CSS forum, because I need to find a solution in CSS code.

I was given the following image. I must make same menu, using CSS. But this is not a problem. My problem is to find in css a real typography that mimics following image.



Does any1 know which css code and which font should I use ? The man who gave me that image doesn't know which font was used
Thanks a lot in advance

Is possible to write this in one line? :

Code:

font: 12px Verdana,Arial,Helvetica,sans-serif;
line-height: 1.4;

What I need to do to put line-height: 1.4; in font line ?

Hello,

I have something has follows:

<div>
...
<table>
...
</table>

</div>

My document font size is 1em.

My div font size is 1.4em.

What should be the font-size in my table to get back to the 1em of the document?

Thanks,
Miguel

Hi all,

Am a newbie in CSS i want to add a font (say VARSITY) to my text , with out installing it to my user's machine..

Is there any way to store in my site and just display it !

Thanks in advance!!!

Hi,

Suppose I define a font-family with several fallbacks, for example:

Code:

font-family: "Georgia", "Liberation Serif", serif;

Now I would like to know which font did the browser effectively pick without me having to go through my system looking for which fonts are installed. When I inspect the text with tools such as Firebug or the Web Developer Toolbar, they just give me the full font-family definition, but don't tell me the actual font being used...

Thank you in advance!
Jean

Is there any way to embed font so it would be viewable by firefox? I know yo can do it in IE, but can't find a way for firefox.

Thanks,

Greg

I would like to set my site so that any text not given a specific class id for CSS will appear as a certain font.

can I do this, and if so, how?

thanks.

hi, someone using foxfire keeps saying the my font is really really tiny, I have my css file like: Code:

body { background: #FFFFFF;
/* for internet explorer */
scrollbar-face-color: #FFFFFF; scrollbar-highlight-color: #FFFFFF; scrollbar-shadow-color: #FFFFFF; scrollbar-3dlight-color: #494969; scrollbar-arrow-color: #494969; scrollbar-track-color: #FFFFFF; scrollbar-darkshadow-color: #494969; 
margin: 0px; padding: 0px; border: 0px; border-top: 1px solid #8E9397; border-left: 1px solid #8E9397; font-color: #494969; font-family: Verdana,Arial,Helvetica; font-size: 8pt; text-align: left; }

a:link,a:active,a:visited { color: #494969; text-decoration: none }
a:hover { text-decoration: underline; color: #494969; position: relative; top: -1px; left: -1px; }
hr { background: transparent; color: #494969; height: 1px; border-width: 0px; }
fieldset { margin: 0; padding: 1px; border: 1px solid #494969; }
legend { margin: 0; padding: 7px; color: #494969; background: transparent; font-weight: bold; }
img { border: 0px; }
table { background: transparent; }
tr { background: transparent; }
td { background: transparent; color: #494969; font-family: Verdana,Arial,Helvetica; font-size: 70%; }
input, textarea, select { color: #494969; font: normal 11px Verdana, Arial, Helvetica, sans-serif; background: transparent; border: 1px solid #494969; border-style: inset; text-align: center; text-indent: 2px; }

form { margin: 0px; padding: 0px; }

any idea on whats wrong? and I would of changed the % to an actual value but I wanted to make it so people can control the size of the font to lager or smaller


here is a preview with that css file in use : http://www.dbznetwork.net/

I'm making a site, and the guy I'm making it for says he wanted a more 'tough' font. So I downloaded a, 'tough' but still readable of course, font. The main page has an iframe, and the content in the iframe is where the text goes that has the tough font. Everything works when it's offline. But when I try uploading it, it's the old font. I even check the source and it's all old. The server is running extremely slow right now, so that might be the problem and it just hasn't uploaded yet or something. Because I also deleted the content files and refreshed the page and it was still old. So, I'll wait a little longer and check or something.

I also know that viewers can't see custom fonts if they don't have them on their pc. So this is kind of seeming pretty pointless. But is there ANYWAY I Can make it viewable to everyone that views the site. So they can see the font even if they don't have it on their pc. Like, make them have it temporarily or something. My friend told me it had something to do with CSS, but I don't really know. Anything I can do to make it work? Is there maybe a Java Script I can use?

I am trying to use this font for my text:

http://www.google.com/webfonts/specimen/Droid+Sans

I have tried using:

font-family: 'Droid Sans', Arial, Helvetica, sans-serif;

but it doesn't work.

Any ideas?
Thanks!