71
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 ...
50
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 ...
38
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 ...
29
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, "...
24
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
21
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.
21
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.
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
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>
15
I just tried the "Roboto" font and it seems OK:
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 ...
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
14
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.
12
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 ...
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
A <defs> section like
<defs>
<style type="text/css">@import url(http://fonts.googleapis.com/css?family=Indie+Flower);</style>
</defs>
works.
11
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.
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 ...
10
One thing to get out there right away:
It looks like you want 1) free, 2) multiple weights, and 3) extended character sets. That's a difficult combination. With a lot of these, a combination of 1 and 3 is possible, that usually means you have to pay to get 2. If 1 and 2 are combined, it's often at the expense of 3.
Back to your question...
Trebuchet is ...
10
There are actually a handful of different weights for Open Sans. This is most likely the Open Sans Light 300.
10
Actually there are some pretty simple principles if your number one criteria is a high-readability font for a website.
Think mainstream. Thanks to @font-face you could choose from thousands and thousands of fonts - but less popular or newer fonts often have rendering issues between browsers and operating systems, sometimes even when they come from ...
10
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 ...
10
The most condensed monospace, open-source font I've found is via fontsquirrel and is called M+ 1m.
10
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
...
9
Century Gothic is pretty well-saturated on the Web and has letterforms that are in the same ballpark as Avant Garde. If a Mac doesn't have it on their system, you can put Futura lower down the font stack.
Not sure how scientific these surveys are, but the numbers are in line with what I've read before: Century Gothic is on probably about 87% of PCs (63% of ...
9
My solution: SVG sprite sheets with PNG fallback
Personally, I think icon fonts are a poor stop gap technology that won't be around in 5 years. SVG images are a far better way to go if you need vectors. SVG has most of the benefits of icon fonts, plus:
SVGs can contain colours, gradients and other effects.
Works with img tags.
Works as CSS background-...
9
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
Only top voted, non community-wiki answers of a minimum length are eligible
