So hopefully this is the right form for this question.

I'm not much of a designer however on a site I'm working on, I noticed that on my "404" page, the text appears blurry on chrome, and a lot more crisp in firefox.

Top being Firefox, Bottom being Chrome.

enter image description here

I've tried different font format types, the current image is using "woff2" however the error seems to persist regardless of the type.

I was going to try SVG font however that appears to no longer be available in Chrome.

I've attempted to use the -webkit-font-smoothing and all of its various options, but none of them seem to have any effect.

I also have tried -webkit-text-stroke-width: 0.6px; this actually helps on some of the edges but causes aliasing on other edges.

Apart from resorting to an SVG graphic in place of the text (for this particular case), do any of you know any solutions?


All relevant font css:

    @font-face {
        font-family: 'robotoregular';
        src: url('roboto-regular-webfont.woff2') format('woff2'),
            url('roboto-regular-webfont.woff') format('woff'),
            url('roboto-regular-webfont.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;

    * {
        font-family: 'robotoregular', Arial, Sans-Serif;

    h1 {
        font-size: 130px;
        font-weight: normal;
  • Could you please add to the question more @font-face code in your .css file? Maybe there's the problem. Jul 27 '18 at 9:40
  • @SylwesterPilarz I've added the CSS used for the font at the end of the original post.
    – Hex Crown
    Jul 27 '18 at 9:48
  • Did you try to add this font by @import url('https://fonts.googleapis.com/css?family=Roboto');? Jul 27 '18 at 9:57
  • Just tried it, doesn't improve on the problem at all. Kinda wondering if at this point its just chromes fault and there's nothing that can be done...
    – Hex Crown
    Jul 27 '18 at 10:02
  • 1
    I just tested Firefox and Chrome with Roboto from google fonts, the differences are insignificant with perhaps a little more anti-aliasing in Chrome, but there is nothing I would call a problem. All browsers render fonts slightly differently, and so it's totally unsurprising.
    – Billy Kerr
    Jul 27 '18 at 13:17

Most likely there is no answer at this time, it appears to just be a problem with Google Chrome (on Windows, not sure about Mac OS). The only solution is to wait for Google to fix it.

(unless one of you know some amazing way of overcoming this, in that case please reply with it :D)

  • 1
    No, its probably the hinting of the font. But yes you dont actually have full control of the rendering engine, each browser will look different for the foreseable future.
    – joojaa
    Jul 27 '18 at 13:22
  • Most likely different methods of anti-aliasing the text.
    – Paul
    Oct 25 '18 at 13:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.