Getting italic font everywhere in HTML

Question

I downloaded an example page from the Mathjax website and downloaded their package from Github to use it locally. Additionally, I wanted to use the computer modern font, so I extracted the archive containing ttf files to fonts/cmu.

Here's the modified code for the HTML:

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width">
  <title>MathJax v3 with TeX input and HTML output</title>
  
  <script>
  MathJax = {
    tex: {inlineMath: [['$', '$'], ['\\(', '\\)']]}
  };
  </script>
  <script id="MathJax-script" async src="MathJax-master/es5/tex-chtml.js"></script>

  <style type="text/css">
    @font-face {
      font-family: "Computer Modern";
      src: url('fonts/cmu/cmunrm.ttf');
      font-weight: normal;
      font-style: normal;
    }
    @font-face {
      font-family: "Computer Modern";
      src: url('fonts/cmu/cmunbx.ttf');
      font-weight: bold;
      font-style: normal;
    }
    @font-face {
      font-family: "Computer Modern";
      src: url('fonts/cmu/cmunti.ttf');
      font-weight: normal;
      font-style: italic, oblique;
    }
    @font-face {
      font-family: "Computer Modern";
      src: url('fonts/cmu/cmunbi.ttf');
      font-weight: bold;
      font-style: italic, oblique;
    }

    body {
      font-family: "Computer Modern", sans-serif;
      margin:2em;
      padding:0em;
    }

    p {
      text-align: justify;
    }
  </style>
</head>
<body>
    <h1>MathJax v3 beta: TeX input, HTML output test</h1>
    asdasd
    <p>
    When $a \ne 0$, there are two solutions to \(ax^2 + bx + c = 0\) and they are
    $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
    </p>

    <h2>The Lorenz Equations</h2>

    <p>
    \begin{align}
    \dot{x} &amp; = \sigma(y-x) \\
    \dot{y} &amp; = \rho x - y - xz \\
    \dot{z} &amp; = -\beta z + xy
    \end{align}
    </p>

    <h2>In-line Mathematics</h2>

    <p>Finally, while display equations look good for a page of samples, the
    ability to mix math and text in a paragraph is also important.  This
    expression $\sqrt{3x-1}+(1+x)^2$ is an example of an inline equation.  As
    you see, MathJax equations can be used this way as well, without unduly
    disturbing the spacing between lines.</p>

</body>
</html>

When I open up the html file in Chrome browser (Mac OS), all the text is italic for some reason. I'm sure that cmunrm is the regular font and I didn't use the <i> tag, so I don't understand why everything is being rendered in italics. Can anyone help?

Here's the screenshot:

If you have only one font file, you can try using @font-face just once. Maybe this would help. — Maciej Bledkowski, Aug 07 '20 at 15:48
@MaciejBłędkowski: But the regular and italic versions of the font are in entirely different files, AND the tag applied to the regular font doesn't give the desired result - it's not the same as the italic version — user9343456, Aug 07 '20 at 15:54

score 2 · Accepted Answer · answered Aug 07 '20 at 15:59

2

After some research, I've found this post on StackOverflow and apparently you simply need to remove oblique.

answered Aug 07 '20 at 15:59

Simone Aronica

119
4

Getting italic font everywhere in HTML

1 Answers1