CSS - Css Fonts Blurry On Pc But Fine On Mac

I was wondering how I can set a font that others may not have on there computer. I know I can set a font folder for my site but how do I link to that so that if the viewer doesn't have the font so it will still display correctly for them too? What type of font extension should I put in there? Should it be just the .ttf? Are there any special css rules that I must include?

Thanks for the help!

I've been looking at some CSS templates over at the Yahoo Developer Network. Link: http://developer.yahoo.com/ypattern...hp?pattern=grid

They define font sizes as percentages (13 pt. is about 100%), and I had never seen this. See he http://developer.yahoo.com/yui/fonts/index.html

Is this common? Uncommon? Is there a reason I haven't seen it before, or am I blind?

Also, in general, have anyone here used these templates as a basis for anything?

Hi all,

I'm trying to use my own hosted font for my website, namely Futura Light.

I had been using the Google Font API, so to host my font I change the URL in the CSS from the google hosted font to a local address where my font is.

This worked really well on Firefox, safari and Chrome, but IE8 is still showing my generic fonts.

Why would IE8 not show my hosted font, while other browsers do?

Help is very much appreciated!

Ray

if i upload a load of different fonts to my web server, i presume i need to link them to CSS, before i can use them. how do i do this? if not, what do i need to do instead?

Is it possiable for me to add an external font family on a certain text? I mean.. Is it possible for me to use ttf fonts on css to modify my html page?

P.S: I hope It makes sense.. because I'm tired

style
{
#test{
margin-left: 5px;
margin-top: 9px;
font-family: arial;
color: black;
font-size: 9px;
}
}


<!-- html -->
<div id="test">
<span> X Y Z </span>
</div>


Here is my problem. I am trying to make "Y" bold. but it appears in regular font. I tried following code which doesn't work for me.

<span> X <span style="font-weight: bold;">Y</span> Z</span>

Thanks

Ive seen some sites using fonts i dont have on my computer how is this done and whats it called ? any help would be great.

Each browser keeps displaying my website with a different font.
It makes no difference to the layout of the page, but I'd like it to be the same font in all of them just for the sake of consistancy.

Are there any fonts out there that work for all of them? Can I upload a font type to my server to send to browsers?

I want a kind of 'courrier new' , 'arial' or 'tahoma' font really.

Any help is greatly appreciated

I'm pretty certain you can do this - but for the life of me I can't remember where I read this.
Code:

<style>
@import font("fonturl")
</style>

or

Code:

<style>
@font url("fonturl")
</style>

I'm still searching online.

Anyone else have any ideas?

thanks

Hi all..

i'm new to php...
ive got a php genereated page that i need to display in a css generated font... i can kind of get it to work using the normal <class="font"> at the top of the page but it seems to ignore the pixel size.

Am i doing it completely wrong? i need a *simple* solution if thats possible, and without too much jargon

much appreciated..

adi

Ok now it isnt a fire fox issue anymore it is a problem in all browsers. Here is the css that is messing up.

