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

[Hasher22]

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.

[pziecina]

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).

[Ben M]

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.

[Nancy OShea]

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 OShea]

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