@font-face bolder

[LastLifeLost]

Below is some CSS I’m playing with. My goal is to define the various levels of boldness for my chosen font. I can make it work for plain old “font-weight:bold” but it doesn’t want to take for “bolder” or any of the numeric values. I’ve searched google, but haven’t found anything that mentions levels beyond “bold”. Am I asking the impossible or have a just missed something?

@font-face {

font-family: 'Walkway';

src: url('/fonts/Walkway_SemiBold-webfont.eot');

font-weight: normal;

font-style: normal;

}

@font-face {

font-family: 'Walkway';

src: url('/fonts/Walkway_Bold-webfont.eot');

font-weight: bold;

font-style: normal;

}

@font-face {

font-family: 'Walkway';

src: url('/fonts/Walkway_UltraBold-webfont.eot');

font-weight: 800;

font-style: normal;

}

@font-face {

font-family: 'Walkway';

src: url('/fonts/Walkway_Black-webfont.eot');

font-weight: bolder;

font-style: normal;

}

[chrisburton]

It’s probably due to your code.

[LastLifeLost]

Thanks for the quick comment. Just tried, no joy. Another interesting issue: none of the styles will apply via class or id. They will work, however, if added as inline styles. I cannot for the life of me see where they’re being held up or overwritten, either!

[chrisburton]

I edited my post. It’s because you’re setting the font-family to ‘Walkway’ but you have multiple weights as a source.

[chrisburton]

Try this

@font-face {

font-family: 'WalkwaySemiBoldRegular';

src: url('/fonts/Walkway_SemiBold-webfont.eot');

src: url('/fonts/Walkway_SemiBold-webfont.eot?#iefix') format('embedded-opentype'),

url('/fonts/Walkway_SemiBold-webfont.woff') format('woff'),

url('/fonts/Walkway_SemiBold-webfont.ttf') format('truetype'),

url('/fonts/Walkway_SemiBold-webfont.svg#WalkwaySemiBoldRegular') format('svg');

font-weight: normal;

font-style: normal;



}





@font-face {

font-family: 'WalkwayBoldRegular';

src: url('/fonts/Walkway_Bold-webfont.eot');

src: url('/fonts/Walkway_Bold-webfont.eot?#iefix') format('embedded-opentype'),

url('/fonts/Walkway_Bold-webfont.woff') format('woff'),

url('/fonts/Walkway_Bold-webfont.ttf') format('truetype'),

url('/fonts/Walkway_Bold-webfont.svg#WalkwayBoldRegular') format('svg');

font-weight: normal;

font-style: normal;



}







@font-face {

font-family: 'WalkwayUltraBoldRegular';

src: url('/fonts/Walkway_UltraBold-webfont.eot');

src: url('/fonts/Walkway_UltraBold-webfont.eot?#iefix') format('embedded-opentype'),

url('/fonts/Walkway_UltraBold-webfont.woff') format('woff'),

url('/fonts/Walkway_UltraBold-webfont.ttf') format('truetype'),

url('/fonts/Walkway_UltraBold-webfont.svg#WalkwayUltraBoldRegular') format('svg');

font-weight: normal;

font-style: normal;



}







@font-face {

font-family: 'WalkwayBlackRegular';

src: url('/fonts/Walkway_Black-webfont.eot');

src: url('/fonts/Walkway_Black-webfont.eot?#iefix') format('embedded-opentype'),

url('/fonts/Walkway_Black-webfont.woff') format('woff'),

url('/fonts/Walkway_Black-webfont.ttf') format('truetype'),

url('/fonts/Walkway_Black-webfont.svg#WalkwayBlackRegular') format('svg');

font-weight: normal;

font-style: normal;



}

[LastLifeLost]

Yes, that is an option, but it should be working differently. See this link for a run-down of what I’m trying to do.

My method should be working to define one source for normal/normal, one source for normal/bold, another for italic/bold, etc. It works for bold, italic and bold/italic. It won’t work for “bolder” or “font-weight:800” right now.

[chrisburton]

This works for me. http://jsfiddle.net/fkryW/

[LastLifeLost]

Fixed it, there was an extra } in the css that was blocking the classes from applying. Removing it also seems to have corrected the issue with numeric values not applying. Below is the resolved code.

@font-face {

font-family: 'Walkway';

src: url('/fonts/Walkway_SemiBold-webfont.eot');

src: url('/fonts/Walkway_SemiBold-webfont.eot?#iefix') format('embedded-opentype'),

url('/fonts/Walkway_SemiBold-webfont.woff') format('woff'),

url('/fonts/Walkway_SemiBold-webfont.ttf') format('truetype'),

url('/fonts/Walkway_SemiBold-webfont.svg#WalkwaySemiBoldRegular') format('svg');

font-weight: normal;

font-style: normal;

}

