6

For the sake of design I like to use very large fonts in headings (around 70 - 85 px) To prevent that from overwhelming the page I need a really thin font. I found Poiret One on google fonts and it is categorized as a cursive family. It is a very thin, very elegant font but the default in the cursive family seems to be comic sans which is just the opposite -- very clunky, bold, and unattractive in large headings. In my css file I have:

h1 {
  font-family: 'Poiret One', cursive;
  font-weight: 100;
  font-size: 85px;
  color: #99ccff;
}

I would like to add courier new as a user default font as it is the thinnest of the web safe fonts and add the following attributes to make the character spacing similar to Poiret One so that I don't overflow my bootstrap columns:

font-family: "Courier New";
font-style: normal;
font-size: 4.8em;
font-weight: 400;
letter-spacing: -0.125em;
line-height: 1.5em;

What is the css I can use to tell the browser if Poiret One cannot be viewed by the user, please use courier new with the font modifications as given above?

Looking forward to a solution. Thanks!

Cameron
  • 1,049
  • 12
  • 24
Wendy
  • 61
  • 1
  • You probably need to check if the font face is loaded successfully with JavaScript in order to apply an alternative class as a fallback to the element. Have a look at: http://stackoverflow.com/questions/12312323/how-to-know-if-a-font-font-face-has-already-been-loaded – Hashem Qolami Jun 16 '15 at 04:20
  • The Poiret One font loads ok except for those who don't have scripts enabled or if for some reason they cannot access google fonts. Then comic sans is loaded and it looks terrible so that is why I want to change the default to courier new with the modifications I list above. – Wendy Jun 17 '15 at 17:01

1 Answers1

2

Use font-family like this:

font-family: 'Poiret One', cursive, 'Courier New';

When browser doesn't find Poiret One or a cursive font, then it will use Courier New font.

Cameron
  • 1,049
  • 12
  • 24
Bhojendra Rauniyar
  • 83,432
  • 35
  • 168
  • 231