12

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.

Improve this question
4
  • 1
    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 [email protected]. Feel free to delete this answer after you've read it.
    – Ugtemlhrshrwzf
    Dec 18, 2012 at 10:16
  • @ColmSloan — About all the farther I got is this: tex.stackexchange.com/questions/44486/…
    – Todd Lehman
    Dec 20, 2012 at 0:40
  • Link in post is dead.
    – David Given
    Jan 27, 2015 at 14:20
  • @DavidGiven — Fixed the URL... thank you for pointing this out.
    – Todd Lehman
    Jan 27, 2015 at 15:34

2 Answers 2

Reset to default
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.

Improve this answer
1
  • 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, 2012 at 12:54
4

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.

Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .