Hi I am having problems with @font-face working in firefox and chrome
@font-face {
font-family: '3DumbRegular';
src: url('3Dumb.eot');
src: local('3Dumb Regular'), local('3dumb'), url('3Dumb.ttf') format('truetype');
}
this works in IE8 Win7.
@font-face {
font-family:'UniversityRomanStd';
src: url('UniversityRomanStd.ttf');
}
Works on local machine chrome/firefox but when site is live it doesn’t work.
Any Ideas/suggestions???
Kind regards
Damien Harrison
@font-face isn’t used in all browsers. Microsoft implemented a restricted (EOT) version in IE5, Safari 3.1 revived it, and FF 3.1 and higher also uses it. Opera 10 implemented it, but admitted to screwing it up. Chrome doesn’t use it, so you won’t see it in that browser. Overall, you can’t rely on it to display in a wide range of browsers and browser versions.
Someone with more current info please update and correct this…!
From what I understand, @font-face should be fairly reliable.
Here are some handy sites:
This site has a nice list of available fonts, with download kits that work cross-browser:
http://www.fontsquirrel.com/fontface
Also check out
http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
http://www.fontsquirrel.com/fontface/generator
http://www.zeldman.com/2009/12/02/bulletproof-font-face/
There’s a workaround for the bug in Opera: defining bolds and italics as different font families, and applying them explicitly on the elements you want to use them for.
All browsers are displaying the font on the local machine.
When uploaded to live site on IE8 displays the font.
you have error in your code. there are extra quotes
<div id="headerContent" class="[COLOR="Red"]"[/COLOR]clearfix">
vineet
Are you sure the path to your fonts is right? Are they located in the same directory as the stylesheet?
As Ralph said make sure the path is correct or try an absolute path to the file.
We had a thread here that may be of interest also.
Hi thanks for you help so far.
I removed the double quotes.
Tried adding absolute route.
Files are all in the same folder (kept it this way on purpose as couldn’t get it working with multiple directories and will sort out the structure when working as needed)
Fonts still not working in Chrome or firefox.
Cheers so far =0)
Right even stranger now I have one font working in IE 3Dumb.eot and one font working in FF/Chrome Diavlo_LIGHT_II_37.ttf
CSS Below
body
{
margin:0;
font-family:Arial, Helvetica, sans-serif;
background:white url('images2010/bg.png') repeat-x;
text-align:center;
}
@font-face {
font-family:'DiavloLIGHT';
src: url('http://www.damienharrison.co.uk/Diavlo_LIGHT_II_37.eot');
src: local('DiavloLIGHTII37'), local('DiavloLIGHTII37'), url('http://www.damienharrison.co.uk/Diavlo_LIGHT_II_37.ttf') format('truetype');
}
@font-face {
font-family: '3DumbRegular';
src: url('http://www.damienharrison.co.uk/3Dumb.eot');
src: local('3Dumb Regular'), local('3dumb'), url('http://www.damienharrison.co.uk/3Dumb.ttf') format('truetype');
}
header, section, footer,
aside, nav, article, figure {
display: block;
text-align:justify;
}
header
{
background-color:#2f3241;
border-bottom:2px gray solid;
width:100%;
min-height:75px;
padding-top:25px;
}
div#headerContent { margin:auto; width:90%;
}
div.logo
{
float:left;
margin-left:10px;
margin-right:20px;
margin-top:-20px;
}
.logo h1{
color: #fc0079;
font-weight:normal;
font-size:52px;
margin:0;
font-family:3DumbRegular; /*text-transform:lowercase;*/
}
.logo p
{
}
.logo span.url
{
letter-spacing:5px;
padding-left:0px;
color:#ffffff;
font-family:DiavloLIGHT;
}
/* navigation --------------------------------------------------- */
nav {
padding: 7px 0 7px 0px; height: 75px;
display:inline;
line-height:75px;
float:right;}
nav ul {
margin:0;
padding:0;
list-style:none;
}
nav ul li {float:left; display:inline; margin:0; padding:0;}
nav ul li a {
font-family:Arial, Helvetica, sans-serif;
font-size: 19px;
font-weight: bolder;
display: block;
color: #fff;
text-decoration: none;
float: left; /*\\*/ float:none;
padding: 7px 25px 7px 7px;
line-height: 13px;
border:0;
}
nav ul li a span {
font-size: 11px;
font-weight: normal;
color: #67707a;
}
nav ul li a:hover {
color: #fc0079;
}
nav ul li#active a {
}
/* content ----------------------------------------------- */
h1,h2
{
font-family:3DumbRegular;
font-size:30px;
margin:0px;
font-weight:normal;
}
h1 {
font-size:35px;
}
section#contentContainer
{
width:1024px;
margin:auto;
margin-top:25px;
}
section#portfolioContainer
{
width:600px;
margin:auto;
}
Hi,
Are these correct?
.logo h1 {
color: #fc0079;
font-weight:normal;
font-size:52px;
margin:0;
font-family:[B]3DumbRegular;[/B] /*text-transform:lowercase;*/
}
h1, h2 {
font-family:3[B]DumbRegular;[/B]
font-size:30px;
margin:0px;
font-weight:normal;
}
Shouldn’t they be:
.logo h1 {
color: #fc0079;
font-weight:normal;
font-size:52px;
margin:0;
font-family:[B]"3Dumb Regular[/B]"; /*text-transform:lowercase;*/
}
h1, h2 {
font-family:[B]"3Dumb Regular"[/B];
font-size:30px;
margin:0px;
font-weight:normal;
}
Hi yes they are right they are calling the font family as set up in @font face
font-family: ‘3DumbRegular’;
Fixed
I used http://www.fontsquirrel.com/fontface/generator to generate the CSS and boom it works, highly advise the use of this site, fonts now work in all browsers (cept Opera)
Thanks for your help
body
{
margin:0;
font-family:Arial, Helvetica, sans-serif;
background:white url('images2010/bg.png') repeat-x;
text-align:center;
}
@font-face {
font-family: '3DumbRegular';
src: url('3Dumb.eot');
src: local('3Dumb Regular'), local('3dumb'), url('3Dumb.woff') format('woff'), url('3Dumb.ttf') format('truetype'), url('3Dumb.svg#3dumb') format('svg');
}
@font-face {
font-family: 'DiavloLightRegular';
src: url('Diavlo_LIGHT_II_37.eot');
src: local('Diavlo Light Regular'), local('DiavloLight-Regular'), url('Diavlo_LIGHT_II_37.woff') format('woff'), url('Diavlo_LIGHT_II_37.ttf') format('truetype'), url('Diavlo_LIGHT_II_37.svg#DiavloLight-Regular') format('svg');
}
@font-face {
font-family: 'UniversityStdRomanRegular';
src: url('UniversityRomanStd.eot');
src: local('University Std Roman Regular'), local('UniversityRomanStd'), url('UniversityRomanStd.woff') format('woff'), url('UniversityRomanStd.ttf') format('truetype'), url('UniversityRomanStd.svg#UniversityRomanStd') format('svg');
}
header, section, footer,
aside, nav, article, figure {
display: block;
text-align:justify;
}
header
{
background-color:#2f3241;
border-bottom:2px gray solid;
width:100%;
min-height:75px;
padding-top:25px;
}
div#headerContent { margin:auto; width:90%;
}
div.logo
{
float:left;
margin-left:10px;
margin-right:20px;
margin-top:-20px;
}
.logo h1{
color: #fc0079;
font-weight:normal;
font-size:52px;
margin:0;
line-height:normal; font-weight: normal; font-family: '3DumbRegular', sans-serif; }
.logo p
{
}
.logo span.url
{
letter-spacing:5px;
padding-left:0px;
color:#ffffff;
line-height:normal; font-weight: normal; font-family: 'DiavloLightRegular', sans-serif;
}
/* navigation --------------------------------------------------- */
nav {
padding: 7px 0 7px 0px; height: 75px;
display:inline;
line-height:75px;
float:right;}
nav ul {
margin:0;
padding:0;
list-style:none;
}
nav ul li {float:left; display:inline; margin:0; padding:0;}
nav ul li a {
font-family:Arial, Helvetica, sans-serif;
font-size: 19px;
font-weight: bolder;
display: block;
color: #fff;
text-decoration: none;
float: left; /*\\*/ float:none;
padding: 7px 25px 7px 7px;
line-height: 13px;
border:0;
}
nav ul li a span {
font-size: 11px;
font-weight: normal;
color: #67707a;
}
nav ul li a:hover {
color: #fc0079;
}
nav ul li#active a {
}
/* content ----------------------------------------------- */
h1,h2
{
line-height:normal; font-weight: normal; font-family: '3DumbRegular', sans-serif; font-size:30px;
margin:0px;
}
h1 {
font-size:35px;
}
section#contentContainer
{
width:1024px;
margin:auto;
margin-top:25px;
}
section#portfolioContainer
{
width:600px;
margin:auto;
}
/* porfolio ------------------------------------------- */
#slider1 {
width: 720px; /* important to be same as image width */
height: 350px; /* important to be same as image height */
position: relative; /* important */
overflow: hidden; /* important */
}
#slider1Content {
width: 720px; /* important to be same as image width or wider */
position: absolute;
top: 0;
margin-left: 0;
}
.slider1Image {
float: left;
position: relative;
display: none;
}
.slider1Image span {
position: absolute;
font: 10px/15px Arial, Helvetica, sans-serif;
padding: 10px 13px;
width: 694px;
background-color: #000;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
color: #fff;
display: none;
text-align:left;
}
.clear {
clear: both;
}
.slider1Image span strong {
font-size: 14px;
}
.left {
top: 0;
left: 0;
width: 210px !important;
height: 100px;
}
.right {
right: 0;
bottom: 0;
width: 200px !important;
height: 300px;
}
ul { list-style-type: none;}
Glad you sorted it 
Wasn’t that link in the thread I mentioned earlier
Hi yes it did, fixed now using http://www.fontsquirrel.com/fontface/generator
Thank you for your help
Damien
Yes sorry - I saw your post after I posted Glad it’s working now.
Interesting Reads:
http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
http://webfonts.info/wiki/index.php?title=@font-face_browser_support
Cheers Cooper
Thank you everyone for your help with this