3

I'd like to use Futura font on my website. I know I can just state it in the 'font-family' attribute, like this:

font-family: 'Futura', 'Helvetica', 'Arial', sans-serif

but afaik, that uses the font IF it is installed on the user's computer. I suppose I need to buy the license for the font if I want to also embed it in my website, so everybody sees the page with Futura. But do I need to buy the font if I just list it in the font-family?

1
  • 1
    I am not answering the question, but want to help solve a problem. Search for a web font you like here: google.com/fonts
    – Rafael
    Sep 5, 2015 at 16:19

3 Answers 3

2

If you're not serving the font from your server, you're only displaying it to people who already own the font. For anyone else, the browser will drill down the font stack till it finds a matching font on the computer.

WebFonts and Licensing

A webfont is a font that is used online. What makes it different is that the font is formatted so that browsers can see and render it accurately. This is often called a dynamic font, because the creator and user must have the font to see it properly.

These fonts are often embedded in the design project to ensure this works properly. Fonts can be embedded by the designer (but most licenses do not allow for this), while others include hosted embedding (this is how most webfont services work).

The wording of the license will specify if you can embed the font on your site or not.

http://designshack.net/articles/typography/what-is-a-font-license-and-do-i-need-one/


However, (unsolicited advice) as far as designing and developing goes, I'd probably recommend either embedding the font, or not including it at all. It makes it too hard to have a consistent experience across all devices, and also means you have to QA everything for both fonts (at least, you probably should, since different fonts will change the layout)

Helvetica (the second font in your stack) is not a standard font either. I would definitely rethink having the first two fonts be non-standard and non-embedded for the above reasons. You can try embedding "Helvetica Neue," which I've found is an excellent alternative to Helvetica, (but you will have to buy the font)

Here are some other alternatives you might want to check out: http://intavant.com/blog/2012/futura-web-font-alternatives/

Is there a free 'Helvetica Neue' alternative?

4
  • Note that the 'different fonts/inconsistent experience across devices' is always an issue with or without embedding the font. Every device browser and OS can change the font rendering and size. That's just a part of web design.
    – DA01
    Sep 5, 2015 at 17:04
  • correct, but if the scenario I'm talking about, we're talking about some people seeing futura, some people seeing helvetica, and everyone else seeing Arial, not just "it renders thicker on firefox than chrome"
    – binky
    Sep 5, 2015 at 21:26
  • For sure, but that's still an issue regardless. Even if you embed Futura, a browser still can be set to over-ride that. One can still change the default font sizes, etc.
    – DA01
    Sep 5, 2015 at 22:17
  • What you're talking about is user preference. Users overriding settings in their browser have a reasonable expectation that sites they view will not layout as intended. This will be true for any site they view and change the size on. But to set up your font stack with fonts that are not standard, and you don't intend to serve, that is the developer actively working against their own interests in terms of consistent experience. Yes browsers and devices cause a certain amount of fragmentation on their own, but one of our jobs as developers is to limit the amount of fragmentation we cause.
    – binky
    Sep 6, 2015 at 16:07
2

Short-and-sweet answer:

No. The Font-family declaration (used by itself) has nothing to do with font files that you as the designer are using. It's merely referencing font files that may or may not exist on the end-user's system.

1

All the font-family CSS directive does is specify to the client browser which fonts it should use to display the styled content.

The client browser knows which fonts are available: those which are on the client machine, and those which are made available using @font-face or similar technologies.

If you are going to make the font available yourself, you will need to consult its licence. "Making the font available" might include making it downloadable on demand (@font-face or similar); or even embedding it in a PDF file. The licence will say how the manufacturer allows the font to be manipulated.

If you are only specifying to the client browser that it should use a font if it's available (because you have not made it available yourself), then you don't have to license the font. You don't have it, and you're not using it.

1
  • @binky's unsolicited advice is not repeated, but is relevant. Simply specifying "Futura" doesn't say which Futura. There are many versions which will identify as "Futura" and they will all make your site render slightly differently in the client browser. If the font and its appearance is important, you should license it and make it available yourself. Sep 5, 2015 at 16:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.