Question

I want a font to ‘fall back’ to a certain font on google web fonts (Open Sans) if the user doesn’t have helvetica installed, is there a simple way of doing this?

My idea is that i only want the user to have to download the font if they have to, eg for mac users i don’t want them to have to download the font.

Eg, something like this, if possible:

font-family: HelveticaNeue-Light, 'Open Sans Light', Arial;

Also, since i’m using the specific light version of helvetica ‘Helvetica Neue Light’, when falling back to open sans / arial is there a way of specifying the font weight in such a way that the weight only applies to the fallback font? Does the following do that?

h1 { font-family: HelveticaNeue-Light, Arial; font-weight: 400; }

Answer 1

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);
}