styled-components: Custom font doesn't applied with font-family in React Native

Version

1.2.1

Reproduction

import React from 'react'
import styled from 'styled-components/native'

const Container = styled.View`
  flex: 1;
  justify-content: center;
  align-items: center;
`

const Text = styled.Text`
  font-family: 'Custom Font Name';
  font-size: 35;
  text-align: left;
`

export () => 
  <Container>
    <Text>No custom font applied</Text>
    <Text style={{fontFamily: 'Custom Font Name'}}>Custom font applied</Text>
  </Container>

Steps to reproduce

Add custom font in project
Try to use new font with font-family in styled-components

Expected Behavior

New font should be applied with font-family in styled-components

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 2
Comments: 25 (15 by maintainers)

Most upvoted comments

I have the same issue, I use Yantramanav-Regular font family. When i use it inline style or Stylesheet it worked! When I used it with styled-components it doesnt work

caner-karaman on Mar 16, 2021

This should work: (note the missing quotes around the font name)

const Text = styled.Text`
  font-family: Custom Font Name;
`

Yep! We decided to not allow quotes here, because that would have been a breaking change. There’s an open or that fixes this for the next major version.

@jacobp100 we now have a 2.0 branch, would you mind releasing a new major version of css-to-react-native and submitting a PR upgrading styled-components against 2.0 so that we don’t forget?

mxstbr on Jan 11, 2017

I don’t disagree with what you wrote - but that seems more like an issue for the font package you’re using and/or styled-components. You could try opening an issue in one of those repos if you need more help.

jacobp100 on Mar 17, 2021