CODEWITHSUNDEEP
htmlcssgoogle-chromefonts
trekky0623
trekky0623

Reputation: 1

Chrome update suddenly breaks @font-face

I'm trying to use @font-face to replace instances of a font. This has usually worked for me:

@font-face {
    font-family: 'Arial';
    font-weight: bold;
    font-style: italic;
    src: local('Times New Roman');
}

@font-face {
    font-family: 'Arial';
    font-weight: bold;
    src: local('Times New Roman');
}

@font-face {
    font-family: 'Arial';
    font-style: italic;
    src: local('Times New Roman');
}

@font-face {
    font-family: 'Arial';
    src: local('Times New Roman');
}

With the end result being instances of Arial being replaced with Times New Roman. In fact, this works on a separate computer running Windows 10 and Chrome 61.0.3163.100.

However, after a recent update to 62.0.3202.62, Arial is still replaced with Times New Roman, but bold and italics no longer work. Trying to reference something like "Times New Roman Bold" doesn't work and just defaults back to Arial. Placing !important after the bold and italic src lines gives faux-bold and faux-italics.

Was the old behaviour wrong? What is the proper way to replace a font through CSS, if that is even possible?

Upvotes: 0

Views: 726

Answers (2)

Chawye Hsu
Chawye Hsu

Reputation: 53

We can't reference something like "Times New Roman Bold" or "Arial Bold", looks like it's a bug of Chrome, Read below.

  1. The tracked issue: https://bugs.chromium.org/p/chromium/issues/detail?id=627143, in #25 drott refer the spec for local().

  2. Here drott replied why:

    Our local matching is broken and uses family name for matching, instead of postscript name
    ——drott

  3. Here drott said previous workaround breaks what Google Fonts is expecting on Android Chrome.

    this change actually makes src: local() handling more correct by taking the styling out the equation, but indeed breaks what Google Fonts is expecting.

    There are two problems: Our src: local() matching is broken and does not match full font name or postscript font name, that's issue 627143.

    What we do instead, we match src: local() against font family name, plus we take into account the stretch, style, weight request (coming from the CSS styling, stored in FontDescription) and feed this into the family matching.

    With this broken local() matching, Google fonts' CSS manages to match against the local robot variants using just local("sans-serif") plus font-weight: bold and font-weight: 100, or 300.

    I am going to partially revert the above CL and reinstate the bug, until I get to fixing local() matching in a more durable way.
    ——drott

  4. Related commits.

Upvotes: 2

Matt
Matt

Reputation: 172

First of all, why would you do that? Can't you just use 

font-family: "Times New Roman";

On body element?

Upvotes: 0

Related Questions