react-native-autoheight-webview icon indicating copy to clipboard operation
react-native-autoheight-webview copied to clipboard

Custom Font in not working in iOs

Open sajjad-yousaf opened this issue 2 years ago • 8 comments

I'm trying to Apply a custom font for Android iOS and it's working perfectly in Android but not in iOS. I have font files in the Xcode project inside the Resources folder and also exist in the Copy Bundle Resources. Please correct me where I'm making a mistake or is it a library bug?

const fontUrl = Platform.select({ ios: 'Raleway-Regular.ttf', android: 'file:///android_asset/fonts/Raleway-Regular.ttf', });

export const fontCss = @font-face { font-family: 'Raleway-Regular'; src: url('${fontUrl}') format('truetype'); } body { font-family: 'Raleway-Regular', sans-serif; font-size: 14px; font-weight: 100 };

                   <AutoHeightWebView
                        style={{ width: Dimensions.get('window').width - 40, marginBottom: 5, alignSelf: 'center' }}
                        source={{ html: this.props.item.description }}
                        originWhitelist={["https://*", "http://*", "file://*", "sms://*", "tel://*", "telprompt://*"]}
                        customStyle={fontCss}
                        scrollEnabled={false}
                        javaScriptEnabled={true} />

sajjad-yousaf avatar Sep 13 '23 06:09 sajjad-yousaf

@iou90 kindly respond where am i doing any mistake or its library bug?

metalogixgaming avatar Sep 18 '23 03:09 metalogixgaming

@iou90 Any update on this issue? I am facing the same issue.

pushp-apexon avatar Sep 20 '23 08:09 pushp-apexon

@iou90 Any updates or suggestions?

sajjad-yousaf avatar Sep 21 '23 06:09 sajjad-yousaf

@iou90 Any update on this issue?

metalogixgaming avatar Sep 26 '23 04:09 metalogixgaming

@pushp-apexon have you found any solution?

metalogixgaming avatar Oct 02 '23 04:10 metalogixgaming

@metalogixgaming No not found any solution!!

pushp-apexon avatar Oct 02 '23 09:10 pushp-apexon

@pushp-apexon i've fixed it use source={{ html: this.props.item.description , baseUrl:””}} and check it

metalogixgaming avatar Oct 07 '23 08:10 metalogixgaming

This custom style works both on iOS and Android

const customStyle = `@font-face {
                           font-family: 'Poppins';
                           font-style: normal;
                           font-weight: 400;
                           src: local('Poppins Regular'), local('Poppins-Regular'), url(https://fonts.gstatic.com/s/poppins/v12/pxiEyp8kv8JHgFVrJJfecg.woff2) format('woff2');
                           unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
                         } * {font-size: 13px; color: black; font-weight: 400!important; font-family: Poppins,sans-serif}
                         .ql-image { width: 100% !important; }`;

Barney4242 avatar Apr 01 '24 11:04 Barney4242