76
I still think that for web, the best free option out there is Liberation Sans. It renders perfectly with @font-face.
But you can get Helvetica Neue for web from Fonts.com for web use for a fair price too. I would probably use font-family:"Helvetica Neue, Helvetica, Liberation Sans, Arial, sans-serif"; so those pcs with the font installed can see it, and ...
51
Roboto is a good neo-grotesque sans that can replace Helvetica. Commissioned by Google and released for free. Used as Android's default font.
Google re-designed Roboto in July 2014. The above sample has now been updated.
More about Roboto's (pre-redesign) similarity to Helvetica here. I wouldn't overstate its similarity, but I would say it's a good ...
44
Option 1: Use a browser extension (Easy)
Extensions such as WhatFont (available for Chrome, Firefox and Safari) make it quite easy to detect font families of any text in a webpage. You just need to install the extension, activate it on a site and click on the element you want to inspect. The results are shown in a floating box, always in the context of your ...
40
You embed fonts in CSS by using base64 encoding. You can apply styles in SVG documents similar to CSS by using a <style /> element. So if you have a WOFF font, you'd embed it like this:
<style>
@font-face {
font-family: "Sample font";
src: url("data:application/font-woff;charset=utf-8;base64,...");
}
</style>
Where ... is the ...
31
Arimo (see samples above and below) is identical to Liberation Sans (suggested by Yisela) and available from Google Fonts.
The following font stack includes Arimo and suppresses the substitution of Arial for Helvetica on Windows machines and WebKit browsers, but otherwise puts the most Helvetica-Neue-like fonts first:
"Helvetica Neue", HelveticaNeue, "...
28
Tex-Gyre-Heros is for me the best one.
Enjoy it!
Tex-Gyre fonts at GUST e-foundry home
Install on Ubuntu:
sudo apt install tex-gyre
27
One family I've recently noticed is the TT Chocolates and the Extra Light looks pretty close to what you need, but note the '1' in the image below is replaced with an uppercase 'i' (as suggested by Chris H in the comments below).
25
Nunito is really quite different to Avenir - the letters are quite rounded.
I've done some serious work on this for a client and found the Google font Lato is virtually indistinguishable from Avenir - you can literally put two words in the two fonts next to each other and not tell the difference.
22
That's the thing about Helvetica, there isn't really anything quite like it. We are talking about one of the (if not the) most beautiful font in existence.
You could settle for Open Sans or Source Sans Pro but it won't be the same. But you probably already know that as there are only 121 fonts to choose from.
19
You need to put CSS in the defs section.
Something like:
<defs>
<style type="text/css">
@font-face {
font-family: Delicious;
src: url('../fonts/font.woff');
}
</style>
</defs>
19
It's not in Google fonts (I think), but the .ttf can easily be converted for @font-face. I find Liberation Sans really beautiful. Plus it renders REALLY well in most browsers, and it's free for personal and commercial use:
http://www.dafont.com/liberation-sans.font
17
A "web font" is just a font used on the web or on the browser. What these web font generators do is just make your life easier by giving you the necessary css for serving the font to your visitors and converting your font to all file formats you need to make sure the font works cross-browser.
Some fonts are considered "web-safe" simply by being so common ...
16
I just tried the "Roboto" font and it seems OK:
15
The closest open source licensed font to Helvetica Neue I have found is surprisingly GNU FreeSans. Below is a sample from Inkscape, with FreeSans at the top and Helvetica Neue at the bottom. The glyphs are nearly identical, some are a little closer to original Helvetica. The spacing varies slightly (at least in Inkscape). The biggest difference I can see ...
15
If you really want to use a Google Font, I highly suggest using NUNITO. It has 3 styles: Book, Normal, and Bold. Here is a sample comparison between Book 300 and Avenir: https://web.archive.org/web/20140415053621/http://joelcrawfordsmith.com/new/font/avenir The sentence length is a perfect match and x-height is great. Its only fault is that the ascenders ...
15
It's legal to ask the browser to use Helvetica Neue if it's available on the system, but you'd need a license if you want to serve the font yourself. One option is to use Helvetica Neue if it's system-installed and fall back to some other sans-serif font like Arial if it's not.
14
A <defs> section like
<defs>
<style type="text/css">@import url(http://fonts.googleapis.com/css?family=Indie+Flower);</style>
</defs>
works.
14
Tex Gyre Adventor is a really nice replacement for both Avant Garde and Century Gothic. Useful if you also target devices that are not a pc or Mac. It's available as a @font-face kit at FontSquirrel: http://www.fontsquirrel.com/fonts/TeX-Gyre-Adventor
13
On linux you can go to https://github.com/google/woff2 and compile that, then you'll have two utilities, one for compressing fonts to woff2 format and the other to decompress woff2 fonts to ttf.
12
I think Museo Sans is good enough:
On Google fonts there is also Montserrat could be used for some words :)
12
I think the best approach is to use the advanced search tool on your web font service. For example, if you're using Google Fonts, you'd search for "Latin Extended" fonts, and use "ā a" as the test text, to confirm that it contains the macron'd a in the font.
11
These look similar. I hope they'll work for you.
http://www.fontsquirrel.com/fonts/TeX-Gyre-Heros
http://www.google.com/fonts/specimen/Lato
11
For a Helvetica Neue Condensed, you can have a look at the webfont Archivo Narrow:
https://www.google.com/fonts/specimen/Archivo+Narrow
For the Helvetica Neue Black version, this version of Archivo Black is not bad either:
https://www.google.com/fonts/specimen/Archivo+Black
For the other Helvetica Neue like the standard one, other answers have been ...
11
I ended up using Muli from Google Fonts, I think it's pretty close:
11
Constantia would be a better fallback than Times New Roman for Garamond, and Corbel would arguably be a better fallback than Arial for Proxima Nova. They may also have Gill Sans installed with some software, plus Open Sans is not bad.
I'd put something like:
"Adobe Garamond Pro",Constantia,"Times New Roman",Times,serif
"Proxima Nova","Open Sans","Gill ...
11
The first thing to say, is that I want to be honest and I'm affiliate to the software I present bellow (I'm the software designer/programmer of this font identification engine) and I'm really proud about it :)
It's not an online service but a software application that runs on your Mac or Windows PC:
http://www.findmyfont.com
It takes as input a Text image ...
11
This part of your code...
.amp {
font-family: Baskerville, "Goudy Old Style", "Palatino", "Book Antiqua", "Warnock Pro", serif;
font-weight: normal;
font-style: italic;
font-size: 1.1em;
line-height: 1em;
}
Control the ampersands.... Watch the ampersands change as I toggle that CSS on and off....
If you want to change their font, ...
11
Browser's 'inspect element' isn't perfect
Using the developer tools of your browser is a good way to see which fonts are declared in the CSS of a website. This doesn't show which font is actually being rendered though—it only shows the font-stack being applied—the actual font being rendered can vary depending on installed fonts etc.
Another useful tool is ...
11
Yes.
Very much so if you are using Windows, Android, OpenJDK Java development kit, PlayStation 3 & 4, PS Vita, and any other Operating System that uses FreeType that implements the hinting feature.
Also On Windows, projects like gdipp and MacType aim to override the
system renderer with FreeType.
https://en.wikipedia.org/wiki/FreeType#Platforms
...
Only top voted, non community-wiki answers of a minimum length are eligible
