google-fonts
google-fonts copied to clipboard
@expo-google-fonts/lato letter 'g' is cut off at the bottom
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.
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"
}
}