CODEWITHSUNDEEP
htmlcsstypography
user1108675
user1108675

Reputation:

Using @fontface, how do I apply different styles to different font-families?

I'm having trouble with some CSS. Currently I'm using @fontface which works fine and dandy. However for the times that it doesn't I have implemented other fonts to be read however I'd like to style them all a bit differently. For an example, if Rockwell is displayed I'd like the font-weight to be set to bold. But not if it is Times New Roman. Furthermore, I'd only like the "letter-spacing: -4px;" to apply if Times New Roman is being displayed.

Is this even possible? And if so, please assist with some code.

h1{ font: 88px 'Chunkfive', Rockwell, Times New Roman, Georgia; letter-spacing: -4px; }
h1 span{ font: 88px Times New Roman, Georgia, serif; letter-spacing: -4px; }

Upvotes: 4

Views: 854

Answers (3)

Willem Mulder
Willem Mulder

Reputation: 14004

Use two classes, one for each font

.font1 { font-family: 'Chunkfive'; font-weight: bold; }
.font2 { font-family: 'Times New Roman'; letter-spacing: -4px; font-weight: normal; }

Then in your HTML, use them like 

<h1 class="font1">...</h1>
<div class="font2">...</div>

Upvotes: 0

MFix
MFix

Reputation: 229

You have expressed yourself clearly, don't worry.

I do not think there is a direct solution, however in some cases you can use this workaround.

  1. Embed font.
  2. Detect if you succeed (http://www.lalit.org/lab/javascript-css-font-detect/)
  3. If yes/no add to <html> class="fontName" attribute.
  4. In CSS add special declarations, like .fontName body { font-weight:bold; } - be prepared it means a lot of work. Especially with bolding - keep in mind how does <strong> will look like.
  5. Good luck ;)

As every workaround it has some issues - like JS availability and so on. Maybe it will work for you.

Upvotes: 1

Downpour046
Downpour046

Reputation: 1671

What you are trying to do is definitely possible. In order for your script to work as you have it written. You need to follow the steps below:

  1. Upload the font to your CSS directory (if thats where you want to host the font). (You can't just call the ChunkFive font without uploading the font to the directory your CSS is in based on your code)

  2. Specify the @font-face above all your other CSS styles where you plan on using the font. 

     @font-face { 
     font-family: "ChunkFive"; 
     src: url('chunkfive.ttf');   // Or whatever the font name is
 }

Once you have accomplished steps 1 and 2 you can then call your font like you specified above :

h1{ font: 88px 'Chunkfive', Rockwell, Times New Roman, Georgia}

For a more definitive guide into font-face and CSS3 fonts I suggest reading this very thorough and informative blog post:

http://webdesignerwall.com/general/font-face-solutions-suggestions

Cheers and goodluck

Upvotes: 0

Related Questions