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

Question

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;

Did you consider using JS to detect if the Google Font loads and if not load it from your own server? Alternatively you can use JS to detect if the Google Font loads and if not set a class (to de body element) and provide alternative styles. — allcaps, Apr 04 '14 at 12:03

justin · Answer 1 · 2014-04-04T13:10:01.813

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.

score 0 · Answer 2 · answered Apr 04 '14 at 10:41

0

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

answered Apr 04 '14 at 10:41

Rohit Rana

43
6

I don't understand. Can you give an example? How will this work client side? – allcaps Apr 04 '14 at 11:32
@allcaps sorry buddy i also don't know much about Sass. i was only trying to say that it could have been done using it. I got the link searching for the solution. Will come back with some credible answer. – Rohit Rana Apr 04 '14 at 11:40
No worries. I don't think it can be done. A Sass file will be processed to normal CSS that is served in a web site. – allcaps Apr 04 '14 at 11:54

score 0 · Answer 3 · edited May 23 '17 at 12:11

This question already received answer on SO. For example:

In addition, there are several external references like:

Hope these help :-)

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

3 Answers3