Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use the computer modern font in webpages?

Tags:

css

fonts

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?

like image 428
Chao Xu Avatar asked Jun 25 '11 06:06

Chao Xu


People also ask

What font is Computer Modern?

Computer Modern is a 'Didone', or modern serif font, a genre that emerged in the late 18th century as a contrast to the more organic designs that preceded them. Didone fonts have high contrast between thick and thin elements, and their axis of "stress" or thickening is perfectly vertical.

Can you use downloaded fonts on a website?

CSS lets you use custom fonts, downloadable fonts on your website. You can download the font of your preference, let's say myfont. ttf , and upload it to your remote server where your blog or website is hosted.

Is Computer Modern a good font?

Yes it is! It's well-designed as a text font, and it has small caps and text figures.


2 Answers

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.

like image 51
Holger Avatar answered Sep 30 '22 17:09

Holger


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

like image 35
dreampulse Avatar answered Sep 30 '22 19:09

dreampulse