@font-face {

font-family: 'Walkway';

src: url('/fonts/Walkway_Bold-webfont.eot');

src: url('/fonts/Walkway_Bold-webfont.eot?#iefix') format('embedded-opentype'),

url('/fonts/Walkway_Bold-webfont.woff') format('woff'),

url('/fonts/Walkway_Bold-webfont.ttf') format('truetype'),

url('/fonts/Walkway_Bold-webfont.svg#WalkwayBoldRegular') format('svg');

font-weight: bold;

font-style: normal;

}

@font-face {

font-family: 'Walkway';

src: url('/fonts/Walkway_UltraBold-webfont.eot');

src: url('/fonts/Walkway_UltraBold-webfont.eot?#iefix') format('embedded-opentype'),

url('/fonts/Walkway_UltraBold-webfont.woff') format('woff'),

url('/fonts/Walkway_UltraBold-webfont.ttf') format('truetype'),

url('/fonts/Walkway_UltraBold-webfont.svg#WalkwayUltraBoldRegular') format('svg');

font-weight: 800;

font-style: normal;

}

@font-face {

font-family: 'Walkway';

src: url('/fonts/Walkway_Black-webfont.eot');

src: url('/fonts/Walkway_Black-webfont.eot?#iefix') format('embedded-opentype'),

url('/fonts/Walkway_Black-webfont.woff') format('woff'),

url('/fonts/Walkway_Black-webfont.ttf') format('truetype'),

url('/fonts/Walkway_Black-webfont.svg#WalkwayBlackRegular') format('svg');

font-weight: 900;

font-style: normal;

}

@font-face {

font-family: 'Walkway';

src: url('/fonts/Walkway_Oblique_SemiBold-webfont.eot');

src: url('/fonts/Walkway_Oblique_SemiBold-webfont.eot?#iefix') format('embedded-opentype'),

url('/fonts/Walkway_Oblique_SemiBold-webfont.woff') format('woff'),

url('/fonts/Walkway_Oblique_SemiBold-webfont.ttf') format('truetype'),

url('/fonts/Walkway_Oblique_SemiBold-webfont.svg#WalkwayObliqueSemiBoldRegular') format('svg');

font-weight: normal;

font-style: italic;

}

@font-face {

font-family: 'Walkway';

src: url('/fonts/Walkway_Oblique_Bold-webfont.eot');

src: url('/fonts/Walkway_Oblique_Bold-webfont.eot?#iefix') format('embedded-opentype'),

url('/fonts/Walkway_Oblique_Bold-webfont.woff') format('woff'),

url('/fonts/Walkway_Oblique_Bold-webfont.ttf') format('truetype'),

url('/fonts/Walkway_Oblique_Bold-webfont.svg#WalkwayObliqueBoldRegular') format('svg');

font-weight: bold;

font-style: italic;

}

@font-face {

font-family: 'Walkway';

src: url('/fonts/Walkway_Oblique_UltraBold-webfont.eot');

src: url('/fonts/Walkway_Oblique_UltraBold-webfont.eot?#iefix') format('embedded-opentype'),

url('/fonts/Walkway_Oblique_UltraBold-webfont.woff') format('woff'),

url('/fonts/Walkway_Oblique_UltraBold-webfont.ttf') format('truetype'),

url('/fonts/Walkway_Oblique_UltraBold-webfont.svg#WalkwayObliqueUltraBoldRg') format('svg');

font-weight: 800;

font-style: italic;

}

@font-face {

font-family: 'Walkway';

src: url('/fonts/Walkway_Oblique_Black-webfont.eot');

src: url('/fonts/Walkway_Oblique_Black-webfont.eot?#iefix') format('embedded-opentype'),

url('/fonts/Walkway_Oblique_Black-webfont.woff') format('woff'),

url('/fonts/Walkway_Oblique_Black-webfont.ttf') format('truetype'),

url('/fonts/Walkway_Oblique_Black-webfont.svg#WalkwayObliqueBlackRegular') format('svg');

font-weight: 900;

font-style: italic;

}



body { font: normal normal normal 1em/1em walkway,'times new roman',serif;}

.bold { font-weight: bold;}

.bolder { font-weight: 800;}

.boldest { font-weight:900;}

.boldest-em { font-style:italic; font-weight:900;}

**edit** Looks like ChristopherBurton found the same solution. Thanks for your help!

[jethro]

Hi, I’m just wondering how this solution works in IE7-8?? Does it appear to display the proper font faces the same as other browsers, or does it appears to be doing a ‘faux’ bold on them? I’ve been having the toughest time getting style linking to work in IE7-8.

[chrisburton]

@jethro Post your code

[Author]

Posts