iou90 / react-native-autoheight-webview

An auto height webview for React Native
ISC License
492 stars 162 forks source link

Custom Font in not working in iOs #261

Open sajjad-yousaf opened 1 year ago

sajjad-yousaf commented 1 year ago

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} />
metalogixgaming commented 12 months ago

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

pushp-apexon commented 11 months ago

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

sajjad-yousaf commented 11 months ago

@iou90 Any updates or suggestions?

metalogixgaming commented 11 months ago

@iou90 Any update on this issue?

metalogixgaming commented 11 months ago

@pushp-apexon have you found any solution?

pushp-apexon commented 11 months ago

@metalogixgaming No not found any solution!!

metalogixgaming commented 11 months ago

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

Barney4242 commented 5 months ago

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; }`;