CODEWITHSUNDEEP
htmlcss
Dom Beatson
Dom Beatson

Reputation: 25

Defining different font size for same element

I would like to use an embedded font along side Arial as a substitute. The embedded font requires a much larger font-size.

How can I make sure that Arial displays at 15pt, and Bebas displays at 20pt, for the same element. (For the same piece of text)

Thanks!

*Let me explain further:

I have a string of text. I want it to display as Bebas or Arial. When Arial is loaded as a substitute, it needs to have a different font-size and weight, as sharing the font-size doesn't work well for these fonts (Bebas is small).

Upvotes: 2

Views: 116

Answers (1)

Reeno
Reeno

Reputation: 5705

You could use a script like FontChecker to check if a font is available. It relies on MooTools and gets called like this:

window.addEvent('domready',function() {
  var fc = new FontChecker();
  if (!fc.check('Bebas')) {
    $$('.someclass').setStyles({'font-size': '15pt'});
  }
});

If Bebas isn't available, it sets the font size for all elements with class someclass to 15pt.

Your CSS file:

.someclass {
  font-family:Bebas,Arial,sans-serif;
  font-size:20pt;
}

If you don't use MooTools, maybe there's a similar script for other libraries or vanilla JS (=plain JS without libraries). Or just rewrite it, it's quite short.

edit:

Some other scripts (I don't know them, I only use FontChecker):

Upvotes: 1

Related Questions