What's the most suitable font replacement technique - technically, legally and in terms of accessibility - to use a Helvetica font in my website? Up to now I've used sifr as a font replacement method, but for Helvetica, it would pose legal issues because you have to upload the font to your server and therefore it becomes available for download. Is there a method that would allow you to get around that problem?
3 Answers
For Helvetica I would just specify the font-family with CSS like so:
body{
font-family: Helvetica, Arial, sans-serif;
}
This says, "use Helvetica if it's available, Arial if it's not, and the system's default sans-serif font if neither are installed". Helvetica is installed on 100% of Mac and iOS devices [source]. The other two cover the rest, and Arial is fairly similar to Helvetica: see this comparison at ilovetypography.
If full cross-platform Helvetica support matters to you, you could use a font hosting service. Helvetica is available from the fonts.com webfonts service. To use it you'd require a subscription, which currently start at $10/month.
-
Yes thank you, Nick, I understand how to use font-family but that doesn't address my needs since it specifically needs to be Helvetica. I will look into your other solution, but I was kind of hoping that if it was going to cost money, it would be a flat fee rather than an ongoing subscription.– JaneDec 20, 2011 at 10:21
-
1@Jane I looked for a Helvetica web font that you could download and host on your own server, but none exists, as far as I can tell. The downloadable version is only licensed for preview and print embedding.– NickDec 20, 2011 at 10:31
There are a number of font sellers online that let you purchase web fonts specifically for embedding in webpages. Helvetica is probably available from at least one of these stores (pretty much any major font store like Veer, MyFonts, FontFont, Linotype, Fonts.com, etc. now offers web fonts). Many of these web font providers also provide web font services that will host the fonts for you as well as let you choose from a large number of fonts for a flat subscription fee. Typekit is the most popular of these services.
In any case, all of these font providers will generate the CSS for you and likely have a suitable web font for your purpose.
If you don't want to spend money purchasing a font just for web use or subscribe to a web font service, then your options are limited to FontSquirrel, Google Web Fonts, and the League of Movable Type. These are open source or freeware fonts that are licensed for free use on the web. Alternatively, some open source desktop fonts may also be converted to web font format using the FontSquirrel conversion tool, licensing terms permitting.
-
Thank you for your thorough response Lèse Majesté. It looks like if I'm going to need to get this to work properly I either need to purchase a subscription or use a similar substitution font but I would much rather avoid having to do that... or of course I could create a CSS background image but that is of course less than ideal.– JaneDec 20, 2011 at 10:26
-
Well in the end I went with a similar font I found on Google Web Fonts. Not a perfect solution, but the client wasn't going to pay to host the font elsewhere and ultimately Google Web fonts worked for the project. Thank you Lèse majesté.– JaneFeb 7, 2012 at 15:56
if you're not going to license Helvetica, you're best bet is to use a very deep font stack; i've actually been using my own "Faux Helvetica" stack and am pleased with it's level of cross-browser/platform functionality. you can view it live at meetOOu.
for more definitive info regarding how to go about building your own, check out
