Question
I want to understand from a computer science perspective how a font is loaded in a web browser. I would like to know how a browser checks and where a browser checks when locating and loading a font file. Does anyone have or know of a clean resource explaining this (possibly in a flow or activity diagram)?
Backstory
This question has been troubling me for a few months as I have been working on a couple projects related to adding custom html signatures to email web clients (Gmail). Due to Gmail being restrictive in terms of what html code is acceptable when adding a signature, I have been constrained on using the preferred fonts. In particular I have been trying to use the Raleway font. I have been using the following css to change the font: font-family: Raleway, san-serif; and have been viewing the html email signature in Gmail on a Chromium based browser.
Yesterday, I noticed that the font has changed (without any code changes) so that the font was italicized even though there was no css italicizing the text. I started comparing the html in different browsers and noticed that in Safari the text is not italicized. This lead me to hypothesize that web browsers may ship with their own font files.
Secondary question
Do browsers also provide "default" font files for popular fonts?
Here is a simple html example that I tested across Chrome, Safari, and Firefox: https://codepen.io/spenweb/pen/MWyNOqv
Chrome (macOS):
Firefox (macOS):
Safari (macOS):
Chrome (Windows):
Note: I checked the Font Book app on my Mac and did not see any fonts named "Raleway".