CODEWITHSUNDEEP
cssfonts
olfek
olfek

Reputation: 3520

Apply font style only if the first font does not load

How can I apply a particular style to some text, only if the first font does not load?

Font 1 is bolder than font 2, in the case that font 1 does not load, I'd like to set the font-weight property for font 2.

Example:

#text{
    font-family: font1,font2;
    font-size: 40px;
    font-weight:bold; /* Only for font 2 */
}

JavaScript solutions are acceptable too.

Upvotes: 2

Views: 1753

Answers (4)

tao
tao

Reputation: 90188

Theoretically, what you want is not possible. But practically, it is.

The bad news: you can't change font-weight property based on what font-family applies, using CSS. Period. Actually, even with JavaScript that's not as easy as it seems, because style.fontFamily property does not change. It's still font1,font2, no matter which one applies.

The good news: you don't have to change font-weight based on font-family!. Use @font-face to define font2 to point at the font files for the bold version of font2 and define it with the same font-weight as font1, even if it's not the "real" one.

@font-face {
  font-family: font2;
  src: url("font2_Bold.ttf"); 
  /*...rest of required font files, eot, woff... all bold */
  font-weight: 400;
}

Also note specifying multiple font-families is a thing of the past, back from the days when websites depended on fonts to be installed on the user's computer to apply.

Today, thanks to modern font formats and @font-face, this never happens anymore. The font file always loads, because it's provided by the website, it doesn't have to be installed on user's machine. So relax. Your font2 will actually load in less than 0.5% cases. And, usually, when a font file fails to load, chances are multiple other resources fail to load, meaning this is one of the smallest problems and a page reload is probably required to view it properly.

If the above is not an option or seems too complicated, you can always use the load event of any resource, including font files:

function fontHasLoaded() {
  document.getElementById('test').style.fontWeight = 400;
}
#test {
  font-family: 'Rubik-Mono-One', Arial, sans-serif;
  font-weight: 900;   
}
<link href="https://fonts.googleapis.com/css?family=Rubik+Mono+One" rel="stylesheet" onload="fontHasLoaded()">

<span id="test">Inspect to see font-weight. Than change font link to a broken link and inspect again.</span>

Upvotes: 2

Amal
Amal

Reputation: 3426

You can do this by downloading required font.

first it will be in ttf

convert it to woff format webfont-generator

@font-face {
    font-family: "Robotoregular";
    font-weight: normal;
    font-style: normal;
    src: local("Roboto Regular"), local("Roboto-Regular"), url("../fonts/roboto/roboto-regular-webfont.woff") format("woff");
}

@font-face {
    font-family: 'montserratbold';
    src: url('../fonts/Montserrat/montserrat-bold-webfont.woff2') format('woff2'),
         url('../fonts/Montserrat/montserrat-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

then apply style to specified

#text{
    font-family: 'Robotoregular','montserratbold';
    font-size: 40px;
}

Upvotes: 0

Mihai T
Mihai T

Reputation: 17697

you could use jQuery for this . for example 

if ($("#text").css('font-family') === 'font2')
{
   $("#text").css({'font-weight': 'bold'});
}

Upvotes: 0

Muran
Muran

Reputation: 82

It seems to be impossible if you want to do it only with css. Js could help.

if(ele.style.fontSize == font2){
    ele.style.fontWeight = xxx;
}

Upvotes: 0

Related Questions