How to make cross browser, cross platform and all devices compatible css font stack?
Google Fonts aren't inherently supported by your operating system, so by definition, they aren't web safe fonts. Rather, since Google, a third-party, hosts them, a Google Font is called a web font. Confusing, we know, but the difference is that your browser needs to load a file before it can show Google fonts.
Web Safe fonts should not be confused with Web fonts. Web fonts are not installed on every operating system and device. That said, oftentimes, you'll find Web fonts are embedded into web browsers and downloaded into a user's browser through rendering and applied to text.
Not All Users Will Have Certain Fonts That's definitely not a good thing. While this isn't likely to happen in 2022, it's still a possibility, especially with users that are using old hardware or are on slow connections. As such, you should always use some web safe fonts, even if just as a backup.
You cannot guarantee the fonts that will be used on a mobile device the same way you can guarantee which fonts are available on a normal computer.
A safe bet is to use a generic font family that can be interpreted by the mobile browser to show you the relevant font, e.g.
font-family: serif; /* (e.g., Times) */ font-family: sans-serif; /* (e.g., Helvetica) */ font-family: monospace; /* (e.g., Courier) */
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With