System fonts: preinstalled vs. document fonts, and browsers

Question

System fonts: preinstalled vs. document fonts, and browsers

Apple's System Fonts page (System Fonts - Fonts - Apple Developer) distinguishes between preinstalled fonts ("enabled automatically by iOS and macOS") and document fonts ("displayed if used by an app in a document").

Does this mean that the so-called document fonts are already installed on iOS and macOS devices but only appear (in an app's Font menu?) if a document explicitly calls them? Or are the fonts downloaded and enabled as needed, or something else?

I ask because I'm trying to understand the behavior of Safari when I'm viewing a web page that includes content that requires uncommon fonts--in the case I've been working with, Noto Sans Egyptian Hieroglyphs and Noto Sans Phoenician. Both are listed as document fonts on the System Fonts page. While I've never installed those fonts myself, when I use Safari to view a web page that includes hieroglyphs and Phoenician letters, those fonts are clearly being used (while on a separate Windows machine, the characters are rendered with other fonts or just display the missing glyph symbol).

How can you tell what font Safari (or Firefox or Chrome) is using to display a character that is not included in the font specified by the web page's style sheet?

Posted on Dec 9, 2022 11:13 AM

Reply

Answer 1

Top-ranking reply

etresoft

Level 9

56,212 points

Dec 10, 2022 8:36 AM in response to Michael Boudreau

It is, in a word, complicated.

First off, you are missing one category of font. macOS also has an optional category that is downloadable upon demand.

Also, to confuse you even more, this particular functionality has had some bugs and changes recently. Up until macOS 12 Monterey, most 3rd party apps would display all of those document supports fonts in any font menu. In your case, you want to use those two Noto fonts. Most people don't. They want the other 300 Noto fonts either. The problem was an Apple font API method called "availableFonts" that returned all available fonts, including document support. 3rd party apps never both to check language support or document support status. They just listed them all.

Then, in macOS 13 Ventura, Apple fixed the bug. Now, only about 5 Noto fonts are listed in 3rd party apps. All those 3rd party apps are still doing it wrong, but it isn't as big a problem anymore. All Apple apps use fonts properly and you'll only see fonts that are specific to your language in a font menu. I know you didn't ask about this. But I wanted to give you some background in case you went poking around.

Now it gets complicated. 😄

Any standard iOS or Mac app that displays text using normal method will use a complicated method (in the standard case, all the complexity is internal and hidden from the programmer, however) to determine which font to use. It may not matter what font you choose. If the string you are trying to display cannot be represented in the specified font, there is an internal list of fallback fonts for any given run of text glyphs. It will pick the best match to your text and use that as the font.

Something like Safari is going to do that really well and it will just work like magic. As you start going into 3rd party apps, the funkier they get, the more likely they will be to be doing things their own way and they won't be able to display the text properly. Word is quite funky. It has its own font rendering system. Microsoft is very good at such things, but not at the Apple level, at least not on the Mac. Try Apple Pages or TextEdit. For that matter, you can try just about any Mac app that uses built-in text editing APIs, which is the vast majority.

I don't know of any way to tell exactly which fonts are being used without going into the coding level. I can tell you exactly what code you need to use because I'm working on an app that has to do something funky with this and I want to make sure I'm doing it properly. But again, that's complicated. But I would be happy to give you the code if you want. It's not like I would ever have to worry about any 3rd party competitors stealing my code and displaying fonts properly on the Mac. That's not going to happen. 😄

Reply

Answer 2

etresoft

Level 9

56,212 points

Dec 12, 2022 11:16 AM in response to Michael Boudreau

I'm not sure what you are trying to do there. The "Noto Sans Egyptian Hieroglyphs" font is already the Apple font used for Egyptian hieroglyphs.

I just tested this in Safari with a simple web page and a different web font. In Safari, it works exactly as you would expect. It uses the primary font, when possible. If that font can't render a glyph, it goes through the CSS fallback list until it finds one that matches. If you've included a web font that has a given glyph, then it uses that. Otherwise, it will use the system fallback.

Here is my demo file:

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style>
@font-face {font-family: "Segoe UI Historic"; src: url("//db.onlinewebfonts.com/t/0c5e6f133b0b25edfed47aca4ab57676.eot"); src: url("//db.onlinewebfonts.com/t/0c5e6f133b0b25edfed47aca4ab57676.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/0c5e6f133b0b25edfed47aca4ab57676.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/0c5e6f133b0b25edfed47aca4ab57676.woff") format("woff"), url("//db.onlinewebfonts.com/t/0c5e6f133b0b25edfed47aca4ab57676.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/0c5e6f133b0b25edfed47aca4ab57676.svg#Segoe UI Historic") format("svg"); }
h1 
  {
  font-family: "Academy Engraved LET", "Segoe UI Historic";
  font-size: 100px;
  }
  </style>
</head>
<body><h1>Thus, the iconic ox’s head 𓃾 &#x130fe; of Egyptian hieroglyphics transformed into the Phoenician 𐤀 and eventually the Roman letter A.</h1></body></html>

I've used Academy Engraved LET because it is very distinctive and shows up first in Font Book. 😄 I found some version of Segoe UI Historic from the internet. Maybe Microsoft's version is better. This one doesn't look very good.

The only problem I see is that neither Firefox nor Chrome handled this very well. Both of them used only the system fallback. But, as we always say here in the Apple Support Community, this is a user-to-user support forum for Apple products. Once I've solved the problem with Safari, my work is done. 😄

It is now up to you, the ever-suffering web developer, to find some convoluted hack to make it work in Firefox, Chrome, and whatever Windows uses and then come back here and complain when the convoluted hack doesn't work the same way in Safari. 😄

Reply

Answer 3

Dec 12, 2022 9:13 AM in response to Tom Gewecke

Thanks, Tom--that article by Kurt Lang is long and a bit messy but has some useful information.

As I continued to poke around on this, I found that the Inspector in Firefox includes a Fonts tab that does show the fonts actually being used to render a selected element, in addition to whatever font is specified by the CSS. But neither Safari nor Chrome on macOS appears to have this feature.

Reply

Answer 4

Tom Gewecke

Level 10

121,998 points

Dec 10, 2022 8:05 AM in response to Michael Boudreau

Michael Boudreau wrote:

How can you tell what font Safari (or Firefox or Chrome) is using to display a character that is not included in the font specified by the web page's style sheet?

i

There is a browser extension called WhatFont which is supposed to be able to do this, but it doesn't seem to work for me at the moment

The whole situation regarding what fonts are installed by Apple and others and where they can be seen/used is incredibly messy. This page might be helpful (or not).

http://www.jklstudios.com

Reply

Answer 5

Dec 9, 2022 12:08 PM in response to Tom Gewecke

Sure. See the third sentence of the abstract of this article: https://www.journals.uchicago.edu/doi/10.1086/717779

When I view this article in any of the browsers on my iMac, the ox-head hieroglyph and the Phoenician letter A are rendered with glyphs I recognize from Noto Sans Egyptian Hieroglyphs and Noto Sans Phoenician. However, on various Windows browsers I see the characters rendered with different fonts.

When I copy the sentence and paste it into Word, the Noto Sans fonts are apparently no longer being used. The ox-head hieroglyph appears but Word says its font is Segoe UI Historic (even though Font Book doesn't show this font in my system). Word displays an empty box for the Phoenician letter A and says its font is Georgia (the font for the surrounding text on the web page), but if I change the Phoenician character's font to Segoe UI Historic, the same glyph I see in Windows browsers appears.

Reply

Answer 6

Dec 12, 2022 9:54 AM in response to etresoft

etresoft wrote:

If the string you are trying to display cannot be represented in the specified font, there is an internal list of fallback fonts for any given run of text glyphs. It will pick the best match to your text and use that as the font.

This is where I'd like to have a little more control--i.e., to make the browser download a specified web font (e.g., Noto Sans Egyptian Hieroglyphs) and ensure that it uses the downloaded font.

To simplify greatly, I'm posting content to a web site whose CSS specifies Georgia for article text and Noto Sans for section headings and pretty much everything else. The web content is produced via an XML-to-HTML conversion. For reasons I can't currently change, it's not possible to wrap selected text in an HTML element that specifies a font other than the two basic fonts of the stylesheet. So when an article whose text is normally displayed in Georgia contains characters not in the Unicode range covered by Georgia (e.g., an Egyptian hieroglyph), I'd like to ensure that the browser chooses my preferred font from any list of fallback fonts for that character.

As you said, Safari already does this like magic (even apparently using fonts that I don't see installed in Font Book). Meanwhile, over on Windows, the browsers all seem to be using the Segoe UI Historic font, which has the necessary glyphs for a lot of ancient scripts, but I'd prefer to see the same font across platforms, and I prefer the Noto versions.

I've experimented with adding

@import url(https://fonts.googleapis.com/css?family=Noto+Sans+Egyptian+Hieroglyphs&display=swap);

to the site's stylesheet, which results in this being added to the stylesheet:

/* egyptian-hieroglyphs */
@font-face {
  font-family: 'Noto Sans Egyptian Hieroglyphs';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/notosansegyptianhieroglyphs/v26/vEF42-tODB8RrNDvZSUmRhcQHzx1s7y_F9-j3qSzEcbEYintdVi95xsrig.woff2) format('woff2');
  unicode-range: U+13000-1342E, U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

But I found that that doesn't change the display of the text containing hieroglyphs--presumably because the font-family name 'Noto Sans Egyptian Hieroglyphs' isn't explicitly used elsewhere in the stylesheet or in the HTML markup. Is a web font downloaded this way available to be one of those "fallback fonts" that an app will use when the default font doesn't have a glyph for the character(s) to be displayed?

In the past we have posted articles with a note at the beginning, to the effect of "You may need to download and install the following fonts to view this article: [link to the necessary fonts]". But it seems that doesn't guarantee the browser will use that font if another fallback is available (e.g., Segoe UI Historic vs. Noto Sans Egyptian Hieroglyphs). I'd much prefer to force the browser to download and use the preferred font without requiring the reader to do extra work.

Reply

Answer 7

Tom Gewecke

Level 10

121,998 points

Dec 9, 2022 11:34 AM in response to Michael Boudreau

Can you provide the url of a page with the Egyptian characters?

Reply

System fonts: preinstalled vs. document fonts, and browsers

Similar questions