45

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?

Chao Xu
  • 2,156
  • 2
  • 22
  • 31

7 Answers7

65

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.

<style type="text/css">
  @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;
  }
</style>

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.

Holger
  • 1,078
  • 2
  • 11
  • 12
  • 3
    Very nice, Holger, I was able to do that. A good thing also, would be going to [Font Squirrel font-face generator](http://www.fontsquirrel.com/fontface/generator) and squeeze them from 2.2Mb to 291Kb. Now I can have them o website! :) Also, don't forget to grab the .ttf, not .otf, from the [sf cm-unicode project](http://cm-unicode.sourceforge.net/download.html). – lucasarruda Jun 17 '12 at 19:30
  • 2
    Although my answer was accepted, this answer is (more) correct. Paul Irish has an interesting article about this too: http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/ – Ben Jul 02 '12 at 01:11
  • 1
    What about serif variants? It would be nice if someone explained the acronyms of filenames – gigabytes Jun 20 '15 at 09:04
  • @gigabytes by the way if you ever want to really truly understand the filenames check out ctan.org/tex-archive/fonts and drill down to cm/mf the original Knuth Computer Modern metafont files (.mf), each metafont file has an ascii description of what is in it at the top of the file. For example cmb10.mf is Computer Modern Bold Roman 10 point – don bright Sep 07 '15 at 15:32
  • gigabytes if you want serif, start with something like this @font-face { font-family: 'cmunserif'; src: url('http://mirrors.ctan.org/fonts/cm-unicode/fonts/otf/cmunrm.otf'); font-weight: normal; font-style: normal; } body { font-family: 'cmunserif'; } you can check asmaier 's answer links below for more info – don bright Sep 07 '15 at 15:35
12

Just for anyone in 2020 and onwards still looking for the optimised web fonts rather than the larger .otf fonts which are used in the answers above, I've hosted the Computer Modern font family via the jsDelivr CDN.

To use it, you can add a <link> to your html <head> which requests the optimised fonts through the following address:

https://cdn.jsdelivr.net/gh/aaaakshat/cm-web-fonts@latest/fonts.css

Example Code:

<head>
  <!-- Other imports... -->
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/aaaakshat/cm-web-fonts@latest/fonts.css">
  <style>
    body {
      font-family: "Computer Modern Serif", serif;
    }
  </style>
</head>

Check out the documentation here

aaaakshat
  • 809
  • 10
  • 19
11

You can just insert the https://cdn.rawgit.com/dreampulse/computer-modern-web-font/master/fonts.css css-stylesheet into your html header. Like this:

<head>
  <!-- ... -->

  <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/dreampulse/computer-modern-web-font/master/fonts.css">
  <style>
    body {
      font-family: "Computer Modern Sans", sans-serif;
    }
  </style>
</head>

You can use the font for production websites with any amount of traffic. Files are served via MaxCDN's super fast global CDN. There is no traffic limits or throttling.

The README.md on Github

dreampulse
  • 1,038
  • 10
  • 9
9

Nowadays you can download everything you need (font files and css) from this webpage:

http://checkmyworking.com/cm-web-fonts/

Then the only thing you need to do is to add the corresponding css files to the header section of your html file like:

<head>
    <meta charset="UTF-8" />
    <title>Test</title>
    <!-- Computer Modern Serif-->
    <link rel="stylesheet" href="fonts/Serif/cmun-serif.css"></link>
    ...
</head>
asmaier
  • 11,132
  • 11
  • 76
  • 103
3

you cannot, up until CSS 2.1 you can only use the fonts that are ACTUALLY installed on the client's computer. In CSS 3 there are some ways to embed fonts in your webpage but those ways are not greatly supported by browsers yet. Have a look here: http://home.tiscali.nl/developerscorner/fdc-varia/font-embedding.htm

Bazzz
  • 26,427
  • 12
  • 52
  • 69
1
@font-face {
font-family: "Computer Modern ";
src: url(ace.ttf);
}

.cm { font-family: "Computer Modern"; }

You do need to have a ttf file for that font.

AR.
  • 1,935
  • 1
  • 11
  • 14
0

If you use KaTeX renderer for your website, then you can simply use:

body {
  font-family: "KaTeX_Main";
}

There are also other Latin Modern fonts in KaTeX package which you can find here.

Damodar Rajbhandari
  • 21
  • 3