Is Helvetica considered a "web safe" font?

Question

Should I consider the font Helvetica to be a web-safe font, i.e. is it a reliable source to set in my CSS that will be accessible on any device?

Answer 1

Not only is Helvetica not safe, but it is also a copyrighted font, so you need a license to use it if you load it as webfont.

As a matter of fact, there are no 100% safe web fonts, since it will depend on the fonts the user have on his/her device, and different operative systems have different font sets. Hence, you need to do something like this:

p{font-family:Arial, Helvetica, sans-serif}

Otherwise, your site will be visualized with the default font the user has set , for example, Times New Roman.

If you want to play safe, I recommend this quite nifty resource: CSS Font Stack. There you can see "safer" fonts, percentage of usage by OS and even the code to use including fallback alternatives

Answer 2

As mentioned there is no such thing as a safe web font. But there is a way to load in missing fonts from your server through the use of @font-face. @font-face was first introduced in CSS2, includes fallback file types, and is widely supported. This wouldn't be a 100% solution but it would be more promising than depending on the machine's font selection.

First you would put the file on your server as a regular static hosted file. You might have to configure your web server's mime types so it properly handles the file and doesn't attempt to make the client manual download it instead.

Then you would implement code in your stylesheet that looks like the following. Take note these are just some of the possible formats. You are not required to use all of them. But if you are not delete the reference to the file to avoid an unnecessary delay caused by the missing resource.

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

After which you would assign the font to your element. If you wanted to attempt to use your version of the Helvetica use something like:

font-family: 'MyWebFont', Helvetica, sans-serif;

If the font-face cannot be loaded it will attempt to use the machine's Helvetica and if that fails it will attempt load sans-serif. Additionally you can swap your font and the machine font around. But it won't save your bandwidth because it will still load your fonts once it loads the stylesheet.

Last but most importantly Helvetica is not a free font. You will need to buy a license for its usage. Linotype will sell you the necessary web fonts and license from their website. Pricing is based on page views. But once purchased it is completely legal to embed in your webpage or web app.

Answer 3

Helvetica is not part of any Windows default font-set, therefore Windows users are likely to see another secondary font. If that's not a concern for you, use Helvetica.

Answer 4

be accessible on any device

Really no such thing as 'available on any device'.

If you're not using embedded fonts, then you need to use a font-stack, so you have some back up options in case the first isn't available.