CODEWITHSUNDEEP
react-nativestyled-components
benhowdle89
benhowdle89

Reputation: 37484

Set font-family fallback in Styled Components in React Native

export const SomeText = styled(Text)`
    font-family: "Arial", sans-serif;
`

export const SomeText = styled(Text)`
    font-family: Arial, sans-serif;
`

export const SomeText = styled(Text)`
    font-family: "Arial, sans-serif";
`

All of the above error.

Example error: Error: Failed to parse declaration "fontFamily: "Arial", sans-serif"

Which is the correct way to apply font-family in React Native via Styled Components?

Upvotes: 2

Views: 4243

Answers (1)

emik
emik

Reputation: 953

The system fonts are different for mobile platforms than for the browser. You can find a list here: https://github.com/react-native-training/react-native-fonts

If you want your code to fall back on available system fonts you can use something like this: 

${Platform.select({ ios: css`font-family: Helvetica`, android: css`font-family: Roboto` })};

(Reference here: https://github.com/styled-components/styled-components/issues/1058)

Upvotes: 5

Related Questions