What Are Cross-Browser, Cross Platfom Web Safe Fonts

What are cross-browser, cross platfom web safe fonts?

You cannot guarantee the fonts that will be used on a mobile device the same way you can guarantee which fonts are available on a normal computer.

A safe bet is to use a generic font family that can be interpreted by the mobile browser to show you the relevant font, e.g.

font-family: serif; /* (e.g., Times) */
font-family: sans-serif; /* (e.g., Helvetica) */
font-family: monospace; /* (e.g., Courier) */

Is there a modern list of web-safe fonts?

You can find from here http://cssfontstack.com/
include the different system match.

list of safe fonts for MODERN browsers

Font selection has nothing do to with how modern the browser is. Font selection is limited to what is installed by default on Windows/Mac OS X/Linux.

However, with modern browsers, you have the option to embed custom fonts using the CSS @font-face declaration. If you decide to embed a font using CSS, make sure that the font's license permits you to do so. Font Squirrel & Google Web Fonts have a large collection of embeddable fonts.

SVG Fonts that are safe to use, across platforms

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>

Is it safe to use UTF-8 characters (like ✖) on my web-page?

It's always safe - your user's computers won't suddenly burst into flame.

From a technical perspective, your best bet is to use a web font that has support for every Unicode character you want to use. That is not a catch-all (the user might have web fonts disabled or is using a command line browser, etc...), but it should support the vast majority of computers.

From there I would apply common sense. If the displaying of a character is absolutely crucial and lives depend on it, try to not use Unicode. Otherwise I'd say 'go ahead'.

CSS font differences between browsers

Even with identical CSS rules and identical font files you will never have exactly identical rendering:

1. modern font formats are composed of layers of overlapping instructions, where the "new better" way does not replace previous iterations, but is present in addition to those. The advantage is that old software can still read the old-style instructions and work as before. The disadvantage is that the same property is described in many different ways and they do not give the same results (you'd think the newest layer would give the best results but the font designer may have only extensively tested and debugged an older one)

2. to add insult to injury some are system-specific (Windows, OS∕2, OSX…) so even the same generation of software won't read the same instructions depending on the target system

3. lastly even if a font only contained a single instruction layer, and all your browsers read it completely, they would have some leeway in interpreting it. On an ideal retina screen with high pixel density they'll all use the same shapes and coordinates, but actual screens have too low pixel densities to display small complex text shapes accurately. So the text engines have a choice between displaying sharp but jaded lines (distorting the glyph shapes so they snap to a monochrome pixel grid) or smooth but blurry lines (approximating ideal shapes by playing on pixel grayness level or even subpixel colors). Those adjustments will move text pixels around.
   
   Depending on the system text rendering conventions are not identical. OSX will lean towards smooth blurry rendering, Windows towards sharp jaded rendering, and the Linuxes cover all the choices in-between.

4. And of course, even on the same system the same software won't make the same choices depending on the quality (pixel density) of the hardware available.

For some insight on all the possible rendering strategies a text engine can choose see

https://docs.google.com/document/d/1wpzgGMqXgit6FBVaO76epnnFC_rQPdVKswrDQWyqO1M

You can not usually control the text rendering compromise chosen by the browser from your web site. Even if you could forcing windows-style rendering on osx (or the reverse) would only annoy uses that want your web site to behave like all the other text they see on their screen. And in fact, the more tolerant your web site will be to browser's font rendering choices, the better it will be. A web site is dynamic. A web site can reflow. Pixel-perfect is not a user ideal. If you want pixel-perfect, serve them a bitmap image, and you'll quickly see how much it is appreciated.

Therefore, only use @font-face for specific design effects, and not to try to force a specific text pixel placement on your site. The first will work beautifully. The second, not at all. If you use @font-face do remember fonts are covered by copyright so sharing any font requires legal permission.

PS. Helvetica is an old font design. It has been derived so many times requesting 'Helvetica' on different systems will yield a plethora of results. So this is a font that can not be used on the web without @font-face.

fonts opentype text-rendering

---

Related Topics