Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Custom Font in not working in iOs #261

Open
sajjad-yousaf opened this issue Sep 13, 2023 · 8 comments
Open

Custom Font in not working in iOs #261

sajjad-yousaf opened this issue Sep 13, 2023 · 8 comments
Assignees
Labels

Comments

@sajjad-yousaf
Copy link

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
Copy link

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

@pushp-apexon
Copy link

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

@sajjad-yousaf
Copy link
Author

sajjad-yousaf commented Sep 21, 2023

@iou90 Any updates or suggestions?

@metalogixgaming
Copy link

@iou90 Any update on this issue?

@metalogixgaming
Copy link

@pushp-apexon have you found any solution?

@pushp-apexon
Copy link

@metalogixgaming No not found any solution!!

@metalogixgaming
Copy link

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

@Barney4242
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

5 participants