How are fonts downloaded without any src reference in CSS file

user_5131139 0
Viewed 88

I have seen a couple of projects where they just mention the name of the fonts they want to use in the CSS file without any mention of the source or the TTF or other font files. eg

code {
    font-family: source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace
}

When I remove those fonts via CSS in inspect element I can see the fonts are changed. So the code works. But I don't understand how the browser figures from where the fonts should be downloaded.

The code works even in incognito so not sure if the browser caching the font is a valid explanation.

fonts font-family css
3 Answers

There are several ways the browser decides what fonts are downloaded/used:

  1. As user 'Fabrizio Calderan loves trees' stated (paraphrased):

If no sources are provided, they are loaded from the computer running the webpage in a browser.

  1. The programmer uses external APIs or links that embed a font. An example of this is Google Fonts, which lets programmers choose fonts they want (and select them), and embed them using either a <link> tag (put into HTML code) or @import tag (put into CSS file).

enter image description here

  1. The website you are looking at may contain @font-face statements in their CSS, which links a common name (i.e., 'Source Code Pro') to a font file. You can read more about @font-face here and here.

If you can't find evidence of any of these, could you possibly share a link to the webpage's source code?

EDIT

I took a look at the code in the website. It seems like the fonts styling in the display/textarea is:

.displayArea{
    font-family:"Lucida Sans","Lucida Sans Regular","Lucida Grande","Lucida Sans Unicode",Geneva,Verdana,sans-serif;
}

And, there doesn't appear to be a source of these fonts, so it is part of the 1st category I listed above. Basically, the fonts in quotes are fonts that may be used if already preinstalled inside the client's computer, if not, the browser goes down the list and keeps checking whether the client has the font installed. The ending font is sans-serif, which is a default font that all computers have, so it serves as a backup in case all other fonts aren't available.

user_113503880

enter image description here

As you can see in the above picture,I created a sample.html file and used the font-family for the body tag. So the source provided does not mention in font-family section. in the result, fonts will load from "Fonts" folder in my windows folder. (Of course if you use Windows OS and website locally, mentioned process will be happen!)

user_149863720

Notice that the last setting in the font-family list is sans-serif.

If the local system has absolutely none of the other fonts loaded locally then the system will use whatever it has set as its default sans-serif font.

That is why it looks as though 'it works' when you say this:

@Fabrizio Calderan loves trees I checked the system fonts with this css-tricks.com/snippets/css/system-font-stack link. But the mentioned font family is not matching any of the fonts in the system fonts. So the default font should be picked right?

You are right, it picks the default font, but the version that is sans-serif.

user_108674540
Related