Project

General

Profile

Actions

Support #17257

open

Avenir Font

Added by Syelle Graves 3 months ago. Updated 6 days ago.

Status:
Reporter Feedback
Priority name:
Normal
Assignee:
-
Category name:
-
Target version:
-
Start date:
2022-11-17
Due date:
% Done:

0%

Estimated time:
Deployment actions:

Description

Hi Commons Team,

(Marilyn says "Please open up a ticket in Redmine about this.")

We have an important need for a website to be displayed in Avenir font, due to branding reasons for a DOE-funded center. The site was moved over from Wix, where Avenir was a built-in option.

We’re creating the Commons site in Canvas, which has no option for Avenir that we can see.

Is it possible that there is an option to add code to change the site’s font to Avenir? Or, are there any themes on the Commons that have Avenir font built in or allow code to allow it? Montserrat, the recommended alternative via Google fonts, looks noticeably different from our years of existing/already-distributed materials, which we don't have a way to go back in time and change. This includes our banner and logo, which we will have to change to match our (already-designed) site.

Is there anything we can do?
Many thanks!

Actions #1

Updated by Boone Gorges 3 months ago

  • Status changed from New to Reporter Feedback

Avenir is a non-free font, which means you'll have to buy a license to use it.

The most technically lightweight method is to load it as a webfont. But it's not clear to me that myfonts.com or fonts.com offers a webfont license.

So we may have to resort to downloading the font files, which I would then have to package into a plugin that I'd make available only for your site. You would then need to write the proper CSS to use the font - I'm unsure that Canvas lets you do this through its UI.

Let me know if you want to proceed this route. If so, the first step will be for you to purchase a font license and give me the files. According to this https://amazemedia.com/myfonts-webfont-wordpress-setup/, myfonts.com offers a WordPress package, but I can make any set of .woff files work. Here's the font on fonts.com https://www.fonts.com/font/linotype/avenir and myfonts.com https://www.myfonts.com/collections/avenir-font-linotype?tab=licensing#section_Webfonts

Actions #2

Updated by Raymond Hoh 3 months ago

If you have some time to try alternatives, you might want to test-drive these free fonts:

Some of them have webfonts available such as Crescent: https://www.ffonts.net/Crescent.font

Actions #3

Updated by Syelle Graves 3 months ago

Thank you, Boone! We are interested in this. We are looking into the cost.
Ray, we will check out the free ideas, thank you!

Actions #4

Updated by Syelle Graves 2 months ago

Boone, would we choose "web" from the purchase options on fonts.com and myfonts.com (options are desktop, web, digital ads, ebook)?

And, the web option seems to have a page-view limit. Would that apply to us in this case?

Thanks so much.

Actions #5

Updated by Boone Gorges 2 months ago

I believe you should choose 'web'. They will then likely ask you for the domain name where you will use the font, and you will provide the domain ([whatever].commons.gc.cuny.edu). Then, they'll likely give you some @font-face declarations and/or a script tag, which you'll provide to me.

And, the web option seems to have a page-view limit. Would that apply to us in this case?

Yes, I assume this is why they offer it only as a webfont, and don't offer a .woff download (which they wouldn't be able to track).

Actions #6

Updated by Syelle Graves about 2 months ago

Hi Boone,

Okay, a few updates and questions. Sorry for all the back-and-forth as we learn more about this:

1) Restrictions and .woff files:
Having a limit of page views sounds dangerous--we wouldn't want to have the font on our Commons site revert unless we paid more money, or something like that, as our grant funds are limited over time and not guaranteed in the future.
However, this FAQ about installing seems to indicate that the webfont kit does come with the .woff files. Does that look right? Does that mean that we would not have any kind of page-view restriction after all?:
https://www.fonts.com/support/faq/installwebfonts
And here is the info on the weblicense:
https://www.fonts.com/info/services/licensing-options

2) Which Avenir
In the meantime, I contacted fonts.com support to ask them what all the different types of Avenir refer to (there is a list of Avenir fonts with different numbers and names on their website, like 45, book. Oblique, 35, light…). It isn't clear to us which one we should choose to get the basic Avenir font, so hopefully, they will get back to me with that info.

