Font Family cannot be recognised in theme
See original GitHub issueVersion: “react-native”: “0.68.2”, “react-native-paper”: “5.0.0-rc.3”, “react-native-vector-icons”: “^9.2.0”,
Problem: the fontFamily in the
<Text variant="displayLarge" theme={{ typescale: { displayLarge: { fontSize: 30, fontFamily: 'HelveticaNeue-Thin' },},}}>
does not take effect while the <Text style={theme.fonts.thin}>
does works as expected.
https://snack.expo.dev/@wztrustgrid/fontfamilyintheme
import { StyleSheet, View } from 'react-native';
import {
configureFonts,
Provider as PaperProvider,
MD3LightTheme as DefaultTheme,
Text,
} from 'react-native-paper';
const fontConfig = {
web: {
thin: {
fontFamily: 'HelveticaNeue-Thin',
fontSize: 30,
},
},
ios: {
thin: {
fontFamily: 'HelveticaNeue-Thin',
fontSize: 30,
},
},
android: {
thin: {
fontFamily: 'HelveticaNeue-Thin',
fontSize: 30,
},
},
};
const theme = {
...DefaultTheme,
fonts: configureFonts(fontConfig),
};
export default function App() {
return (
<PaperProvider
theme={theme}
>
<View style={styles.container}>
{/* Display correct font */}
<Text style={theme.fonts.thin}>
ABCDEFGHIJKLM NOPQRSTUVWXYZ abcdefghijklm nopqrstuvwxyz 1234567890
</Text>
{/* Display incorrect font */}
<Text
variant="displayLarge"
theme={{
typescale: {
displayLarge: { fontSize: 30, fontFamily: 'HelveticaNeue-Thin' },
},
}}
>
ABCDEFGHIJKLM NOPQRSTUVWXYZ abcdefghijklm nopqrstuvwxyz 1234567890
</Text>
</View>
</PaperProvider>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
Issue Analytics
- State:
- Created a year ago
- Comments:10 (5 by maintainers)
Top Results From Across the Web
Font Family not working with font face - Stack Overflow
I first tried the "classic" @font-face method, and then the advenced one by using WEBFONT GENERATOR and adding all the files created in...
Read more >Custom fonts not loading - WordPress.org
I am running the Joints-WP-CSS version 6 theme which uses Foundation. I have @font-face'd the following fonts in my style.css file like below....
Read more >Magento 2: Font family does not change. How to troubleshoot?
I want to change the font family to Exo 2. Hence I copied the _theme.less to my child theme and changed @base-font-family to:...
Read more >Custom Fonts Not Displaying On Front End - Elementor
Learn everything about Custom Fonts Not Displaying On Front End in this article from Elementor's Knowledge Base. Get Elementor tips & more.
Read more >How to Add Custom Fonts to a WordPress Theme - Pressidium
First, you have to get your font link from the Google fonts site. Let's say that you want to use the Roboto font...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@lukewalczak, why the fontFamily only apply in android?
in react-native-paper source code src/component/Typography/Text.tsx (Line 102)
I will be investigating that issue in the nearest future, and will update you here about the result.