Helvetica Neue Light with @Font-Face .. Legal

Helvetica Neue Light with @font-face .. legal?

If you are just referencing the users system fonts then the licensing requirement is on the User.

If you are providing the font then you (or your client) will need to licence the Font -- even if it's a free font there will likely be some form of licence.

@font-face uses two forms of reference: LOCAL which references the user's system font and URL which effectively uses a copy of a font which you provide and as there is very little point in using the @fontface rule if you aren't going to provide the font then it's almost certain that you'll need to actively obtain a licence.

for example:

@font-face {
  font-family: myHelveticaLight;
  src: local("Helvetica Neue Light"),
       local("HelveticaNeue-Light");
}

Here you are only referencing a user's installed system font and therefore have no have responsibility for obtaining the licence.

In the following example you are also providing a fallback copy of the font so you must have actively obtained a web licence for that font (or rather your client or the website owner will need to)

@font-face {
  font-family: myHelveticaLight;
  src: local("Helvetica Neue Light"),
       local("HelveticaNeue-Light"),
       url(HelveticaNeueLight.ttf);
}

CSS Font Helvetica Neue

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

How do I define my CSS to display 'HelveticaNeue-Light' using Pixate Framework?

You found a bug in Pixate and it has been fixed for Pixate Framework 2.1.

Using Helvetica Neue in a Website

They are taking a 'shotgun' approach to referencing the font. 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".

As far as I'm aware "Helvetica Neue" isn't considered a 'web safe font', which means you won't be able to rely on it being installed for your entire user base. It is quite common to define "serif" or "sans-serif" as a final default position.

In order to use fonts which aren't 'web safe' you'll need to use a technique known as font embedding. Embedded fonts do not need to be installed on a user's computer, instead they are downloaded as part of the page. Be aware this increases the overall payload (just like an image does) and can have an impact on page load times.

A great resource for free fonts with open-source licenses is Google Fonts. (You should still check individual licenses before using them.) Each font has a download link with instructions on how to embed them in your website.

How to fall back to a google web font if the user doesn't have eg helvetica installed

You can specify a local path to the font inside the @font-face src property, so clients who already have the font won't download it from the alternate source. I don't know how well it's supported across browsers, but it should work with any browser that has font-face support.

@font-face {
  font-family: Helvetica;
  src: local(Helvetica), url(/path/to/Helvetica.ttf);
}

---

Related Topics