3) Possibly choosing a different solution:
Because this is a bit overwhelming, we are considering changing our logos and other branded materials to Montserrat (the closest font we can have, according to our web designer, on our Commons site, which uses the Canvas theme). This is not ideal, as our past materials won’t match, but it might be the safest solution.

The problem is that Montserrat font does not seem to be available in Microsoft (Word or PowerPoint; Microsoft recognizes it when we paste in text from our website, but we can't seem to choose the font when we need it, which puts us in a bind).

Could you possibly help us find a solution? Is there a font that is available in Microsoft and also on Commons sites, so that we don't get stuck without access to the font we have picked?

Thanks so much!

Actions #7

Updated by Boone Gorges about 2 months ago

Thanks, Syelle. The documentation at https://www.fonts.com/support/faq/installwebfonts says that they use an empty CSS file to track pageviews. This might mean that the font won't actually load properly if we skirt this requirement. At the very least, it would be a violation of the license terms. I don't feel comfortable trying to circumvent the license by not loading the CSS file.

In the meantime, I contacted fonts.com support to ask them what all the different types of Avenir refer to (there is a list of Avenir fonts with different numbers and names on their website, like 45, book. Oblique, 35, light…). It isn't clear to us which one we should choose to get the basic Avenir font, so hopefully, they will get back to me with that info.

You say you need "basic" but you probably need at least an oblique (for italics) and a heavy/black (for bold). That's how they get ya.

Because this is a bit overwhelming, we are considering changing our logos and other branded materials to Montserrat (the closest font we can have, according to our web designer, on our Commons site, which uses the Canvas theme). This is not ideal, as our past materials won’t match, but it might be the safest solution.

Given the complications, I agree that this is probably the wisest course. By "Microsoft" I assume you mean "Microsoft Office" - Word, Powerpoint, etc. But I think it's less a question of Office than the fonts that are installed by default on Windows - Montserrat doesn't appear to be among them. Montserrat appears to be freely licensed so perhaps there's a workaround here - I found these instructions, which may be worth trying https://www.sgu.edu/wp-content/uploads/2020/05/Installing-Montserrat.pdf (Also https://mangaaz.net/montserrat-font-download/ - ignore the screenshot of Montserrat Alternates, which is a different typeface) Does that help?

Actions #8

Updated by Syelle Graves about 2 months ago

Boone Gorges wrote in #note-7:

Thanks, Syelle. The documentation at https://www.fonts.com/support/faq/installwebfonts says that they use an empty CSS file to track pageviews. This might mean that the font won't actually load properly if we skirt this requirement. At the very least, it would be a violation of the license terms. I don't feel comfortable trying to circumvent the license by not loading the CSS file.

We would never ask to violate any terms! I saw that .woff files were included, and I thought that gave us more flexibility. I would never suggest skirting any requirement; I just truly know nothing about any of this. Sorry we gave that impression!

Because this is a bit overwhelming, we are considering changing our logos and other branded materials to Montserrat (the closest font we can have, according to our web designer, on our Commons site, which uses the Canvas theme). This is not ideal, as our past materials won’t match, but it might be the safest solution.

Given the complications, I agree that this is probably the wisest course. By "Microsoft" I assume you mean "Microsoft Office" - Word, Powerpoint, etc.

Yes, we wrote "Word or PowerPoint" above somewhere...

But I think it's less a question of Office than the fonts that are installed by default on Windows - Montserrat doesn't appear to be among them. Montserrat appears to be freely licensed so perhaps there's a workaround here - I found these instructions, which may be worth trying https://www.sgu.edu/wp-content/uploads/2020/05/Installing-Montserrat.pdf (Also https://mangaaz.net/montserrat-font-download/ - ignore the screenshot of Montserrat Alternates, which is a different typeface) Does that help?

Hm, great to know, thank you! However, I'm not sure this would work either... Our team needs to create materials across devices, including shared devices where we don't have permissions (or time, sometimes) to download programs.

Is there some sort of list of fonts that are inherent to both Commons WP sites and to MS Office?

Actions #9

Updated by Boone Gorges about 2 months ago

We would never ask to violate any terms! I saw that .woff files were included, and I thought that gave us more flexibility. I would never suggest skirting any requirement; I just truly know nothing about any of this. Sorry we gave that impression!

Ha, no worries. I was just thinking through the various options.

Is there some sort of list of fonts that are inherent to both Commons WP sites and to MS Office?

No fonts are "inherent" to the Commons or to WordPress. WP sites are loaded in a web browser. The sites use CSS to specify a font-family for various elements on the page. The font-family declaration in CSS is cascading, in the sense that multiple options can be presented, such as font-family: Arial, sans-serif: the browser will try to use Arial if it's installed on the local machine, otherwise it will fall back on whatever the system's default sans-serif font is. Certain popular fonts like Arial and Georgia are widely used in part because they're installed on nearly every system. In cases where sites need a less commonly-installed font, and the site's design is such that the site owners don't want the font-family to use a fallback value, it's possible to load a typefacing using font-face. This declaration, in turn, loads a font either from a third-party site or from a local URL and allows the browser to use it to render the specific page.

Anyway, the best strategy may be to look for a font that is commonly available on Windows machines, which can also be loaded without a paid license, eg through Google Fonts. Compare https://learn.microsoft.com/en-us/typography/fonts/windows_10_font_list and https://learn.microsoft.com/en-us/typography/fonts/windows_11_font_list with https://fonts.google.com/. Then, you can use a plugin like https://wordpress.org/plugins/wp-google-fonts/ (available on the Commons) to load the font onto the website.

Actions #10

Updated by Raymond Hoh about 2 months ago

Hm, great to know, thank you! However, I'm not sure this would work either... Our team needs to create materials across devices, including shared devices where we don't have permissions (or time, sometimes) to download programs.

Avenir would have had to be installed in a similar manner when the team was creating materials before, so installing a new font like Montserrat on a PC or Mac shouldn't be out of the question if you need to use it.

Is there a font that is available in Microsoft and also on Commons sites, so that we don't get stuck without access to the font we have picked?

If you choose a Windows 10 base font, your design choices will be very limited. Also some Windows fonts are not available on MacOS and mobile devices, so when designing for the web, the default sans-serif font might be displayed instead.

Actions #11

Updated by Syelle Graves 26 days ago

That is fascinating! The team has no memory of downloading Avenir to our computers, and we all seem to have Avenir already in Office on our home computers, so it's a mystery... We'll keep working on a solution.

Actions #12

Updated by Syelle Graves 7 days ago

Boone Gorges wrote in #note-9:

We would never ask to violate any terms! I saw that .woff files were included, and I thought that gave us more flexibility. I would never suggest skirting any requirement; I just truly know nothing about any of this. Sorry we gave that impression!

Ha, no worries. I was just thinking through the various options.

Ha, good!

Is there some sort of list of fonts that are inherent to both Commons WP sites and to MS Office?

No fonts are "inherent" to the Commons or to WordPress. WP sites are loaded in a web browser. The sites use CSS to specify a font-family for various elements on the page. The font-family declaration in CSS is cascading, in the sense that multiple options can be presented, such as font-family: Arial, sans-serif: the browser will try to use Arial if it's installed on the local machine, otherwise it will fall back on whatever the system's default sans-serif font is. Certain popular fonts like Arial and Georgia are widely used in part because they're installed on nearly every system.

Great! Boone and Ray, thank you so much for all your help with this. Do you know of an accurate list of other fonts that are installed on nearly every system, in addition to Arial and Georgia, like you mention? (We prefer to bypass Google fonts.) I'll bring the list to the team and we will figure out a plan. Perhaps a source like this https://web.mit.edu/jmorzins/www/fonts.html? I’m not always sure how to vet information like this. Also, I'm happy to direct this more fundamental question to the regular support team, if you prefer!

Actions #13

Updated by Boone Gorges 6 days ago

I'm afraid I don't have any more insight into safe web fonts than what you see at https://web.mit.edu/jmorzins/www/fonts.html. Important to note that "safe" is a relative term - even the most common fonts may not be 100% available, so fallbacks need to be specified.

Actions

Also available in: Atom PDF