expo / google-fonts

Use any of the 1000+ fonts (and their variants) from fonts.google.com in your Expo app.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

@expo-google-fonts/lato letter 'g' is cut off at the bottom

w3liang opened this issue · comments

I upgraded my EXPO SDK to EXPO 47 and found that all the letter 'g' is cut off at the bottom, only in Android, I am using a Pixel 4a device, you can reproduce this using the below codes.
Screenshot_20230411-115426_Original

import React, { useState, useEffect } from 'react';
 
import { Text, View, StyleSheet } from 'react-native';
import AppLoading from 'expo-app-loading';
import {
  useFonts,
  Lato_100Thin,
  Lato_100Thin_Italic,
  Lato_300Light,
  Lato_300Light_Italic,
  Lato_400Regular,
  Lato_400Regular_Italic,
  Lato_700Bold,
  Lato_700Bold_Italic,
  Lato_900Black,
  Lato_900Black_Italic,
} from '@expo-google-fonts/lato';
 
export default () => {
  let [fontsLoaded] = useFonts({
    Lato_100Thin,
    Lato_100Thin_Italic,
    Lato_300Light,
    Lato_300Light_Italic,
    Lato_400Regular,
    Lato_400Regular_Italic,
    Lato_700Bold,
    Lato_700Bold_Italic,
    Lato_900Black,
    Lato_900Black_Italic,
  });
 
  let fontSize = 24;
  let paddingVertical = 6;
 
  if (!fontsLoaded) {
    return <AppLoading />;
  } else {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text
          style={{
            fontSize,
            paddingVertical,
            // Note the quoting of the value for `fontFamily` here; it expects a string!
            fontFamily: 'Lato_100Thin',
          }}>
          Lato Thin g
        </Text>
 
        <Text
          style={{
            fontSize,
            paddingVertical,
            // Note the quoting of the value for `fontFamily` here; it expects a string!
            fontFamily: 'Lato_100Thin_Italic',
          }}>
          Lato Thin Italic g
        </Text>
 
        <Text
          style={{
            fontSize,
            paddingVertical,
            // Note the quoting of the value for `fontFamily` here; it expects a string!
            fontFamily: 'Lato_300Light',
          }}>
          Lato Light g
        </Text>
 
        <Text
          style={{
            fontSize,
            paddingVertical,
            // Note the quoting of the value for `fontFamily` here; it expects a string!
            fontFamily: 'Lato_300Light_Italic',
          }}>
          Lato Light Italic g
        </Text>
 
        <Text
          style={{
            fontSize,
            paddingVertical,
            // Note the quoting of the value for `fontFamily` here; it expects a string!
            fontFamily: 'Lato_400Regular',
          }}>
          Lato Regular g
        </Text>
 
        <Text
          style={{
            fontSize,
            paddingVertical,
            // Note the quoting of the value for `fontFamily` here; it expects a string!
            fontFamily: 'Lato_400Regular_Italic',
          }}>
          Lato Italic g
        </Text>
 
        <Text
          style={{
            fontSize,
            paddingVertical,
            // Note the quoting of the value for `fontFamily` here; it expects a string!
            fontFamily: 'Lato_700Bold',
          }}>
          Lato Bold g
        </Text>
 
        <Text
          style={{
            fontSize,
            paddingVertical,
            // Note the quoting of the value for `fontFamily` here; it expects a string!
            fontFamily: 'Lato_700Bold_Italic',
          }}>
          Lato Bold Italic g
        </Text>
 
        <Text
          style={{
            fontSize,
            paddingVertical,
            // Note the quoting of the value for `fontFamily` here; it expects a string!
            fontFamily: 'Lato_900Black',
          }}>
          Lato Black g
        </Text>
 
        <Text
          style={{
            fontSize,
            paddingVertical,
            // Note the quoting of the value for `fontFamily` here; it expects a string!
            fontFamily: 'Lato_900Black_Italic',
          }}>
          Lato Black Italic g
        </Text>
      </View>
    );
  }
};

package.json

{
  "dependencies": {
    "prop-types": "^15.6.2",
    "@expo-google-fonts/lato": "^0.2.3",
    "expo-app-loading": "~2.1.1",
    "expo-font": "~11.0.1"
  }
}