1576863 - @font-face

Status: UNCONFIRMED

(Core :: Layout: Text and Fonts, defect, P5)

Description

[tttpob]

Attachment: snipaste_20190827_190857.png

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:68.0) Gecko/20100101 Firefox/68.0

Steps to reproduce:

1. add
   @font-face{
   font-family: "anyfontyouwant";
   src: local("whateverfontIhaveinstalled";)
   }
   to style sheet
   (only tested on windows)

Actual results:

"anyfontyouwant" changed to "Times New Roman" if it's not a monospaced fonts;
or "Courier New" if it's one.

Expected results:

"anyfontyouwant" changed to "whateverfontIhaveinstalled"

Comment 1

[tttpob]

Note: my windows is Chinese version and if you are using Windows in a different language, I dont know if the result would be different

Comment 2

[tttpob]

Another note: It seems only happens when I tried to use CJK fonts(they have latin latters, of course) to replace a pure latin latter fonts
which means

@font-face{
font-family: "Consolas";
src: local("Source Code Pro";)
}

works and

@font-face{
font-family: "Times New Roman";
src: local("Microsoft Yahei UI";)
}

does not

Comment 3

[tttpob]

(In reply to tttpob from comment #2)

Another note: It seems only happens when I tried to use CJK fonts(they have latin latters, of course) to replace a pure latin latter fonts
which means

@font-face{
font-family: "Consolas";
src: local("Source Code Pro";)
}

works and

@font-face{
font-family: "Times New Roman";
src: local("Microsoft Yahei UI";)
}

does not

(the semicolons' position are typos)

Comment 4

[tttpob]

no I dont know what the bug is now, I dont have the time to test all the posibility.
This page uses "monospace" as font, I've setted browser's monospaced font to "Consolas", but still displayed as "Courier New".
It displayed normally in chrome.

Comment 5

[Hani Yacoub, Desktop QA]

Assigning "Core: Layout: Text and Font" component for this bug and hopefully someone with more knowledge in this area will a look over this.

Comment 6

[Emilio Cobos Álvarez (:emilio)]

It seems expected given the semicolon position in the example.

So to be clear, if you do:

@font-face{
font-family: "Times New Roman";
src: local("Microsoft Yahei UI");
}

Does it work?

It also seems odd that the font family prefs don't work, it works fine here, like if I go to about:preferences and update the monospace font to be Source Code Pro, then the page from comment 4 works fine and shows Source Code Pro.

Comment 7

[Jonathan Kew [:jfkthame]]

(In reply to tttpob from comment #4)

no I dont know what the bug is now, I dont have the time to test all the posibility.
This page uses "monospace" as font, I've setted browser's monospaced font to "Consolas", but still displayed as "Courier New".
It displayed normally in chrome.

I believe it doesn't work to use @font-face rules to try and override the mappings of CSS generics like monospace. These are mapped through the font preferences directly to installed fonts, not to @font-face families.

So a rule like

@font-face {
    font-family: "Courier New";
    src: local("Microsoft YaHei UI");
}

works to replace Courier New with YaHei for pages that specify font-family: Courier New, but not for pages that specify font-family: monospace. The way to change how the monospace generic is rendered is to use the font preferences.

(In reply to Emilio Cobos Álvarez (:emilio) from comment #6)

It also seems odd that the font family prefs don't work, it works fine here, like if I go to about:preferences and update the monospace font to be Source Code Pro, then the page from comment 4 works fine and shows Source Code Pro.

This might be an issue of which language's font prefs are being set. If the reporter's system is set to Chinese, it's possible that the Preferences dialog defaults to setting Chinese font prefs, and it's necessary to use the Advanced panel to set fonts for Latin-script content?

Comment 8

[tttpob]

Attachment: behaviour_in_ff1

what behaves in ff with

@font-face {
  font-family: "Times New Roman";
  src: local("Microsoft Yahei UI");
}

Comment 9

[tttpob]

Attachment: behaviour_in_ff2

what behaves in ff with

@font-face {
  font-family: "Times New Roman";
  src: local("Microsoft Yahei UI");
}

Comment 10

[tttpob]

Attachment: behaviour_in_edge_chromium

what behaves in edge chromium with

@font-face {
  font-family: "Times New Roman";
  src: local("Microsoft Yahei UI");
}

Comment 11

[tttpob]

(In reply to Emilio Cobos Álvarez (:emilio) from comment #6)

It seems expected given the semicolon position in the example.

So to be clear, if you do:

@font-face{
font-family: "Times New Roman";
src: local("Microsoft Yahei UI");
}

Does it work?

It also seems odd that the font family prefs don't work, it works fine here, like if I go to about:preferences and update the monospace font to be Source Code Pro, then the page from comment 4 works fine and shows Source Code Pro.

no, thats just a typo, I wrote right in my css.
three comments above should show you what happened

Comment 12

[tttpob]

(In reply to tttpob from comment #11)

(In reply to Emilio Cobos Álvarez (:emilio) from comment #6)

It seems expected given the semicolon position in the example.

So to be clear, if you do:

@font-face{
font-family: "Times New Roman";
src: local("Microsoft Yahei UI");
}

Does it work?

It also seems odd that the font family prefs don't work, it works fine here, like if I go to about:preferences and update the monospace font to be Source Code Pro, then the page from comment 4 works fine and shows Source Code Pro.

no, thats just a typo, I wrote right in my css.
three comments above should show you what happened

also the link to the page if anyone need it

Comment 13

[tttpob]

(In reply to Emilio Cobos Álvarez (:emilio) from comment #6)

It seems expected given the semicolon position in the example.

So to be clear, if you do:

@font-face{
font-family: "Times New Roman";
src: local("Microsoft Yahei UI");
}

Does it work?

It also seems odd that the font family prefs don't work, it works fine here, like if I go to about:preferences and update the monospace font to be Source Code Pro, then the page from comment 4 works fine and shows Source Code Pro.

yes this will work for pages set monospace as font and is exactly my setting (the same font, Sarasa Mono SC, a monospaced font which contains CJK characters), but many pages dont, they use Consolas even Courier New.

Comment 14

[tttpob]

(In reply to Jonathan Kew (:jfkthame) from comment #7)

(In reply to tttpob from comment #4)

no I dont know what the bug is now, I dont have the time to test all the posibility.
This page uses "monospace" as font, I've setted browser's monospaced font to "Consolas", but still displayed as "Courier New".
It displayed normally in chrome.

I believe it doesn't work to use @font-face rules to try and override the mappings of CSS generics like monospace. These are mapped through the font preferences directly to installed fonts, not to @font-face families.

So a rule like

@font-face {
    font-family: "Courier New";
    src: local("Microsoft YaHei UI");
}

works to replace Courier New with YaHei for pages that specify font-family: Courier New, but not for pages that specify font-family: monospace. The way to change how the monospace generic is rendered is to use the font preferences.

(In reply to Emilio Cobos Álvarez (:emilio) from comment #6)

It also seems odd that the font family prefs don't work, it works fine here, like if I go to about:preferences and update the monospace font to be Source Code Pro, then the page from comment 4 works fine and shows Source Code Pro.

This might be an issue of which language's font prefs are being set. If the reporter's system is set to Chinese, it's possible that the Preferences dialog defaults to setting Chinese font prefs, and it's necessary to use the Advanced panel to set fonts for Latin-script content?

no, a specific font cannot be overridden as well, or to say, it takes effect but behaves differently, see above. Even if the page's orignal font is not Times New Roman, after I apply my custom css, it will become Times New Roman (or Courier New depending on if the font is a monospaced font.)

Comment 15

[Jonathan Kew [:jfkthame]]

Please provide a complete example of a page where you are seeing a problem, as it's difficult to understand from the descriptions exactly what combination of settings and CSS rules are involved. If you could attach small, self-contained HTML file that has the complete content and CSS rules you're trying to use, we may be able to figure out the issue.

Comment 16

[tttpob]

sorry i was pretty busy last few weeks, I will provide what needed to locate the problem soon

Comment 17

[tttpob]

I find things are more complicated than I thought, not only are monospaced fonts affected, but all fonts.
You may know there are two kinds of Chinese characters, Simplified and Traditional, and they have some overlay. But even the characters in the overlapped region have different shape in standards made by the government which use Simplified Chinese or Traditional Chinese. If you are using a font contains both the two standards, like Sarasa Fonts, you will notice that some Simplified Chinese characters are displayed in the manner of the standard of Traditional Chinese region.

I find it quite complicated for me to explain this in English. And I don't know how to insert image to the comment directly.

Comment 18

[tttpob]

I am not able to reproduce the problem mentioned above about Simplified and Traditional Chinese, maybe next time. But I managed to reproduce the problem about code font, and found another problem that applying @font-face will empty the font-weight setting in firefox, html files including styles used attached above.

Comment 19

[tttpob]

Attachment: rendering of the html file in firefox and chrome

Comment 20

[tttpob]

Attachment: bugzilla-font-face.html

20191102