Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[iOS]: Custom Font not working

See original GitHub issue

Bug description: On iOS, custom fonts are not used within the WebView. I followed the instructions on a few prior bug reports but I can’t get the custom font running on iOS.

To Reproduce:

To generate the html for a WebView, I created this function

export const generateHtml = (content, textColor, fontFileName = 'NeuzeitOffice-Regular', fileFormat = 'ttf') => {

  const fileUri = Platform.select({
    ios: `${fontFileName}.${fileFormat}`,
    android: `file:///android_asset/fonts/${fontFileName}.${fileFormat}`
  })

  return (
    `
      <!DOCTYPE html>
      <html lang="en">
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
          <style media="screen" type="text/css">

            html, body {
              height: 100%;
              width: 100%;
              margin: 0;
              background-color: transparent;

              @charset "UTF-8";
              @font-face {
                font-family: ${fontFileName};
                src: url('${fileUri}'), local('${fontFileName}'), format('${fileFormat === 'ttf' ? 'truetype' : 'opentype'}');
              };

              font-size: 15px;
              line-height: 22px;
              text-align: left;
              color: ${textColor};
            }

          </style>
      </head>
      <body>
        ${content}
      </body>
    `
  )
}

I use it like this:

import { ActivityIndicator, View } from 'react-native'
import { WebView } from 'react-native-webview'

const html = generateHtml(content, '#FFF')

<WebView
            pointerEvents='none'
            scrollEnabled={false}
            source={{ html }}
            renderLoading={() => <View style={{ flex: 1 }} ><ActivityIndicator size='small' color='#FFF' /></View>}
            startInLoadingState

            allowFileAccess
            allowUniversalAccessFromFileURLs
            allowingReadAccessToURL='file:///assets/fonts'

          />

I tried to use the last 3 properties to get using the custom font on iOS running but it didn’t help.

I also tried it on a real Device - not only on the Simulator.

Expected behavior:

As this code works perfectly fine on Android, I would like to know what I have to do to make it run on iOS too. It would be great to include an example in the documentation. I’d like to contribute it to the documentation if I learn how to do it.

Environment:

OS: iOS
OS version: iOS 13.0 and iOS 13.2
react-native version: 0.61.2
react-native-webview version: 7.4.2

Issue Analytics

State:
Created 4 years ago
Reactions:7
Comments:51 (3 by maintainers)

Top GitHub Comments

30reactions

shumincommented, May 4, 2020

Here is a Hello World app with custom font in react-native-webview that works both on Android and iOS. Hope this will help.

https://github.com/mohammad-haque/react-native-webview-custom-font

29reactions

sonseaitcommented, Dec 16, 2019

I have a solution, you guys can use this tool https://transfonter.org to transform the font to base64 and add the generated css to html, I have tested and it working https://imgur.com/MMhMrQg