CODEWITHSUNDEEP
cssfontsexists
Mohammad Saberi
Mohammad Saberi

Reputation: 13166

Can CSS set appropriate properties if a font exists?

I would like to use different fonts in my web application. As their size are not equal, I want to do something in CSS like this pseudo-code: 

if (exists(font1))
{
   font-size: 9pt; font-family: font1;
}
else
{
   font-size: 12pt; font-family: font2;
}

Is it possible? What's the best and correct solution for it? How can I define font-size for a certain font and define another font-size for the next one ?

Upvotes: 4

Views: 524

Answers (2)

Christoph
Christoph

Reputation: 51201

CSS generally does not have conditions or other dynamic structures.

Your problem is solved through the use of so called "font stacks". You declare font-family with a list of comma separated fonts-names. The client browser now picks the font from that list which he has available. That's why the creation of good font stacks is a tricky task (because they should look similar or at least have similar letter spacing / line-height). If you google for Web font stacks you will get some good articles about that topic from professional font-guys who already did the work for you creating nice font-stacks.

An alternative nowadays is to provide the font you want as downloadable font via the @font-face declaration. However keep in mind that:

  • you need several formats to support all browsers
  • they add additional weight to the page load which might be relevant for mobiles
  • You need the right to use the font or use a free font (Google offers a service where you can pick from a variety of free fonts)

Upvotes: 4

Tarun
Tarun

Reputation: 195

You can use javascript statements for that.. or you can assign different id's for your text. For Eg:-

<div id="font1"><p>Some Text</p></div>

and then in your css file :-

#font1 p{
   font-family:sans-serif;
   font-size:10px;
}

so you can assign different fonts to different texts in your web application pretty well...

Upvotes: -2

Related Questions