Hi guys, I coding my website and I met problem with font compatibility on browers, I use Georgia font in my CSS but only Chrome display it, FF and IE8 do not work. Do you know how to make FF and IE work? Thank you

 

This is my HTML Navigation:

 

<body>
	<div id="container">
	 <div class="avatar">
		<figure class="my-pic">
			<img src="img/nguyen-2.png" alt="Nguyen Tran"/>		
		</figure>
	</div><!--End .avatar-->
			
	<nav>
	  <ul>
		<li id="all">ALL</li>
		<li id="web">WEB</li>
		<li id="mobile">MOBILE APP</li>
		<li id="testimonial">TESTIMONIAL</li>
		<li id="contact">CONTACT</li>
	 </ul>
	</nav>

And this is my CSS:

 

@import url(http://fonts.googleapis.com/css?family=Georgia);
@import url(http://fonts.googleapis.com/css?family=PT+Sans+Narrow);

::selection {
	background: #333;
	color: #fff;
}

::-webkit-Scrollbar {
	width:9px;
}

::-webkit-Scrollbar-track {
	background: #eee;
	border: thin solid  lightgray;
	box-shadow: 0px 0px 3px rgba(0,0,0,0.1) insert;
}

::-webkit-Scrollbar-thumb {
	background: #999;
	border: thin solid gray;
}

body {
	font-family: 'Georgia', Arial, Sans-serif;
	background: url(img/br.jpg);
	padding: 0;
	margin: 0;
	border-top: 12px solid #1f9300;
}

I try using import from Google Font but it's still not working on FF and IE. Btw, which fonts designers use for the website?

 

Thanks

Georgia is a common system font so pulling it in from an external source isn't necessary...

you don't need an punctuation marks around it - of single-word names so it's simply

 

 

font-family: Georgia, Arial, ....

 

 

not

'Georgia'

 

otherwise post a link to the site so we can see it in (missing in) action

Georgia is a common system font so pulling it in from an external source isn't necessary...

 

Yes, Georgia isn't available through google web fonts, although as far as I know most (or a lot?) of computers will have it installed which is what I think BlueDreamer is saying, so I wonder whether that's the problem.

If you open up chrome and right click the text which should have the georgia font, then click inspect. To the right is the styles which are applied, just above those is a Computed tab, click that and see what font is being applied to the text.

Use the css3 property @font-face, here is a great resource for learning how to use it http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/