How to set different sizes for individual fonts in CSS?

Question

How to set different sizes for individual fonts in CSS?

402 Views Asked by Martin Medro At 24 April 2025 at 19:06

I have a wabpage (HTML) that uses different ttf fonts loaded using @font-face{} in the cascading stylesheet. But, I find that one of the fonts is smaller than the rest. I have Katex loaded in the same page to render the math.

The problem that I am facing is that, since I do not know how to set a suitable size for each font, when I set a particular font size a for elements where I use font A, and b for elements where I use font B, the font also affects the Katex renders of math equations. So if the font A was by default very small, I need to over-ride the default font size and make it much larger to make it look ok, but then the larger font affects the math equations rendered by Katex and makes them extra large!

So my question is:

How can I set different sizes for different fonts in the @font-face{} itself, so that using a particular font doesn't affect the other elements and JS renderers like Katex. I wanted something like:

@font-face {
font-family:myFamily;
src:url(locationOfTtfFont);
font-size:medium;
}
@font-face {
font-family:myFont2;
src:url(locationOfTtf2);
font-size:larger;
}

But, I couldn't get the above to work. Also, looking at the Font Face Rule @w3schools.com, I found that font-size was not in the list of allowed descriptors. Never the less, in the same W3 Schools article, I found another font-descriptor: font-stretch, but that didn't work either.

Original Q&A

There are 1 best solutions below

**A Haworth** · Accepted Answer

Katex uses a default font size of 1.2xem where em is the size of the em of the surrounding text's font. i.e. it renders slightly bigger to help make sub and superscripts more readable.

The problem in the question is that therefore the equations' font size changes with the various fonts in use, one of which renders naturally smaller than another so needs to have its size increased - thus making the equations too large.

It is possible to fix the Katex font size, making it independent of the surrounding text's size, by including a font-size setting in the head of the document.

This may of course cause a different problem, for example if it was required to have much smaller Katex in a footnote so I am not sure it is a full answer to the question. Here's the snippet in case the code is useful for trying different settings out.

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X" crossorigin="anonymous">
    <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js" integrity="sha384-g7c+Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4jAIKs4fnJI+sEnkvrMWph2EDg4" crossorigin="anonymous"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js" integrity="sha384-mll67QQFJfxn0IYznZYonOWZ644AWYC+Pt2cHqMaRhXVrursRwvLnLaebdGIlYNa" crossorigin="anonymous"
        onload="renderMathInElement(document.body);"></script>
  <style>
  .katex {
    font-size: 20px;
  }
  
  p {
  margin: 20px;
  }
  </style>
  </head>
  <body>

  <div style="text-align:center;font-size: 20px;">
  The equations' font-size has been set by including:<br><p style="text-align:center">&lt;style&gt;
  .katex {
    font-size: 20px;
  }
  &lt;/style&gt;</p> in the head of the document after everything else.
  
    <br>-------------------
  
    <p style="font-size: 20px;">
      This text has font-size: 20px and here is the equation 
      <div id="eqn1" style="text-align: center;"></div>
    </p>
    -------------------
    <p style="font-size: 16px;">
      This text has font-size: 16px but the equation size is the same as above
      <div id="eqn2" style="text-align: center;"></div>
    </p>
  </div>

  <script>

  function start() {
    katex.render("c = \\pm\\sqrt{a^2 + b^2}", document.getElementById("eqn1"), {
    throwOnError: false
    });
  
    katex.render("c = \\pm\\sqrt{a^2 + b^2}", document.getElementById("eqn2"), {
    throwOnError: false
    });
  }
  window.onload=start;
  </script> 
  </body>
</html>

How to set different sizes for individual fonts in CSS?

There are 1 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in FONT-FACE

Related Questions in FONT-SIZE

Related Questions in KATEX

Trending Questions

Popular # Hahtags

Popular Questions