How can I use symbol fonts like marvosym in the browser?

Question

I would like to use some special fonts which are used in LaTeX. For example, I would like to display the \Pluto from marvosym:

enter image description here

How can I display this symbol with HTML / JavaScript / CSS without using an image?

The font can be downloaded from http://www.marvosym.com/download.html

It is symbol 201 in that font.

I tried

<p style="font-family: 'marvosym'">&#201;</p>

with Chrome, but it only showed É (I have installed this font; fc-list | grep marvosym shows it)

According to http://www.lalit.org/lab/javascript-css-font-detect/, `marvosym` is not installed. Do I have to restart my system so that chrome "detects" that mavosym is installed on my system? — Martin Thoma, Feb 23 '15 at 12:51

score 1 · Accepted Answer · edited May 23 '17 at 12:12

You can link the font in a standard CSS way, as in this answer: https://stackoverflow.com/a/13585273/1161631

I would actually recommend providing at least TTF/OTF and WOFF formats, since they seem to have a good coverage together, see @font-face on w3schools.

Then you should be able to use É to access the symbol stored in the slot. However, remember that this is an abuse of the unicode slots, will not copy-paste properly, and a fallback will show some non-sense in case the font doesn't load properly.

If you have a marvosym.woff the following example will work in many browsers:

<html>
<head>
    <style>
        @font-face {
            font-family: 'marvosym';
            src: 
            url('marvosym.woff') format('woff');
        }
    </style>
</head>
<body>
    <p style="font-family: marvosym">&#201;</p>
</body>
</html>

How can I use symbol fonts like marvosym in the browser?

1 Answers1