Question 258955 in Html Question posted in
Some basic documentation can be found here.

Set default fallback font for HTML page

Is it possible to set a fallback font that will apply to all text elements on the page?

Let’s say I have an html page like this:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
...
</head>
<body>
...
<p style="font-family:Arial">Text 1</p>
<p style="font-family:Comic Sans">Text 2</p>
<p style="font-family:Agave">Text 3</p>
...
</body>
</html>

And I want Courier to be used as a fallback font on this whole page. Basically, to turn this page into

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
...
</head>
<body>
...
<p style="font-family:Arial,Courier">Text 1</p>
<p style="font-family:Comic Sans,Courier">Text 2</p>
<p style="font-family:Agave,Courier">Text 3</p>
...
</body>
</html>

but without explicitly writing ",Courier" in every text element?

Tags:

2

Answers


  1. 0

    Just use 1 style for whole page (*) but set that font-family as !important

    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
...
  <style>
    * {
      font-family: 'Courier New', Courier, monospace !important;
    }
  </style>
</head>
<body>
...
    <p style="font-family:Arial">Text 1</p>
    <p style="font-family:Comic Sans">Text 2</p>
    <p style="font-family:Agave">Text 3</p>
...
</body>
</html>

    Anything you write without !important will lose its importance, as the more specific css styles you mention in

    elements will be applied. However,if you use !important, the general styles can’t be overwritten.

    Please try and let me know if it works on your side. Was working on mine.

    Login or Signup to reply.
  2. 0

    tl;dr: This is impossible.

    CSS will try each font listed in the font-family in turn until it finds one that is supported or gets to the end and uses the browser’s default.

    There is absolutely no provision in CSS for falling back to a different rule from earlier in the cascade or changing the browser’s default.

    The closest you could come would be to try to iterate over all the relevant elements using JavaScript and try to detect the font in use that way. This is, however, not something the browser provides an API for.

    This question asks about detecting that, but most of the answers completely miss the point of the question. The one that does understand it points to this blog where the author attempts to work out which font is in use by measuring the width of the rendered text and comparing it to the expected width for the font.

    This strikes me as being time consuming to set up for any but a small number of fonts. I suspect it is also very likely to get broken by different rendering engines and variations in fonts. Then you run into the issue that it would render everything and then rerender the things that you change, likely with a visible change of font and layout.

    With all those drawbacks, I wouldn’t go down that route.

    Depending on your goals, you could consider using a tool like SASS to generate your CSS and then use a @mixin (this would make changing the fallback easier, keep your source code more manageable, and maybe save a little typing, but wouldn’t skim any bytes off the result):

    @mixin fontFamily($value) {
  font-family: $value, Courier, monospace;
}

.foo {
  @include fontFamily("Arial");
}

.bar {
  @include fontFamily("Comic Sans");
}

.baz {
  @include fontFamily("Agave");
}

    … although this would require that you replace the style attribute with something you could target with a selector.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search