@font-face Chrome vs. IE 8 AND best practices for 2 Column Layout With CSS

**R Schreiber** · Jan 5, 2012 17:57

I'm using @font-face with fonts from Font Squirrel. (Kewl site)

They display very well in IE 8 but do not render in Chrome.

Uh . . . . is this because of bananas . . . or is there something else going on?

Code:

@font-face {	font-family: 'gabrielle';
    		 src: url('../css/fonts/gabrielle-webfont.eot');
		  src: local("☺"),
    		   src: url('../css/fonts/gabrielle-webfont.eot?#iefix') format('embedded-opentype'),
		   url('../css/fonts/gabrielle-webfont.woff') format('woff'),
		 url('../css/fonts/gabrielle-webfont.ttf') format('truetype'),
		url('../css/fonts/gabrielle-webfont.svg#gabrielleRegular') format('svg');
    		font-weight: normal;
    		font-style: normal;
}

Also, I'm designing a two column layout with CSS.

Most of the CSS Site Forum members know this already as I've driven them nuts for the past six month.

I wish to have a 320px left and a 880px right content window.

This is what I have . . .

Code:

html, body {	margin:0; padding:0
}

body 		{ 	background-color: #0A1794;
			background:  url(images/blkpyramids1.jpg) fixed; /*newbkground.png)*/								
			max-width: 1200px;
			min-width: 400px;
			font-family: Verdana, Geneva, sans-serif;  
			font-size:16px;							
			color:#fff;
    		  	line-height:106%;
			margin-top:10px;
}

#maincontent{	        float:right;
			width:880px;
			position:relative;
			margin-left: 26.26%; 
}

I did read Pauls Frequently Asked Questions in the CSS forum talking about this and almost understood all of it.

the example was . . .

#leftmenu {
width: 139px;
height: auto;
margin: 0px 10px 0px 0px;
border-right: 1px solid #C8C8C8;
background-color: #f2f2f2;
display: inline;
float: left;
position:relative;
left:-450px
}

#content {
width: 450px;
background: #fffccc;
text-align: left;
color: #000;
float:left;
position:relative;
left:150px;
}

I'd love to hear your comments on this.

Thanks . . . Rick