CODEWITHSUNDEEP
htmlcssgoogle-chromeubuntuchromium
Crashalot
Crashalot

Reputation: 34513

Font rendering in wrong color on Chromium

The Google font Nanum Gothic is rendering in the wrong color on Chromium and Ubuntu. The color renders as expected for other browser and OS combinations. For instance, the font is rendered properly on Chromium and MacOS.

The two images illustrate the problem: for some reason, the checkmark is rendered in gray and not yellow. (The weird spacing is a separate issue.)

We tested on Ubuntu 18.04 and Chromium 80.0.3987.0 (r722234).

Any suggestions what is causing this?

Correct

enter image description here

Wrong

enter image description here

Codepen

https://codepen.io/Crashalot/pen/9e51b87f9199ae917aeee69ed6dc4866

HTML

<html><head>
   <link href="/stylesheets/reset.css?1547166062" media="screen" rel="stylesheet" type="text/css">
   <link href="https://fonts.googleapis.com/css?family=Nanum+Gothic:regular" rel="stylesheet">
<style>


   body {
      background: transparent;
   }


   #designBox {
      transform-origin: 0 0;
      position: absolute;
      background: transparent;
      margin: auto;
      cursor: pointer;
      overflow: hidden;
   }


   .itemBox, .itemBox > * {
      position: absolute;
      box-sizing: border-box;
   }


   .backgroundColorBox, .backgroundGraphicBox, .foregroundBox, .frameBox {
      width: 100%;
      height: 100%;
      background-size: 100% 100%;
      background-color: transparent;
      background-position: center;
      background-repeat: no-repeat;
      pointer-events: none;
   }


   .backgroundColorBox.design, .backgroundGraphicBox.design  {
      position: absolute;
      pointer-events: auto;
   }


   .backgroundGraphicBox {
      background-position: initial;
      background-repeat: repeat;
   }


   .itemBox.text .ql-editor {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      overflow: visible;
      opacity: 1;
      cursor: text;
   }


   .itemBox.text .foregroundBox * {
      line-height: 1em;
   }


   .itemBox.text p {
      margin: 0;
      padding: 0;
      caret-color: black;
      pointer-events: initial;
   }


   .itemBox.text p:last-child {
      margin: 0;
   }


   #designBox {
      transform: scale(1.0);
   }
</style></head>


<body><div id="designBox" style="width: 1000px; height: 1000px;" data-preserve-aspect-ratio="1" data-font-list="Nanum+Gothic:regular">

    <div class="backgroundColorBox design" style="left: 0px; top: 0px; width: 1000px; height: 1000px; background: rgb(51, 51, 51);"></div>

<div class="itemBox text" id="MFExztST243v" style="top: 387px; left: 63px; width: 866px; height: 264px;"><div class="foregroundBox ql-container ql-disabled" style="width: 866px; height: 264px; top: 0px; left: 0px;"><div class="ql-editor" data-gramm="false" contenteditable="false" spellcheck="false" autocomplete="off" autocorrect="off" autocapitalize="off"><p style="align-self: flex-start;"><span style="letter-spacing: 0em; font-weight: 400; line-height: 1.5; font-size: 72px; color: rgb(255, 193, 7); font-family: &quot;Nanum Gothic&quot;; font-style: normal;">✔Premium web filter and&nbsp;</span></p><p style="align-self: flex-start;"><span style="letter-spacing: 0em; font-weight: 400; line-height: 1.5; font-size: 72px; color: rgb(255, 193, 7); font-family: &quot;Nanum Gothic&quot;; font-style: normal;">&nbsp;&nbsp;&nbsp;app blocker included</span></p></div></div></div></div></body></html>

Upvotes: 2

Views: 710

Answers (2)

Crashalot
Crashalot

Reputation: 34513

Ultimately the problem was that the checkmark was being rendered from the Apple emoji font installed on the server, causing the checkmark to appear in gray.

Upvotes: 0

Mech
Mech

Reputation: 4015

This is a possible bug: https://bugs.chromium.org/p/chromium/issues/detail?id=627143

I'll refer you to comment 67 for the possible solution: https://bugs.chromium.org/p/chromium/issues/detail?id=627143#c67

It appears that fonts hold different IDs which is the cause of the problem.

Upvotes: 3

Related Questions