Home / Questions / 355899
Accepted
fedorqui
Asked: 2020-05-16 04:34:36 +0800 CST 2020-05-16 04:34:36 +0800 CST

How do I know what fonts a system has and whether or not I should import them when loading a page?

  • 772

In the thread of How do I define the font that is seen on the entire page with Bootstrap? I learned that there are fonts that come as standard and others that don't, but that this depends on the operating system, etc.

If one is working with CSS then one should add a line like:

@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400');

Where the font is pulled from Google Fonts .

One comment said :

the "serial sources" (I don't know if it is the correct name), are the ones that are initially installed with the OS that comes with the computer where you are viewing the project. For example, if you use the Segoe UI font on your website, and you visit it from a Windows PC, you do not need to import it, but when you view it, for example, on an iPad, it will not load that font. The same goes for Apple-exclusive fonts like Lucida Grande. Another case is Google's own Roboto font, you would not need to import it if you are only going to use it on Android devices. – Jheyman Mejia

So how do I know which fonts I can assume will be on all systems? If I know that it is in an environment, is it correct to put @importit anyway? Is it a waste of resources or does the system already recognize it and not load it?

css

1 Answers

  1. Best Answer

    Introduction

    Four font container formats are currently in use on the Web:

    • EOT
    • TTF
    • WOFF
    • WOFF2

    Unfortunately, despite the wide variety of options, there is no universal format that works in both new and old browsers: EOT is only supported by IE, TTF is partially supported by IE, WOFF is the one that offers the support broader , although it is not available in some older browsers and support in WOFF 2.0 is in development for many browsers.

    @font-face

    The CSS rule @font-faceallows you to define the location of a given font resource, its style characteristics, and the Unicode code points for which it should be used. A combination of these declarations can be used @font-faceto build a "font family" that the browser will use to evaluate which font resources to download and apply to the current page.

    Each declaration @font-faceprovides the name of the font family, which acts as a logical group made up of several declarations, font properties such as style, weight, and expansion, and the descriptor src, which specifies a prioritized list of locations for the font resource. font.

    @font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome.woff2') format('woff2'),
       url('/fonts/awesome.woff') format('woff'),
       url('/fonts/awesome.ttf') format('truetype'),
       url('/fonts/awesome.eot') format('embedded-opentype');
}

@font-face {
  font-family: 'Awesome Font';
  font-style: italic;
  font-weight: 400;
  src: local('Awesome Font Italic'),
       url('/fonts/awesome-i.woff2') format('woff2'),
       url('/fonts/awesome-i.woff') format('woff'),
       url('/fonts/awesome-i.ttf') format('truetype'),
       url('/fonts/awesome-i.eot') format('embedded-opentype');
}

    First, notice that the examples above define a Awesome Fontsingle family with two styles ( normale italic), each pointing to a different set of font resources. In turn, each descriptor srccontains a prioritized list of resource variants separated by commas:

    The directive local()allows you to reference , load, and use locally installed fonts . The directive url()allows you to load external fonts and can contain an format()optional hint indicating the format of the font referenced in the provided URL.

    Unless you're referring to the default system fonts, in practice it's rare for the user to have it installed locally, especially on mobile devices where it's impossible to "install" additional fonts. You should start with a local()"just in case" entry, and then provide a list of entries url().

    Local, downloadable and external fonts

    In this particular case, IMO , I can identify three types of sources:

    • Local: Those that are installed by default together with the operating system (OS) in which the project or web page is displayed, which can be Windows, MacOs, iOS, Android, etc. These sources do not need to be declared with @font-face.

    • Downloadable: Downloadable fonts can be defined, such as those that are attached to the project, such as fonts with their own design or all those that are not part of a specific OS. For example, font files with a brand design (Coca-Cola, Samsung, SpiderMan...). Its directive in @font-faceis url(): src: url(misfuentes/coca-cola-font.woff) format('woff');.

    • External: These would be all those that do not come with your project, and are hosted on an external server, such as Google Fonts , for example. You can use them in your project basically in two ways:

    Calling it from <head>your HTML tag, and referencing it in the CSS

    body {
  font-family: 'Montserrat', sans-serif;
}
    <head>
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100&display=swap" rel="stylesheet">
</head>

