Props font-weight doesn't work on iOS by use expo-font and custom font

Hello, guys!

Added custom font (sf pro text regular, sf pro display regular) to the project. The font is substituted correctly, but when I try to change the font weight of a given font, nothing happens on iOS. On Android, the font weight changes only if you pass the value bold. And if you transfer font weight with a number, nothing happens on the Android or on the iOS.

        // Load fonts
        await Font.loadAsync({
          ...Ionicons.font,
          'sfpro-display': require('@src/assets/fonts/SFProDisplay.ttf'),
          'sfpro-text': require('@src/assets/fonts/SFProText.ttf'),
        });

What is the way to set the font weight of text to make it work?

I use version modules: “expo”: “^38.0.0”, “expo-font”: “~8.2.1”, “react”: “16.11.0”

Issue Analytics

State:
Created 3 years ago
Comments:5 (3 by maintainers)

Top GitHub Comments

1reaction

Melekhincommented, Jul 10, 2020

@byCedric, Thank you very much for the quick response! It’s a pity that the React Native does not yet allow you to adjust the weight for custom fonts.

The links turned out to be very useful, thank’s!

0reactions

harismhcommented, Sep 19, 2021

Thank you. Would I have to change anything to this code snippet if I wanted to include medium and semibold styles?

@10000multiplier Some things would need to be changed, but this solution should be able to accommodate further weights. Primarily, the CUSTOM_FONT_FAMILY map would need to expand to include the font names for the extra variants, and an additional Regex fn and check would need to be added given the bold regex used above is only checking for weights between 700-900. You could also refactor the bold font check into a switch statement with cases for each font weight.

Top Results From Across the Web

Custom fonts - Expo Documentation

Learn about using custom fonts, supported font formats for each platform and loading them.

Reat Native Expo custom fontWeight doesn't work on iOS device

I know I can use fontFamily, but the question was can I use the fontWeight attribute to achieve the same goal. It does...

Blog: Fix Custom Font Inconsistency in React Native - Vincit

Here's how to fix them. If your custom fonts are starting to drive you mad in your react-native projects, you're not alone! The...

1 Using Custom Fonts | Expo | React Native - YouTube

Learn how to use Custom Fonts with a practical Real World Example.New To React Native?React Native Foundation + Firebase + Redux ...

Add custom fonts to react native (expo) app

2. Go to https://fonts.google.com/ (or any other fonts library) and download your preferred font or multiple fonts. · 3. Extract the TrueTypeFont ......