Highlighted

How to choose a specific typeface that works all across multiple browsers?

Community Beginner ,
Mar 22, 2020

Copy link to clipboard

Copied

Hey guys,

To my understanding web browsers have their own set of typefaces that will automatically load when a webpage is open right? And there will be typefaces that will be the same over Chrome, Firefox, Safari, IE... etc....

 

Well, the company I work for wants me to rebrand their company and this includes changing the typeface. The key word is consistency, so if I choose a typeface for a heading, it will need to be consistent when viewing the company website and internal company screen and print designs.

Though, my concern and question is;

1 - What happens if the typeface and it's not compatible with the web browser? My manager stated that they can upload the typeface file to the server but they want to avoid that for the mean time and find a typeface that is quite universal

Sorry, am new to browser typefaces and I am trying to understand more of typefaces in web but it's a bit confusing to me atm.

Topics

How to

Views

984

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

How to choose a specific typeface that works all across multiple browsers?

Community Beginner ,
Mar 22, 2020

Copy link to clipboard

Copied

Hey guys,

To my understanding web browsers have their own set of typefaces that will automatically load when a webpage is open right? And there will be typefaces that will be the same over Chrome, Firefox, Safari, IE... etc....

 

Well, the company I work for wants me to rebrand their company and this includes changing the typeface. The key word is consistency, so if I choose a typeface for a heading, it will need to be consistent when viewing the company website and internal company screen and print designs.

Though, my concern and question is;

1 - What happens if the typeface and it's not compatible with the web browser? My manager stated that they can upload the typeface file to the server but they want to avoid that for the mean time and find a typeface that is quite universal

Sorry, am new to browser typefaces and I am trying to understand more of typefaces in web but it's a bit confusing to me atm.

Topics

How to

Views

985

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
LEGEND ,
Mar 22, 2020

Copy link to clipboard

Copied

Unfortunatly without using downloadable fonts, you will not get one typeface that works across all browsers.

For maximim compatability you should use a css font-family declaration, so that acceptable alternatives will be used should a device not support your prefered choice. see -

font family 

 

The reason for that, is because most Android devices only have 2 fonts available, (droid and roboto), and whilst some other devices do include many more fonts, Android is by far the most single type of mobile device in use, (tablet and smartphone).

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Mar 22, 2020

Copy link to clipboard

Copied

In addition to points already made, your situation involves more than just web fonts. As eluded to already, web fonts will have to be hosted so users can download because the restrictions tend to be more per platform or OS version then specificially tied to the web browser.  But you have an additionmal complexity in that you are worried about print designs too because some web fonts do not have licenses that extend to print as well or you could incur costs their as well.

 

First step I would do is find fonts that will allow you to print and use for web purposes. You could start with Adobe's typekit or Google fonts and find some complimentary pairs of headers/body styles and verify licensing.  Then present options to your boss and go from there.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Mar 22, 2020

Copy link to clipboard

Copied

Access to the entire library of Adobe Fonts comes with your Creative Cloud plan and can be used for print, web, commercial projects, logos and PDFs. 

 

For reference,  CSS Font-Stack has assembled the Win/Mac web safe list of font-families.   Web safe fonts are faster loading than embedded 3rd party hosted fonts. So use them for the majority of web text.  Use embedded fonts for special headings, menus, etc...

 

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Mar 22, 2020

Copy link to clipboard

Copied

For the widest coverage on Win/Mac, iOS, iBook, Kindle and Android, use this font-family.    

Arial, Verdana, "Helvetica Neue", Helvetica, "Droid Sans", sans-serif.

 

Related link:

https://wiki.mobileread.com/wiki/List_of_fonts_included_with_each_device

 

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Resources
Learn Resources
Add a group