@font-face problem

[Bokehman]

Hi all – Been doing some testing with @font-face and have kind of hit a wall here.

I did a little test page a few weeks ago, which seems to work fine …

http://element118.com/florinfonttest/

Yesterday I started working on a site for a friend of mine, using the same font, and everything went screwy. It seemed as soon as I added a new font, it either would not preview or other fonts that previously were ok would not preview correctly.

So I decided to back up and do a really simple page, with only 2 text styles …

http://element118.com/florinfonttest_2/

You can see the bold weight is not working (same issue as the other site I’m working on). The font files were copied from my florinfonttest folder, and are all loose in the same folder I have my CSS stylesheet in.

Any thoughts as to why this isn’t working?

TIA

[KarimCossutti]

Ok i’ll try to make it as easy as possible (my english is not brilliant as it should).

On your styleseet you are importing 4 different fonts right now

what you are trying to do is import 4 variants of the same font, to do this you have to change the values of the font-weight and font-size on your @font-face

Here an example

@font-face {

font-family: 'FlorinSans';

/** cutted out the urls to shorten **/

font-weight: normal;

font-style: normal;

}



@font-face {

font-family: 'FlorinSans'; /** Note that i'm using the same name for the bold **/

/** cutted out the urls to shorten **/

font-weight: bold; /** change this to the corrispective font weight **/

font-style: normal; /** change this to the current font style **/

}

Hope it helps

[Rai]

Hi, I was really confuse about the font-face and I find a better solution from Google. Check it here http://www.google.com/webfonts

Bye,
Rai.

[joshuanhibbert]

@Rai Google Web Fonts are convenient but not necessarily better, especially if they don’t have the font you are after!

[Bokehman]

The Google fonts won’t really help as I’ve purchased and must use the font in a website.

KarimCossutti: The code I have in my test pages is what was provided by FontSpring, and it works in my first test site. It just doesn’t seem to work in anything else I create, despite building it the same way.

[chrisburton]

The @font-face code you’re using is correct. Are you sure you’re linking to the fonts? Is it happening in all browsers or just a specific one?

[thealiks]

I don’t think the problem is the CSS bit, I think it’s because you haven’t included a bold version of the font.

[chrisburton]

@thealiks did you take the time to check the web page above? Use firebug, the header font is bold.

[Author]

Posts