<body>

  <h1> Hola mundo </h1>

</body>

    Or making use of the rule @importdirectly in the CSS

    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100&display=swap');

body {
  font-family: 'Montserrat', sans-serif;
}
    <body>
  <h1> Hola Mundo </h1>
</body>

    There is an inconvenience with this last rule, and that is that each import that I make will be a request to the server, this can harm the loading times and/or the response of the page.

    Loading Times

    As for loading, the browser must build the rendering tree , which depends on the del DOMand trees CSSOM, in order to determine the resources it needs to render the text. As a result, font requests are delayed long after other critical resources, and rendering of the text in the browser may be blocked until the resource is fetched.

    Loading process Image Source: developers.google.com

    1. The browser requests the HTML file.
    2. The browser starts parsing the HTML response and building the DOM.
    3. The browser detects CSS, JS, and other resources, and sends requests.

    4. The browser builds the CSSOM once it receives all the CSS content, and combines it with the DOM tree to build the rendering tree.

      • Requests are sent after the rendering tree indicates the font variants that are needed to render the specified text on the page.

    5. The browser performs a layout and paints content on the screen.

      • If the font is not yet available, the text pixels may not be rendered in the browser.
      • When the font is available, the browser paints the text pixels.

    How do I know which fonts are local to a system?

    In order to ensure that all web users have a core set of fonts, Microsoft created the Core fonts for the Web initiative in 1996 (ended 2002). Published sources include:

    Arial, Courier New, Times New Roman, Comic Sans, Impact, Georgia, Trebuchet, and Verdana.

    These fonts were released under a license called an "EULA" (End User License Agreement). They are freely distributed, but there are also limited rights of use. Their high penetration rate has made these fonts a staple for web designers. However, these fonts (or some of them) are not included in all operating systems by default.

    Each Operating System has a different set of fonts, in this list you can consult the generic fonts shared by the main OS .

    As I said earlier in the comment, there are fonts that are exclusive to each OS, for example:

    • Segoe UI, exclusive to Windows in its version 10.
    • Lucida Grande, exclusive to MacOS (although it can be used as font-webin personal projects, its license is paid).
    • Roboto, which although it is exclusive to Android, can be used for free as an external source).

    To find out in more detail what are the unique or shared fonts that you can use depending on the OS, you can consult the following Wikipedia entries:

    List of fonts included with macOS

    List of fonts included with Windows

    What alternatives do I have to use one or the other source?

    Finally, knowing the fonts that come installed with the operating system, the loading times and the different ways I have to apply them to my project, what would be the most appropriate option to follow?

    Well, that answer will not be unique, it depends on your project and how you want to present it.

    For example, suppose you want to create a web application that feels native depending on the operating system the user sees it on, you could then change the visual styles depending on this OS. You can use the request header for this User-agent.

    // This script sets OSName variable as follows:
// "Windows"    for all versions of Windows
// "MacOS"      for all versions of Macintosh OS
// "Linux"      for all versions of Linux
// "UNIX"       for all other UNIX flavors 
// "Unknown OS" indicates failure to detect the OS

var OSName="Unknown OS";
if (navigator.appVersion.indexOf("Win")!=-1) OSName="Windows";
if (navigator.appVersion.indexOf("Mac")!=-1) OSName="MacOS";
if (navigator.appVersion.indexOf("X11")!=-1) OSName="UNIX";
if (navigator.appVersion.indexOf("Linux")!=-1) OSName="Linux";

document.write('Your OS: '+OSName);

    Knowing the Operating System, you can define rules with JS to apply, as the case may be, a predefined style sheet, and therefore, some predefined font attributes.

    This has been explained before, you can check for example this question on SOen or this library called CSS Browser Selector .

    Another example is the Onsen UI library , which has predefined styles depending on the OS, be it iOS or Android.

    Comparison iOS and Material

    Sources:

    https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization?hl=es-419#selection%C3%B3n_y_s%C3%ADntesis_de_fonts

    https://www.w3.org/TR/css-fonts-3/#at-font-face-rule

    https://developer.mozilla.org/en-US/docs/Glossary/Request_header

    https://www.w3.org/TR/css-fonts-3/#propdef-font-family

    • 30