CODEWITHSUNDEEP
svgfontscross-browser
Bram
Bram

Reputation: 8263

SVG Fonts that are safe to use, across platforms

I making SVG diagrams that have text in them. I want the text to stay as text, and not as curves in order to keep the file size small.

This has the problem of missing fonts, though. I picked a nice looking font on my Ubuntu machine, but when I then view the diagram on an Android phone, the text looks absolutely nothing alike. It's like day and night. (The font in question here was cmmi10.)

Is there a set of fonts that I can use and reasonably expect to be available on most, if not all, platforms?

The SVG tag:

    <text
       id="text894"
       y="183.99944"
       x="183.92883"
       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:35.27777863px;line-height:1.25109994;font-family:cmmi10;-inkscape-font-specification:'cmmi10, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:end;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:end;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332"
       xml:space="preserve"><tspan
         sodipodi:role="line"
         id="tspan902"
         x="183.92883"
         y="183.99944">PauliX</tspan></text>

On Ubuntu:

enter image description here

On Android:

enter image description here

Is there some W3C standard that specifies a set of fonts available in any browser?

Upvotes: 3

Views: 1515

Answers (1)

r3mainer
r3mainer

Reputation: 24547

The short answer is "No". The SVG standard doesn't specify any minimal set of fonts.

The easiest option would be to find a set of similar-looking fonts that are available on most systems, such as Times New Roman (Windows), Times (MacOS) and Nimbus Roman (Linux). Then instead of just specifying a single font-family attribute (cmmi10 in your above example), include all of these fonts:

font-family: "Times New Roman", "Times", "Nimbus Roman 9L", serif;

Alternatively, you could embed the font directly into your SVG file. There are plenty of free fonts with licenses that allow you to do this, and there are free tools that you can use to generate subsets of these fonts using only the characters you need.

Here's a simple example. Search this site for better examples of SVG font embedding that work across platforms.

<svg width="500" height="100" viewBox="0 0 500 100">
<defs>
<style type="text/css">
<![CDATA[
  @font-face {
    font-family: "helloworld";
    src: url("data:application/x-font-woff;charset=utf-8;base64,d09GRk9UVE8AAAW4AAoAAAAAB7QAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAADGAAAAmYAAAKVxBnEI0ZGVE0AAAWcAAAAHAAAAByMvmNxT1MvMgAAAVQAAABIAAAAYFgBYb5jbWFwAAAClAAAAHAAAAF6CX0T9mhlYWQAAAD0AAAANQAAADYWuEj+aGhlYQAAASwAAAAeAAAAJAZ9A9VobXR4AAAFgAAAABwAAAAcDtQCc21heHAAAAFMAAAABgAAAAYAClAAbmFtZQAAAZwAAAD4AAAB1/kvzw1wb3N0AAADBAAAABMAAAAg/7gAMnicY2BkYGAA4o8fopvi+W2+MnAzvwCKMNz83LgTQjevY4j+/4I5nOkUkMvBwAQSBQCjjQ7LAAAAeJxjYGRgYDr1/wVDFPMLBiBgDmdgZEAFLAB4YQRZAAAAAFAAAAoAAHicY2Bhvsg4gYGVgYGpi2kPAwNDD4RmfMBgyMgEFGVgZWaAAUYGJBCQ5prCcADICGdW+G/BEMV0ikECoYYpj0EBCBkBYtILb3icjY+xbsIwEIZ/hwCFATGwdEEeKnVKZEcsoM6MHRjYkbBSJCuWDIiX4FmYeAp2noWVP8lVXSq1tnz32ffrvzOAES5Q+F6JsMIQr8IJ+pgJd/COs3BKzU24izEewj0M1ZRKlQ7EtWWFCanlhH3fhDv4xIdwSs1VuAuNu3APE/VSW33BwXMHnHgiactH5304hejJKwpKHFnYsIyVK49+Q1hSXuHQ5EiFo3uBHIZ5wfObcVux/H3GaBkL6i3mtAvVYRli6XSRG73QPyPwYmeZtVlh7PwfA68piNhj1wyo2aBukTe5Hg5rF/e7UGljbG6M0X97PgEHdkXNeJxjYGBgZoBgGQZGBhAoAfIYwXwWhgggLcQgABRhArIUGFwZPBh8GPwZghjC//8Hq1ZgcEERY/z/6P/+/3v/7/q/4/+2/5ugZqIBRjYG7BJIgImAPAgwszAwsAJpoHHsDAwcICFOIrQNCgAARTQVf3icY2BmAIP/WxmMGLAAACzCAeoAeJxNjV9IU2EYxr/vbOe45jzajt+QOGnEFBWiRWSlJjI0QsRCaIT2x8LSaiYppkiBIkvWxxxrYYiV3gSpDNtFBdEBSaiowEAi/AORQRcFXUXvd3qP1LGbet67l9/z/ChxOgmlNLP9bDjc2dvZFW4lVCKUlIpsInQqtkoi3yHynF+6zW/mSVknHdk6ITk6Gdisk1Jduuglzg3eZZ+X6D2Xzgfs/Fv7b5cQOmyThaSIlJAdJEB2k33EvVH2kzpSTzh5RJ10O22lY3QRG7ghag1qGDBnOAyf8Ispy68YVi8TtTBn1Wao4EuJ0VkK8hOzOO2AXWY5M4ut0fVi5ZR4yqxVs1+sZqg/VaiAHHSBTyPHxRrTquFHgGkD1ywZzlyeh/o2aJO1avwKEhPeGQhi9SDex0Y8JmsDFlHUC+Idg6YpJkKpJOo4OTG+BwLjY1iFZUMxzIU7RhRDVpjLKkyDiiooXiiAMiyCco2YPqd2BHZG2Nvb3+/G7HTjNOcubRL6k8PQBw08su7Cci5rLQmYxhtcjsZtogDLFBW6odKxLJYZ+NMMKmODVgu8fnkUu6yDtkxkmc/YEj5m4O14g3oPnsPSZjw03watMl+AbfE4qBM8H28usr3Yt4Av4F4FjBiL8OqALbryUVbXxEMG7afZIG6BvMj8h8MrMj74zIQ7uYDB/fazCW9h1Qn0QGNJpAPrsWhD+wlqHM/NFjaLEoNQYsiqBB1GZA5VeD0aTYggL4Aa3rwuYR1HBUIoYehv89fVXDPIeidM6b2S76aFvz2buMedcqdiS0mPJ52ZTqwkZuKxpCfrD9ZUL+wAAAH0AAAD6ABxAxkAAAPoAKcApQCLAMsAdQCHAFsAAAABAAAAANjXXgkAAAAA2fOBuQAAAADZ84Ou") format('woff');
  }
]]>
</style>
</defs>
<text x="20" y="80" style="font-family:helloworld; font-size:40px">HELLO WORLD</text>
</svg>

Upvotes: 6

Related Questions