PDA

View Full Version : ising face-font rule


Crumpy1
12-21-2012, 09:16 AM
Hi All,

I have designed my entire site from the beginning using Calibri, however now when testing numerous browsers it is not loading on any ie 8 or lower (as it does not support face-font or my iphones ios.

Below is a copy of my css, have i mage any obvious errors? This is the first time i have used a non supported font.

@font-face {
font-family: 'Calibrii'; !important;
src: url('../Fonts/CALIBRI.eot');
url('../Fonts/CALIBRI.TTF');
font-weight:normal;
font-style:normal;
url('../Fonts/CALIBRIB.eot');
url('../Fonts/CALIBRIB.TTF');
font-weight:bold;
font-style:normal;
url('../Fonts/CALIBRII.eot');
url('../Fonts/CALIBRII.TTF');
font-weight:normal;
font-style:italic;
url('../Fonts/CALIBRIIZ.eot');
url('../Fonts/CALIBRIIZ.TTF');
font-weight:bold;
font-style:italic;

}

I have assigned body to use the font calibrii but it does not seem to make a difference.

A link to my website is here https://dl.dropbox.com/u/104598901/Website/index.html

Thanks

Corrosive
12-21-2012, 10:16 AM
Not sure why the .eot font isn't working in IE, it should do, nut you need .svg format for iPad/Phone I believe. Why not just use the http://www.fontsquirrel.com/fontface/generator generator?

Crumpy1
12-21-2012, 04:56 PM
I have added the .svg & .woff files and I still am not getting it to work correctly on iphone.

Is the code written correctly?

@font-face {
font-family: 'Calibri'; !important;
src: url('../Fonts/CALIBRI.eot');
url('../Fonts/CALIBRI.TTF');
url('../Fonts/CALIBRI.svg');
url('../Fonts/CALIBRI.woff');
font-weight:normal;
font-style:normal;

url('../Fonts/CALIBRIB.eot');
url('../Fonts/CALIBRIB.TTF');
url('../Fonts/CALIBRIB.svg');
url('../Fonts/CALIBRIB.woff');
font-weight:bold;
font-style:normal;

url('../Fonts/CALIBRII.eot');
url('../Fonts/CALIBRII.TTF');
url('../Fonts/CALIBRII.svg');
url('../Fonts/CALIBRII.woff');
font-weight:normal;
font-style:italic;

url('../Fonts/CALIBRIZ.eot');
url('../Fonts/CALIBRIZ.TTF');
url('../Fonts/CALIBRIZ.svg');
url('../Fonts/CALIBRIZ.woff');
font-weight:bold;
font-style:italic;

}

Ricky55
12-26-2012, 01:26 AM
That code isn't correct at all.

You are linking to four sets of fonts but only declaring one font family.

You also don't need important next to the family, besides its in the wrong place.

You should however declare a fall back just in case your chosen font doesn't load etc.

I'm on my iPad so I'm not in a position to start copying code, your best bet is to go on font squirrel and download one of their kits or make one from your font and copy and paste the code substituting where obvious.

Also make sure the path to the font is correct from the style sheet.

If you still can't get it working post back and ill have a proper look tomorrow.

Cheers

Crumpy1
12-26-2012, 04:09 PM
That code isn't correct at all.

You are linking to four sets of fonts but only declaring one font family.

You also don't need important next to the family, besides its in the wrong place.

You should however declare a fall back just in case your chosen font doesn't load etc.

Also make sure the path to the font is correct from the style sheet.

If you still can't get it working post back and ill have a proper look tomorrow.

Cheers

Thanks for the info, i have removed important; from the font family, i only put it there through desperation of my fonts no loading correctly on mobile ios and thought it may have been overlooked.

How do i declare a font family for each font?

The font path is definetly correct, and i have got a fall back font which is almost identical to calibri which i am unsure how to intergrate. Do i just add a new font family underneath the calibri code?

Thanks for the help, much appreciated!

edbr
12-27-2012, 01:48 AM
font-family: Baskerville, "Heisi Mincho W3", Symbol;

Corrosive
12-27-2012, 11:14 AM
your best bet is to go on font squirrel and download one of their kits

Hi Crumpy1. This is good advice, don't ignore it ;)

Ricky55
12-27-2012, 03:33 PM
I love how you added an !important just out of desperation.

You declare your fonts like this, usually at the top of your style sheet.

You don't need to specify bold or italics as it will get this from the font type. If you want to use italics or bold use that version of the type face.

Your css would look like this.


/*Declare your first font, making sure the path is correct from your style sheet*/
@font-face {
font-family: 'your-font-one';
src: url('your-font-one.eot');
src: url('your-font-one.eot?#iefix') format('embedded-opentype'),
url('your-font-one.woff') format('woff'),
url('your-font-one.ttf') format('truetype'),
url('your-font-one.svg#your-font-one') format('svg');
font-weight: normal;
font-style: normal;
}

/*Declare your second font*/
@font-face {
font-family: 'your-font-two';
src: url('your-font-two.eot');
src: url('your-font-two.eot?#iefix') format('embedded-opentype'),
url('your-font-two.woff') format('woff'),
url('your-font-two.ttf') format('truetype'),
url('your-font-two.svg#your-font-two') format('svg');
font-weight: normal;
font-style: normal;
}

/*Using your fonts, specifying a fall back just in case your font doesn't load, here I've just used sans-serif but you could be more specific.*/

p {
font-family: 'your-font-one', sans-serif;
}

h1 {
font-family: 'your-font-two', sans-serif;
}


Let us know how you get on.

Cheers Ricky

PS
One final note, when using custom fonts, make sure that your design benefits from them as they do add to the weight of your site. So use them wisely.

Crumpy1
12-27-2012, 05:01 PM
I love how you added an !important just out of desperation.

You declare your fonts like this, usually at the top of your style sheet.

You don't need to specify bold or italics as it will get this from the font type. If you want to use italics or bold use that version of the type face.

Your css would look like this.


/*Declare your first font, making sure the path is correct from your style sheet*/
@font-face {
font-family: 'your-font-one';
src: url('your-font-one.eot');
src: url('your-font-one.eot?#iefix') format('embedded-opentype'),
url('your-font-one.woff') format('woff'),
url('your-font-one.ttf') format('truetype'),
url('your-font-one.svg#your-font-one') format('svg');
font-weight: normal;
font-style: normal;
}

/*Declare your second font*/
@font-face {
font-family: 'your-font-two';
src: url('your-font-two.eot');
src: url('your-font-two.eot?#iefix') format('embedded-opentype'),
url('your-font-two.woff') format('woff'),
url('your-font-two.ttf') format('truetype'),
url('your-font-two.svg#your-font-two') format('svg');
font-weight: normal;
font-style: normal;
}

/*Using your fonts, specifying a fall back just in case your font doesn't load, here I've just used sans-serif but you could be more specific.*/

p {
font-family: 'your-font-one', sans-serif;
}

h1 {
font-family: 'your-font-two', sans-serif;
}


Let us know how you get on.

Cheers Ricky

PS
One final note, when using custom fonts, make sure that your design benefits from them as they do add to the weight of your site. So use them wisely.

Thanks for the css!

I did not realise until I used font squirrel that Calibri is a licenced font that i need to buy a licence for. I am currently looking for a free font that looks similar to this, i have tried a few and the css you gave me works perfectly, however some were distorted or looked heavy in bold so i am still looking.

Thanks Guys for the help!

Ricky55
12-27-2012, 09:09 PM
Some fonts will look terrible if you just use CSS to make them bold and or italic. If you you want to use bold and or italic get that type face.

On a site I did recently for example I used the font museo sans.

For the standard body copy I used museo sans 300 weight and for areas that I wanted to be bolder for example links etc I used museo sans 700 so I was using the true bolder version not just asking the browser to fake it.

So I would have

p {
font-family: 'museo-sans-300', sans-serif;
}

a, strong {
font-family: 'museo-sans-700', sans-serif;
}

This isn't always necessary but I found that I got better results that way, same for italics.

Ricky55
12-27-2012, 09:17 PM
BTW, Tahoma isn't that dissimilar to Calibri and thats a web safe font or you could try Droid Sans, which is a free Google Font. You don't even need to use @font-face with Google fonts.

http://www.google.com/webfonts