When we use the font-family CSS property in the tutorials, we see that we can change the font to ‘sans-serif’ or ‘monospace’, and then lobster, but we got to import lobster from google.
I’m wondering: what is the default font? Do I always have to import my fonts? Is there a list of basic fonts I can always use, is it browser related? etc…
Take this listL
Can I always use those without importing them?
A little background…
Back when the web/Internet was young,… like 20+ years ago, we’re kinda limited on what fonts you can use. Basically, the browser just looks for and uses the fonts installed on the user’s machine… which a big majority are Windows PCs.
So you could use “SomeFancyFont” and if that font is present on the user’s machine, then the user’s browser will render that font on the webpage. If the user doesn’t have that “SomeFancyFont”, then the text will be shown using the browser’s default font setting (i.e. either Times Roman, or Arial).
As you can see, the web designer doesn’t have a lot of control. And no, the web designer cannot provide a ZIP file containing the missing fonts because fonts are usually Copyrighted. The website will run afoul of distributing copyright IP materials if they do that.
So for a long time, if web designers want to display a Fancy Title on the webpage, they usually will create a “graphic” file for it. Of course, that brings with it other problems and disadvantages.
So designers usually try to limit themselves to fonts that are known and common to most Windows and Mac machines… and these fonts are:
Times
Arial
Verdana
Courier
Helvetica
These were the “safe bet” fonts that are likely to be present in all computers, both Windows and Mac.
… long story short…
Soon, open fonts and typefaces (i.e. not copyrighted, or licensed for web use and can be downloaded to user’s machines) started happening. But these were big download files, and each site wants to have their own set of fonts they want to download to the user.
So some companies (like Google and Adobe) stepped into the fray and started hosting these “exotic” fonts. It’s a single place repository where you can find these different fonts, and guaranteed at least they won’t disappear overnight.
By exotic, I mean, they’re not Times, Arial, Verdana, etc… now, web designers can just import/link to these publicly hosted fonts and are able to use it on their website. The good thing is these fonts are cached, so if someone goes to another website that happens to use the same font, then that font doesn’t need to be downloaded to the user.
These web fonts are a great development for designers because now we can use any kind of font for our website designs and guaranteed that it will look exactly the way we wanted it regardless if the user is on Windows or Mac or whatever platform.
Sorry for the long answer, but I think having context on the history of these fonts and why we’re “importing” them is useful for any web developer/designer nowadays.
Is it possible to sue such fonts https://fontsly.com/ following this way?