question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Font Family cannot be recognised in theme

See original GitHub issue

Version: “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:closed
  • Created a year ago
  • Comments:10 (5 by maintainers)

github_iconTop GitHub Comments

3reactions
DavidZhongSydcommented, Aug 10, 2022

@lukewalczak, why the fontFamily only apply in android?

in react-native-paper source code src/component/Typography/Text.tsx (Line 102)

            ...(Platform.OS === 'android' && { fontFamily }),
            fontSize,
            fontWeight,
            lineHeight,
            letterSpacing,
            color: theme.colors.onSurface,
          },
1reaction
lukewalczakcommented, Aug 24, 2022

I will be investigating that issue in the nearest future, and will update you here about the result.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found