htmlcssweb-testinggoogle-web-designer

Font typograpghy issue on cross browser


I am using nova-font in my website, but it looks different-in Firefox (A-bit-zoom-and-more-sharp). Is there any solution so that it looks same on both Chrome and Firefox?


Solution

  • Font-rendering in browsers is different, so there are a few tweaks which can be done to make it less worse, but cross browser pixel perfect font rendering is yet (mid 2019) not achieved because of the different render engines in the browsers.

    I can give you a few hints on how to improve your code - if you google the properties you will find more about them:

    html {
          /* Adjust font size */
          font-size: 100%;
          -webkit-text-size-adjust: 100%;
          /* Font varient */
          font-variant-ligatures: none;
          -webkit-font-variant-ligatures: none;
          /* Smoothing */
          text-rendering: optimizeLegibility;
          -moz-osx-font-smoothing: grayscale;
          font-smoothing: antialiased;
          -webkit-font-smoothing: antialiased;
          text-shadow: rgba(0, 0, 0, .01) 0 0 1px;
      }