Code:

	.forgot 	       {COLOR: #dddddd; FONT-SIZE: 8pt; FONT-FAMILY: Verdnana; TEXT-DECORATION: none; font-variant: smallcaps; font-weight: bold; background-color: #4d1e09; padding: 2px 0px 2px 0px; width: 655px; display: block;}
	.forgot:active     {COLOR: #eeeeee; FONT-SIZE: 8pt; FONT-FAMILY: Verdnana; TEXT-DECORATION: none; font-variant: smallcaps; font-weight: bold; background-color: #8A694E; padding: 2px 0px 2px 0px; width: 655px; display: block;}
	.forgot:visited    {COLOR: #dddddd; FONT-SIZE: 8pt; FONT-FAMILY: Verdnana; TEXT-DECORATION: none; font-variant: smallcaps; font-weight: bold; background-color: #4d1e09; padding: 2px 0px 2px 0px; width: 655px; display: block;}
	.forgot:hover      {COLOR: #eeeeee; FONT-SIZE: 8pt; FONT-FAMILY: Verdnana; TEXT-DECORATION: none; font-variant: smallcaps; font-weight: bold; background-color: #8A694E; padding: 2px 0px 2px 0px; width: 655px; display: block;}

	.meminfol 	      {COLOR: #4D1E09; FONT-SIZE: 8pt; FONT-FAMILY: Verdnana; TEXT-DECORATION: none; font-variant: smallcaps; font-weight: bold; background-color: #EEEEEE; padding: 2px 0px 2px 0px; width: 180px; display: block;}
	.meminfol:active  {COLOR: #000000; FONT-SIZE: 8pt; FONT-FAMILY: Verdnana; TEXT-DECORATION: none; font-variant: smallcaps; font-weight: bold; background-color: #bbbbbb; padding: 2px 0px 2px 0px; width: 180px; display: block;}
	.meminfol:visited {COLOR: #4D1E09; FONT-SIZE: 8pt; FONT-FAMILY: Verdnana; TEXT-DECORATION: none; font-variant: smallcaps; font-weight: bold; background-color: #EEEEEE; padding: 2px 0px 2px 0px; width: 180px; display: block;}
	.meminfol:hover   {COLOR: #000000; FONT-SIZE: 8pt; FONT-FAMILY: Verdnana; TEXT-DECORATION: none; font-variant: smallcaps; font-weight: bold; background-color: #cccccc; padding: 2px 0px 2px 0px; width: 180px; display: block;}

	.meminfol2 	       {COLOR: #4D1E09; FONT-SIZE: 8pt; FONT-FAMILY: Verdnana; TEXT-DECORATION: none; font-variant: smallcaps; font-weight: bold; background-color: #dddddd; padding: 2px 0px 2px 0px; width: 390px; display: block;}
	.meminfol2:active  {COLOR: #eeeeee; FONT-SIZE: 8pt; FONT-FAMILY: Verdnana; TEXT-DECORATION: none; font-variant: smallcaps; font-weight: bold; background-color: #8A694E; padding: 2px 0px 2px 0px; width: 390px; display: block;}
	.meminfol2:visited {COLOR: #4D1E09; FONT-SIZE: 8pt; FONT-FAMILY: Verdnana; TEXT-DECORATION: none; font-variant: smallcaps; font-weight: bold; background-color: #dddddd; padding: 2px 0px 2px 0px; width: 390px; display: block;}
	.meminfol2:hover   {COLOR: #eeeeee; FONT-SIZE: 8pt; FONT-FAMILY: Verdnana; TEXT-DECORATION: none; font-variant: smallcaps; font-weight: bold; background-color: #8A694E; padding: 2px 0px 2px 0px; width: 390px; display: block;}

Never mind it was just that the font Verdana was spelled wrong.

Nick

I just want a simple way to make all fonts on the page the same. For example, the following does NOT seem to work. Should it?

in the style sheet:

Code:

BODY {font-size: 10px;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     color: #666666;
        }

I also tried putting the font size, color and face in a class and using something like

<td class="fontInfo">

But that doesn't seem to work (i get the default browser font--Times.)

Any help please thank you.

I am having some difficulty getting text to render how I want it.

The page in question can be viewed he http://www.cbo4edu.org/who.html

The column of text on the left is bolded for some reason and I want it match the text on the right (unbolded).

I have setup an External style sheet and the only code I've applied to type is:
PHP Code:
.footer {     font-family: Verdana, Arial, Helvetica, sans-serif;     font-size: 8pt; }  body,td,th {     color: #000000;     font-family: Verdana, Arial, Helvetica, sans-serif;     font-size: 12px;      } body {     background-color: #000000;     margin-left: 0px;     margin-right: 0px; 





The HTML code:
PHP Code:
<th colspan="4" rowspan="24" align="left" valign="top"><p>College Bound Opportunities (CBO) is a not-for-profit organization  centered in the five communities within Deerfield and Highland Park High School  District 113. CBO identifies high-achieving young people who without support  would likely forgo post-secondary education and assists them in applying to and  completing college. CBO goals are achieved through a program of one-on-one  coaching between volunteers and scholars. Additional aid provided by CBO  includes tutoring, training services, laptop computers, and up to $4,000 per  year in scholarships.     </p> 





Thanks,
Rebecca

I am wondering how the W3C Markup Validation Service page makes all the text on the page smoothed. I have never seen another web page do this before. This works in Internet Explorer 6, Firefox, and Opera. I'm using Windows XP Professional with the System Properties > Advanced > Performance Options > Visual Effects option of 'Smooth edges of screen fonts' turned on. Disabling this option results in the fonts not being smoothed on the page at all.

Usually fonts of 14pt and higher are smoothed out for me, but not when they're lower than this (unless they're bolded)! So how does this page manage to smooth out all the fonts, no matter what the size? I had a look at the page's stylesheets, but couldn't see anything unusual that might be causing this.

Does anybody know?

Hey guys, would you please tell me why I get an error on my web page?
Here is the error.

Thanks