How to use the computer modern font in webpages?

Question

I never see Computer Modern font, the one shipped as default for LaTeX type setting system, on any webpage.

How to change the CSS so that font will actually work?

Answer 1

Using the Computer Modern font in webpages has become very easy! Just paste the following lines of CSS code in the head section of your html code in order to activate the sans-serif version of that font.

@font-face {
  font-family: "Computer Modern";
  src: url('http://mirrors.ctan.org/fonts/cm-unicode/fonts/otf/cmunss.otf');
}

@font-face {
  font-family: "Computer Modern";
  src: url('http://mirrors.ctan.org/fonts/cm-unicode/fonts/otf/cmunsx.otf');
  font-weight: bold;
}

@font-face {
  font-family: "Computer Modern";
  src: url('http://mirrors.ctan.org/fonts/cm-unicode/fonts/otf/cmunsi.otf');
  font-style: italic, oblique;
}

@font-face {
  font-family: "Computer Modern";
  src: url('http://mirrors.ctan.org/fonts/cm-unicode/fonts/otf/cmunbxo.otf');
  font-weight: bold;
  font-style: italic, oblique;
}

body {
  font-family: "Computer Modern", sans-serif;
}

ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
abcdefghijklmnopqrstuvwxyz<br>
0123456789

Note that the solution here makes the browser load the current version of the fonts from a CTAN mirror, which can be very slow. This is okay for testing purposes, but in the long run I'd recommend you download these .otf files to your own webserver.