Dynamic fonts are not rendering on Android with "react-native-dynamic-fonts" package
See original GitHub issueHello, guys, just noticed a problem when I use “react-native-dynamic-fonts” package to apply custom fonts on SVG <Text>
element on Android application. iOS application shows fonts perfectly.
React Native Dynamic Fonts package works correctly, because I can see preloaded custom font on simple React Native
<Text>
elements on Android.
It can be reproduced on empty app with SVG <Text>
element with fontFamily prop and with preloaded base64 font with “react-native-dynamic-fonts”.
<Svg
version="1.1"
id="test"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
style={{ width: 200, height: 200 }}
viewBox="0 0 200 200"
>
<G>
<Text fontFamily="Any Custom Font Name">
Test text
<Text>
</G>
</Svg>
import { loadFont } from 'react-native-dynamic-fonts';
...
const base64FontString = 'Any Custom Font Name encoded as base64 string';
/* Load a single font */
loadFont('Any Custom Font Name', base64FontString, 'ttf').then(function(name) {
console.log('Loaded font successfully. Font name is: ', name);
});
...
“react”: “16.6.1”, “react-native”: “0.57.7”, “react-native-svg”: “9.0.0”, (same on 8.x.x)
Mac OS 10.14.2 High Sierra Xcode v10.1 Android Studio 3.2.1 Android Emulator with Android 8.1 Gradle v4.8 NodeJS v10.13.0 npm v6.4.1
Issue Analytics
- State:
- Created 5 years ago
- Comments:6
Top Results From Across the Web
Dynamic fonts are not rendering on Android with "react-native ...
Hello, guys, just noticed a problem when I use "react-native-dynamic-fonts" package to apply custom fonts on SVG <Text> element on Android ...
Read more >react-native android fontFamily does not take effect
8 Answers 8 · fonts must be placed in android/app/src/main/assets/fonts · only .ttf files are supported · The name of the file has...
Read more >react-native-dynamic-fonts - npm
Start using react-native-dynamic-fonts in your project by running `npm i react-native-dynamic-fonts`. There are 4 other projects in the npm ...
Read more >Font - Expo Documentation
expo-font allows loading fonts from the web and using them in React Native ... Note, the fonts are not "reloaded" when you dynamically...
Read more >Blog: Fix Custom Font Inconsistency in React Native - Vincit
If your custom fonts are starting to drive you mad in your react-native projects, you're not alone! Here's how to fix them.
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
@msand Double checked in my app, it works perfectly now with 9.0.3! It was a cache issue maybe. Thank you a lot!