10

If I want to use TeX fonts (such as cmr10, cmbx10, cmtt10, and so forth) in my HTML documents, what are the recommended ways to do that?

As a thought experiment and proof-of-concept, this afternoon I re-encoded the 140 fonts from the bakoma-fonts package as web fonts and made a font waterfall demonstration page:

The results are encouraging, but I don't know if this is the best way to achieve this. I still need to organize the various sizes and shapes into font families in the CSS style sheet and add CSS classes for invoking the various weights, shapes, and sizes.

I hope I'm not reinventing the wheel here, but I started down this path today because I was unsuccessful in finding any other resources about this topic anywhere. It seems that lots of people want to use fancy TrueType fonts in TeX documents, but I seem to be the only one who wants to use native TeX fonts in my web pages. Is this a road to Hell paved with good intentions and nothing but insanity at the end of the rainbow? I know that ligatures are going to be difficult and that obviously hyphenation is going to work differently, but I still think it would be really fun to use Computer Modern Roman and friends in some of my HTML documents, and the challenge of getting there is so tempting.

  • Any update on your progress? I also wanted to make TeX fonts work well in the browser, particularly the default Knuth's Computer Modern. Did you ever reached the point where a PDF made from the webpage would be indistinguishable from one output using pdflatex? I made this tex account just to ask you a question here. I don't have enough points to comment, you haven't listed your email address in your profile and there's no private messaging system. My email address is colmsloan@gmail.com. Feel free to delete this answer after you've read it. – Colm Sloan Dec 18 '12 at 10:16
  • @ColmSloan — About all the farther I got is this: tex.stackexchange.com/questions/44486/… – Todd Lehman Dec 20 '12 at 0:40
  • Link in post is dead. – David Given Jan 27 '15 at 14:20
  • @DavidGiven — Fixed the URL... thank you for pointing this out. – Todd Lehman Jan 27 '15 at 15:34
7

If you specifically want the Computer Modern fonts on your webpage, your best bet is to use the Latin Modern CM clone, since it is available in OTF format. These could then be used e.g. with @font-face (Fontsquirrel has a good generator).

If you're asking a more general question, e.g. "How do I use any T1 font on my webpage", the answer is a bit more depressing. In that case, your only option would be to generate an OTF font based on the T1 representations. This is nontrivial and presumably time-consuming, but it should be possible using FontForge or similar tools.

tl;dr: Find an OTF alternative if possible, otherwise create an OTF font based on the T1 fonts.

  • 1
    Thanks for the pointer to the Latin Modern collection, @You. I converted all of those and created a CSS style sheet for them, and now my HTML documents look almost like TeX output. It was a lot of work to make get the CSS operational, but it was worth it. – Todd Lehman Jan 17 '12 at 12:54
1

Someone created a project which allows you to have LaTeX fonts inside your HTML. Include the following in the head of your html page, for example:

<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>

I used it for my own purposes and it is working well. As a side note, the documentation says that it is safe to rely on this external css.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.