[Resolved] Copyright of system fonts & setting fallback fonts

[Alessio]

Hello,

for better performance and to fix the invisible font flashing issue (or however that’s called), I have decided to use a system font.

Is it legal to select “Helvetica” for commercial website (in the Customizer), even though I do not own a license? What happens if the font is not available on the user’s computer? Does it just download the font, or does it use a fallback font instead?

What fallback fonts are used and how can I set which fallback fonts generatepress uses?

Thank you!

[Elvin]

Hi,

Is it legal to select “Helvetica” for commercial website (in the Customizer), even though I do not own a license?

As Helvetica is a commercial property font licensed by Linotype, I believe it is not legal to use it if you’re going to host/serve it from your website without a web font license.

What happens if the font is not available on the user’s computer? Does it just download the font, or does it use a fallback font instead?

I believe you’re pertaining to Helvetica under System fonts? This is a different case as using System fonts basically relies on the relevant font to be locally installed. If it is not, it will use the fallback fonts provided eg. font-family: Tahoma, Geneva, sans-serif; rather than download it.

Default fallback fonts depend on the browser/OS used unless otherwise specified on the website’s CSS code.

Ex:

body { font-family: Helvetica, Tahoma, Geneva, Arial, sans-serif; }

The browser will go through the listed fonts until it finds the font family where all glyphs work on specified styles.

More about font-family – https://developer.mozilla.org/en-US/docs/Web/CSS/font-family

[Alessio]

Yeah I’m talking about Helvetica here under “System Fonts”. So is it legal to select that or no?

What exactly is the difference between selecting Helveticathere or System Stack? Isn’t Helvetica loaded from the system too?

Also, is it better to use body { font-family: Helvetica, Tahoma, Geneva, Arial, sans-serif; } or select the font in the Customizer?

[Elvin]

Yeah I’m talking about Helvetica here under “System Fonts”. So is it legal to select that or no?

Yes it is legal as you are basically just asking the end-user’s browser to use Helvetica if they have it installed in their system. The site isn’t hosting/distributing it.

What exactly is the difference between selecting Helveticathere or System Stack? Isn’t Helvetica loaded from the system too?

This topic answers this question in great detail. – https://generatepress.com/forums/topic/difference-between-system-font-selection-and-system-stack-contained-within/#post-1393877

Also, is it better to use body { font-family: Helvetica, Tahoma, Geneva, Arial, sans-serif; } or select the font in the Customizer?

In context of adding fallbacks, using custom CSS may be better than selecting a font in Customizer as Customise > Typography doesn’t have a fallback text field. Whereas custom CSS allows you to specifically set a fallback. 🙂

[Alessio]

Okay, thank you!

I’ve set the Fallback Code in the theme editor. However, it probably gets overridden by something else:

What’s the best way to add the custom fallback code?

[Elvin]

Are you using a child theme? If yes, you can go and edit the font-family fallback directly on its style.css file.

Alternatively, you can change the CSS code you’ve added and try forcing it to take priority by adding !important.

Example:

body { font-family: Helvetica, Tahoma, Geneva, Arial, sans-serif !important; }

or if you can add it to more elements like:

body, button, input, select, textarea { font-family: Helvetica, Tahoma, Geneva, Arial, sans-serif !important; }

[Alessio]

Yeah, I am using a child theme. Adding the font-family fallback got overridden, though. That’s where I added it:

But adding !important made it work, thank you!

[Elvin]

Nice one.

No problem, Glad it works for you. 🙂

[Author]

Posts