Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS Font "Helvetica Neue"

Tags:

css

fonts

I often see the websites using font "Helvetica Neue". Is this font safe to use, like eg. Arial? Or do the browsers have trouble rendering it or not many machines have this font? Thanks.

like image 608
Billa Avatar asked Nov 14 '11 07:11

Billa


People also ask

How do I use Helvetica Neue font in CSS?

To use this font on all devices, use a @font-face declaration in your CSS to link to it on your domain if you wish to use it. Just mind the copyright if you do. Make sure the licence you pay for includes web embedding.

How do I use Helvetica Neue font in HTML?

The browser will attempt to match each font name with any installed fonts on the user's machine (in the order they have been listed). In your example "HelveticaNeue-Light" will be tried first, if this font variant is unavailable the browser will try "Helvetica Neue Light" and finally "Helvetica Neue" .


2 Answers

It's a default font on Macs, but rare on PCs. Since it's not technically web-safe, some people may have it and some people may not. If you want to use a font like that, without using @font-face, you may want to write it out several different ways because it might not work the same for everyone.

I like using a font stack that touches on all bases like this:

font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",    Helvetica, Arial, "Lucida Grande", sans-serif; 

This recommended font-family stack is further described in this CSS-Tricks snippet Better Helvetica which uses a font-weight: 300; as well.

like image 95
Syren Avatar answered Oct 02 '22 07:10

Syren


This font is not standard on all devices. It is installed by default on some Macs, but rarely on PCs and mobile devices.

To use this font on all devices, use a @font-face declaration in your CSS to link to it on your domain if you wish to use it.

@font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); }  @font-face { font-family: Delicious; font-weight: bold; src: url('Delicious-Bold.otf'); } 

Taken from css3.info

like image 43
Kyle Avatar answered Oct 02 '22 07:10

Kyle