CSS - Get Error Using Google Fonts!

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?

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

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!

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

hello,

what's the best way to create a border around txt (i mean the letters themselves not around a block of txt)?

i've seen some people do this with glow but in most cases it looks awful and even worse, it doesn't seem to work in other browsers other than IE.

is there some trick that i can use to achieve this effect?
thanks for any 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?

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

I have built a site using css for font styles. On my mac the fonts show up fine but when I view the site on Windows XP using Internet Explorer the fonts look kinda blurry/washed out.

I'm using Arial, at 12px or 13px bold, as set in my CSS file.

Is this a common problem, a way to fix the problem, or just my own problem?

thanks for the help.

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.

Hey gang,

I'm trying to make a website for Dad and I'm a little rough with my CSS, and I'm having troubles getting my fonts to show up correctly. I am working in Dreamweaver CS4, and the font looks great, but when I view it in FF/IE/Safari, H1 and H2 look WAY too big.

Here is what it looks like in DW (top) and in Firefox (bottom):


And here is the CSS:
Code:

/*	--------------------------------------------------
	1.0 RESETS
	-------------------------------------------------- */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
}

/*	--------------------------------------------------
	2.0 GLOBAL STYLES
	-------------------------------------------------- */
body {
	background-color: #636c08;
	background-image: url(images/background.gif);
	background-repeat: repeat-x;
	background-attachment: fixed;
	font: 62.5%/1.4 'Lucida Grande', Verdana, sans-serif;
	color: #666;
}
	
html {
	overflow: -moz-scrollbars-vertical;
}

a, a:link {
	color: #689E21;
	text-decoration:none;
}

a:visited {
	color: #687C05;
}

a:hover {
	color: #ff6600;
}

h1 {
	font: bold 1.3em;
	color:#ff6600;
}
h2 {
	font: bold 1.25em;
	color:#5B6C07;
}

h3 {
	font: bold 1.1em;
	color:#5B6C07;	
}


p{
	padding: 0 0 .2em 0;
	line-height: 1.3em;
	font-weight:normal;
}
/*	--------------------------------------------------
	3.0 LAYOUT STYLES
	-------------------------------------------------- */
#container {
		margin: 0 auto;   /* align for good browsers */
		text-align: left; /* counter the body center */
		width: 772px;
		margin: 0 auto;
}

#header {
	position:realtive;
	left:0px;
	top:0px;
	width:772px;
}

#topbar{
clear: both;
padding: 0;
width: 100%;
height: 16px;
line-height: 16px;
background: #C1CF2B;
border-bottom: solid 1px #5B6C07;

}

#content {
	width: 772px;
	margin: 0 auto;
	padding: 0;
	background:#FFFFFF;

}
#left {
	float: left;
	margin: 0;
	padding: 16px 7px 0 10px;
	width: 221px;
}

#right {
	float: right;
	margin: 0;
	padding: 16px 8px 0px 8px;
	width: 517px;
	border-left: solid 1px #5B6C07;
}

.left_header {
	padding: 0px 0px 0px 0px;
	margin-bottom: 0px;
}

.left_content {
	text-align: left;
}

#bottombar{
clear: both;
padding: 0;
width: 100%;
height: 16px;
line-height: 16px;
background: #C1CF2B;
border-top: solid 1px #5B6C07;
text-align: center;
}

#footer {
	font: bold 9px Arial, Verdana, sans-serif;
	color:#FFF;
	text-align:center;
	padding: 1px;
	
}

/*	--------------------------------------------------
	4.0 NAVIGATION STYLES
	-------------------------------------------------- */
#nav {
	width: 772px;
	background:  url("images/navigation-matrix.png") no-repeat;
	height:27px;
	overflow:hidden;
	position: relative;
}
	
	ul#main-nav { background: url(images/navigation-matrix.png) no-repeat 0 0; float: left; width: 775px; height: 27px; margin: 0 0 0; padding: 0; }
	ul#main-nav li { display: inline; }
	ul#main-nav li a, ul#main-nav li a:visited { float: left; display: inline; height: 27px; line-height: 27px; background: url(images/navigation-matrix.png) no-repeat 0 0; text-indent: -999em; }
	
	ul#main-nav li#home a, ul#main-nav li#home a:visited { background-position: 0 0; width: 148px; }
	ul#main-nav li#home a:hover { background-position: 0 -27px; }
	ul#main-nav li#home a.active { background-position: 0 -27px; }
	ul#main-nav li#home.selected a { background-position: 0 -27px; }
	
	ul#main-nav li#about a, ul#main-nav li#blog a:visited { background-position: -148px 0; width: 125px; }
	ul#main-nav li#about a:hover { background-position: -148px -27px; }
	ul#main-nav li#about a.active { background-position: -148px -27px; }
	ul#main-nav li#about.selected a { background-position: -148px -27px; }
	
	ul#main-nav li#garden a, ul#main-nav li#videos a:visited { background-position: -273px 0; width: 218px; }
	ul#main-nav li#garden a:hover { background-position: -273px -27px; }
	ul#main-nav li#garden a.active { background-position: -273px -27px; }
	ul#main-nav li#garden.selected a { background-position: -273px -27px; }
	
	ul#main-nav li#where a, ul#main-nav li#photos a:visited { background-position: -491px 0; width: 143px; }
	ul#main-nav li#where a:hover { background-position: -491px -27px; }
	ul#main-nav li#where a.active { background-position: -491px -27px; }
	ul#main-nav li#where.selected a { background-position: -491px -27px; }
	
	ul#main-nav li#contact a, ul#main-nav li#tour a:visited { background-position: -634px 0; width: 141px; }
	ul#main-nav li#contact a:hover { background-position: -634px -27px; }
	ul#main-nav li#contact a.active { background-position: -634px -27px; }
	ul#main-nav li#contact.selected a { background-position: -634px -27px; }
	


ul#main-nav li#home a em{ background-position: -0px 0;}

ul#main-nav li#about a em{ background-position: -148px 0;}

ul#main-nav li#garden a em{ background-position: -273px 0;}

ul#main-nav li#where a em { background-position: -491px 0;}

ul#main-nav li#contact a em { background-position: -634px 0;}

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

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

SO my site is starting to get somewhere and I am starting to test it on all browser and I already found a couple problems while looking at it through firefox and fixed some of the problems but there is still the issue of the link font is not working. I set the size on the font family and yet it is looking all ugly. You guys can view by going to this page. http://www.paragliderworld.com/flyingsites.php and then select places untill you get to the viewing page. Please let me know what is wrong with this. Here is the link to my style sheet http://www.paragliderworld.com/style.css

Nick

Nevermind, figured it out.