Here is an example of a page I recently played with to view math formulas in Firefox. The most interesting for you is the css @font-face declaration at the top, and style="font-family: DejaVu Serif Web;" - tags <div> and <math> .
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN" "http://www.w3.org/Math/DTD/mathml2/xhtml-math11-f.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>mathy fonts test</title> <style type="text/css"> @font-face { font-family: DejaVu Serif Web; src: url(/fonts/DejaVu/ttf/DejaVuSerif.ttf) format("truetype"); } </style> </head> <body> <h1>DejaVu Serif</h1> <div style="font-family: DejaVu Serif Web;"> <p> Nulla eu commodo neque. Donec nec nisi libero. Integer sollicitudin leo vel arcu elementum mattis. Vivamus eu sodales odio. Curabitur eu auctor leo. Pellentesque adipiscing nulla iaculis ante commodo aliquet. Donec egestas tincidunt tincidunt. Nunc ut condimentum orci. Aenean in egestas tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur suscipit, sapien ut dignissim pellentesque, lacus risus facilisis odio, et tristique nunc quam et mauris. Quisque pellentesque nulla et dui bibendum suscipit. Aenean consectetur adipiscing nulla, a molestie nunc semper non. Quisque at ipsum quis turpis gravida commodo et vel felis. Integer lobortis augue eu tortor aliquet nec mattis nulla aliquam. Sed ornare cursus urna et congue. </p> <p> <math style="font-family: DejaVu Serif Web;" mode="display" xmlns="http://www.w3.org/1998/Math/MathML"> <mrow> <mi>x</mi> <mo>=</mo> <mfrac> <mrow> <mo form="prefix">−</mo> <mi>b</mi> <mo>±</mo> <msqrt> <msup> <mi>b</mi> <mn>2</mn> </msup> <mo>−</mo> <mn>4</mn> <mo>⁢</mo> <mi>a</mi> <mo>⁢</mo> <mi>c</mi> </msqrt> </mrow> <mrow> <mn>2</mn> <mo>⁢</mo> <mi>a</mi> </mrow> </mfrac> </mrow> </math> </p> </div> </body> </html>
If you are viewing locally, it needs to be saved as .xhtml, not just the .html that got me a little bit. This, of course, is due to the mathematical material, and not to the font, so this is only a note if you are trying to use this code in its entirety.
There is a decent list of fonts that you can (legally) include in your document here .
Typekit also provides a great way to embed fonts that require licensing deals with types of foundries. They currently offer the option to use one font (of your choice) for free.
Binding fonts has been around for quite some time; the problem was which format you could use. Microsoft, of course, supported its own font format, but Mozilla did not. Sigh
Xiong Chiamiov Jun 03 '10 at 20:29 2010-06-03 20:29
source share