Search code examples
htmlcssreactjstypescriptfonts

Font rendering issue using <Font> with Latin letters (ě, š, č, ř, ž) using React Native and Poppins font

I'm facing an issue with font rendering in my React Native project, specifically with Latin letters such as ě, š, č, ř, ž when using the Poppins font. I have defined the font using the following code which is not functioning for latin letters:

<Font
fontFamily="Poppins"
fallbackFontFamily="Verdana"
  webFont={{
   url: "https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJfecnFHGPc.woff2",
   format: "woff2",
  }}
fontWeight={400}
fontStyle="normal"
/>

Different style of ě from the rest of letters

Tried:

I tried using different fontWeights, links and formats.

Expected:

Same style of font for whole document with latin letters

expected outcome

Solution

  • The characters ě, š, č, ř, ž are included in the latin-extended subset.
    You're currently loading the (basic) latin subset thus, you see a fallback font.

    If you only need the regular version just open the CSS URL in your browser and copy the urls for latin and latin ext from the @font-face rules.

    Frankly, I haven't found an explanation, how to add multiple unicode ranges in react-native but it should look something like this

    <Font
    fontFamily="Poppins"
    fallbackFontFamily="Verdana"
    webFont={[
      {
        url: "https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJfecnFHGPc.woff2",
        format: "woff2",
        unicodeRange: "U+0000-00FF, U+0100-024F, U+1E00-1EFF, U+0400-04FF, U+0500-052F, U+0600-06FF, U+0900-097F, U+0A00-0A7F, U+1100-11FF, U+1F00-1FFF",
      },
      {
        url: "https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJnecmNE.woff2",
        format: "woff2",
        unicodeRange: "U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF",
      },
    ]}
    fontWeight={400}
    fontStyle="normal"
  />


    /* latin */

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJfecg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* latin-ext */

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJnecmNE.woff2) format('woff2');
}

body {
  font-family: 'Poppins';
}
    <h1>Hamburgefons ě, š, č, ř, ž </h1>

    Otherwise you can also download the complete "unsubsetted" versions.
    Keep in mind these files are significantly bigger than a single unicode-range subset (~50KB).

    "files": {
        "100": "http://fonts.gstatic.com/s/poppins/v20/pxiGyp8kv8JHgFVrLPTecnFBGPaTSQ.woff2",
        "100italic": "http://fonts.gstatic.com/s/poppins/v20/pxiAyp8kv8JHgFVrJJLmE3tAOvODSVFF.woff2",
        "200": "http://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLFj_V15vFP-KUEg.woff2",
        "200italic": "http://fonts.gstatic.com/s/poppins/v20/pxiDyp8kv8JHgFVrJJLmv1plFd2PQEhcqw.woff2",
        "300": "http://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLDz8V15vFP-KUEg.woff2",
        "300italic": "http://fonts.gstatic.com/s/poppins/v20/pxiDyp8kv8JHgFVrJJLm21llFd2PQEhcqw.woff2",
        "regular": "http://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrFJXUc1NECPY.woff2",
        "italic": "http://fonts.gstatic.com/s/poppins/v20/pxiGyp8kv8JHgFVrJJLecnFBGPaTSQ.woff2",
        "500": "http://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLGT9V15vFP-KUEg.woff2",
        "500italic": "http://fonts.gstatic.com/s/poppins/v20/pxiDyp8kv8JHgFVrJJLmg1hlFd2PQEhcqw.woff2",
        "600": "http://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLEj6V15vFP-KUEg.woff2",
        "600italic": "http://fonts.gstatic.com/s/poppins/v20/pxiDyp8kv8JHgFVrJJLmr19lFd2PQEhcqw.woff2",
        "700": "http://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLCz7V15vFP-KUEg.woff2",
        "700italic": "http://fonts.gstatic.com/s/poppins/v20/pxiDyp8kv8JHgFVrJJLmy15lFd2PQEhcqw.woff2",
        "800": "http://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLDD4V15vFP-KUEg.woff2",
        "800italic": "http://fonts.gstatic.com/s/poppins/v20/pxiDyp8kv8JHgFVrJJLm111lFd2PQEhcqw.woff2",
        "900": "http://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLBT5V15vFP-KUEg.woff2",
        "900italic": "http://fonts.gstatic.com/s/poppins/v20/pxiDyp8kv8JHgFVrJJLm81xlFd2PQEhcqw.woff2"
      },

    Data retrieved using the developer API.