The web version of the Noto Serif font seems to be missing the dagger character in spite Google says that this character does exist

user_5587480 0
Viewed 1365

I have Noto Serif font installed on my computer with LibreOffice in October.

Here is a test file:

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif&display=swap');

body {
  font-family: "Noto Serif", sans-serif;
  font-size: 50px;
}
<p>† foo</p>

<p>‡ bar</p>

If I remove the import line, the browser will use the local version of the font and both daggers look correct. (Right images.)

However, If I do not remove the import line, and therefore the browser will use the web version of the font, the second dagger seems to be missing in the font and for that reason is automatically substituted by the one from the sans-serif font. (Left images.)

enter image description here

The Google itself "says" that both daggers are included in the web version of the font:

https://fonts.google.com/specimen/Noto+Serif?query=noto+serif&preview.text_type=custom&preview.text=test%20%E2%80%A0%20%E2%80%A1

enter image description here

Why it happens?

typography fonts css
2 Answers

Solution

To solve the issue for this symbol you can use Google Font API text query parameter, which will return glyphs only for provided symbols/characters:

In these cases, you should consider specifying a text= value in your font request URL. This allows Google Fonts to return a font file that's optimized for your request.

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto%20Serif&text=‡');


body {
  font-family: "Noto Serif", sans-serif;
  font-size: 50px;
}
<p>test † ‡</p>

TL;DR

Font it's just collection of glyphs that match with Unicode symbols. Google Fonts trying to provide optimized pack of glyphs for each specific case. For example, the default URL for Noto Serif will return a CSS code for all main subsets like: latin, latin-ext, cyrillic, etc. Click on link below to see full list of subsets

Google Fonts API supports subset query parameter, so you can flexibly configure required subset for you, and not load more than needed.

‡ Double Dagger has U+2021 Unicode number, and it's a part of the General Punctuation Unicode subset which using range between 2000—206F. Google Font includes this range inside latin subset:

@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/notoserif/v9/ga6Iaw1J5X9T9RW6j9bNfFcWaDq8fMU.woff2) format('woff2');
  unicode-range: 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;
}

What it means?

It means that you're doing everything right, because all required subsets requested correctly, but somehow fetched font doesn't contain glyph for U+2021 symbol. It looks like a bug on Google Font side. As a temporary solution you can use the proposed workaround, but I think it should be reported to Google Font.

Related issues

user_102539540

I'm trying to understand your problem , and I think the @Riskbreaker answer is a good idea to patch your issue.

If you need to get this character :

daggers

You NEED to set the font-family with :

font-family: 'Noto Serif', serif;

Explain Sans-Serif definition : any typeface in which the letters do not have serifs (= small lines)

So your "problem" is only a default comportement for all browsers.

I've try some tests on my codepen, and as you will see, you can patch your issue with the recommended lines from Google fonts :

font-family: 'Noto Serif', serif;

Isn't a good solution for you , but this trick can explain your problem. Actually , the character "‡" doesn't exist by default for the font "Noto Serif", so, if you apply and second propertie "serif" nothing change because it is the default style. However, if you add "sans-serif" propertie, the browser can interpret this value and set the character with the value "sans-serif".

However , since few time, google add a second link to work with a CDN :

<link rel="preconnect" href="https://fonts.gstatic.com">

This link doesn't change nothing for you, but I recommand to use it to be updated.

My second advice is to don't install the font locally or disable it, because it will be easier to debug your issues, and an installed local font can create some bugs or conflicts.

You can also check the differences between serif and sans-serif at this link : https://about.easil.com/support/serif-vs-sans-serif/

I hope my answer will help you, and you can check my codepen tests at this link : https://codepen.io/ZellRDesign/pen/eYBvxPV

user_100202280
Related