CODEWITHSUNDEEP
htmlcssfontsfont-facefont-size
Mario
Mario

Reputation: 420

How to assign muliple font-face with individual font-size to same class

I was searching here and in Google for a couple of hours but I could not find any clue on my issue, or I found some answers with non stable or poor supported solutions.

To make it short and clear I have a web page with a menu bar, where I use a condensed font from "Google Web Font":

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz&amp;subset=latin">

Then I have a CSS like this:

.menu {
    font-family: 'Yanone Kaffeesatz', 'Trebuchet MS', Arial, Helvetica, Sans-Serif;
    font-size: 23px;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
    text-transform: uppercase;
    text-align: left;
}

What I want to do is to have font-size: 23px; assigned to font-family: 'Yanone Kaffeesatz' and font-size: 18px; assigned to font-family: 'Trebuchet MS', etc for the others.

Why I want to do that? Because if the user is offline or is unable to download the font from http://fonts.googleapis.com the layout get messed up, because 23px is right for the condensed font 'Yanone Kaffeesatz', but is very large for the others (almost the double in width).

Is there a way to do something like this? (just to explain the concept)

font-family: 'Yanone Kaffeesatz'[size:23px], 'Trebuchet MS'[size:18px], Arial[size:20px], Helvetica, Sans-Serif;

Upvotes: 1

Views: 177

Answers (3)

Luca Detomi
Luca Detomi

Reputation: 5716

This question already received answer on SO. For example:

In addition, there are several external references like:

Hope these help :-)

Upvotes: 0

justin
justin

Reputation: 1548

Sass can't really help here since it doesn't actually run on the client. Sass simply compiles into CSS. Also, I'm pretty sure there's no real way to get CSS to set various font-family/size pairs either.

I know this doesn't really address your "with the same class" bit, but as far as I know, the best way to do this is going to be JavaScript, which is pretty unfortunate because setting typeface/sizing pairs is something more people should do. David Walsh wrote an article about the Google Fonts API and mentions some of the methods the JavaScript font loader provides.

By defining an alternate body class with the non-webfont styles, you can use the inactive callback to fire off a function to apply that class.

There are methods of doing what you're asking, but not reliably, and not with Google Webfonts, since you have no control over the request made to Google's server.

Upvotes: 1

Rohit Rana
Rohit Rana

Reputation: 43

You can try it with Sass, a CSS pre-processor. Sass provides the conditional implementation of CSS styles.

Here's:

Conditionals & Control Structures

https://gist.github.com/chriseppstein/674726

Upvotes: 0

Related Questions