Is there any way to change header's font ? #542

yeknava · 2017-03-02T11:58:11Z

Is there any way to change header's font ?
i tried this but didn't work.

static navigationOptions = {
	    title: 'title',
	    header: {
	    	titleStyle: {
	    		fontFamily: 'test'
	    	}
	    }    
	}

The text was updated successfully, but these errors were encountered:

grabbou · 2017-03-02T12:11:14Z

That's how it should work. Are you sure you don't override header config? Do you specify navigationOptions in any other places?

yeknava · 2017-03-02T12:36:57Z

yes. there is not other options that override it. color and other styles, everything works but fontFamily.

ghost · 2017-03-02T13:27:05Z

Make sure you're using a supported fontFamily I just tried one and it works.

Here's a list of supported fonts: https://github.com/dabit3/react-native-fonts

static navigationOptions = {
  header: ({ navigate }) => {
    return {
      titleStyle: {
        fontFamily: 'American Typewriter'
      },
    };
  },
};

grabbou · 2017-03-02T13:43:20Z

Since the title passes and the end component is <text />, I don't think it's an issue with React Navigation. Does that font work for other components within your app?

thotegowda · 2017-03-02T14:14:19Z

I have also faced this problem. The main problem seems to be in react-native rather than react-navigation.

HeaderTitle.js sets fontWeight as fontWeight: Platform.OS === 'ios' ? '600' : '500',

When fontWeight is set to >=500, react-native expects bold variation of custom font (naming convention CustomFont_bold.ttf) to be present. If it fails find bold variation of custom font, it falls back to default font family instead of custom font family with regular font.

In this case, app is setting fontFamily to custom font and HeaderTitle.js is hardcoding fontWeight to 500, so custom font will never reflect.
Quick fix would be have fontWeight: "200" in your header.titleStyle of your navigationOptions. or keep bold variation of your custom font

I'm planning to raise PR in react-native project to fix it by falling back to regular variation of custom font instead default family bold font.

But if you feel, HeaderTitle.js should always read fontWeight from header.titleStyle. Let me know, happy to raise a PR.

allpwrfulroot · 2017-03-13T03:34:32Z

Just to note, Exponent does not support fontWeight or fontStyle at the moment, so those of us with custom fonts are SOL at the moment unless we go in and change the src.

kamalk333 · 2017-03-23T07:50:13Z

@thotegowda Heyy!!! thanks for that quick fix, that really helped me.

airguide · 2017-05-02T17:21:01Z

headerTitle: <Text style={ styles.textHeader }>Dashboard</Text>
Works on android

WilliamIPark · 2017-08-29T13:04:19Z

Just because I landed here through a google search on how to change a headers font in general, and none of the above was working:

Use headerTitleStyle in navigationOptions.

aroth · 2017-09-19T21:00:24Z

@thotegowda any further information on this? did you have a chance to submit a PR?

anceque · 2017-10-02T14:47:36Z

@aroth Renaming the font to CustomFont_bold and using it with headerTitleStyle really does the magic. Try it.

Charlynux · 2017-11-17T16:18:56Z

If your fontFamily doesn't on Android for "headerTitleStyle" or "labelStyle", check weights managed by your font.

Just discover after some research that Android use a default font, if requested font doesn't have the requested fontWeight. (iOS seems to ignore fontWeight in this case.)
Both HeaderTitle and DrawerNavigatorItems define fontWeight (respectively 500 and bold).

My workaround is to define a font weight present in my TTF file in "headerTitleStyle" and "labelStyle".

labelStyle: {
  fontWeight: "normal",
  fontFamily: "Chalet-NewYorkNineteenSeventy"
}

Hope this could help someone.

pallavbakshi · 2018-01-14T10:31:43Z

In Jan 2018,
` static navigationOptions = ({ navigation }) => ({

title: 'Projects',

headerTitleStyle: {

    fontWeight: '300',

    color: '#ffffff',

    fontFamily: 'Nunito-Regular',

    fontSize: 16
  }

})`

mastersam92 · 2018-02-21T04:47:25Z

In feb 2018 :)

Not worked for me, but, solved( for me ):

-It is important, that 'fontFamily' contain name of font file( w/o extention )

In my case, name of font file: 'EuclidFlex-Regular.otf'
This font applying( android ) only when i set: fontFamily: 'EuclidFlex-Regular'
Whereas iOS works perfectly with real font name( i.e fontFamily: 'Euclid Flex' )

Charlynux · 2018-02-21T11:49:31Z

That's well explained in this article.
https://medium.com/react-native-training/react-native-custom-fonts-ccc9aacf9e5e

yasir-netlinks · 2018-03-04T10:57:54Z

Hi guys, I am looking for a way to make the title text bold when the tab is active! Any ideas, thanx

static navigationOptions = {
        title: 'Groups',  // how to set bold when active
        tabBarIcon: ({ focused }) => {
            let imageSource = focused
            ? require('../../../assets/iconGroupsSelected/iconGroupsSelected.png')
            : require('../../../assets/iconGroups/iconGroups.png')
            return <Image
                source={ imageSource }
            />
        },
    }

mlazari · 2018-04-23T07:02:38Z

@Charlynux Thank you for the hint. I was wondering why the font is working in other components, but not working in headerTitleStyle. I added fontWeight: undefined to headerTitleStyle and it's working now.

ivanfranchi · 2018-08-07T12:42:20Z

for One Plus 5t I got it working with
static navigationOptions = { title: 'Title', headerTitleStyle: { fontFamily: 'Roboto', } }
Default font was truncating no matter the length of the title text

pascaloliv · 2018-11-14T11:33:18Z

@Charlynux Thank you for the hint. I was wondering why the font is working in other components, but not working in headerTitleStyle. I added fontWeight: undefined to headerTitleStyle and it's working now.

⬆️ See above @mlazari answer ⬆️

This portion of code wasn't working. ❌

{
  color: 'white',
  fontFamily: 'Montserrat-Bold',
  fontSize: 16,
}

When I added fontWeight: undefined , it worked very well. ✅

{
  color: 'white',
  fontFamily: 'Montserrat-Bold',
  fontSize: 16,
+  fontWeight: undefined,
}

It looks like a bug, or at least a weird font behaviour.

steniowagner · 2019-01-21T19:03:30Z

Wow! That so weird...

fontWeight: undefined works like a charm!

Thank you @pascaloliv @Charlynux and @mlazari!

Kalpeshsuthar · 2019-02-01T09:37:24Z

@Charlynux Thank you for the hint. I was wondering why the font is working in other components, but not working in headerTitleStyle. I added fontWeight: undefined to headerTitleStyle and it's working now.

⬆️ See above @mlazari answer ⬆️

This portion of code wasn't working. ❌
{
  color: 'white',
  fontFamily: 'Montserrat-Bold',
  fontSize: 16,
}
When I added fontWeight: undefined , it worked very well. ✅
{
  color: 'white',
  fontFamily: 'Montserrat-Bold',
  fontSize: 16,
+  fontWeight: undefined,
}

It looks like a bug, or at least a weird font behaviour.

it's really working but really and surprised also that why font weight is required.

mlazari · 2019-02-01T10:10:49Z

@Kalpeshsuthar I guess it's what @thotegowda said above.

kpratik2015 · 2019-04-12T14:00:54Z

I have also faced this problem. The main problem seems to be in react-native rather than react-navigation.

HeaderTitle.js sets fontWeight as fontWeight: Platform.OS === 'ios' ? '600' : '500',

When fontWeight is set to >=500, react-native expects bold variation of custom font (naming convention CustomFont_bold.ttf) to be present. If it fails find bold variation of custom font, it falls back to default font family instead of custom font family with regular font.

In this case, app is setting fontFamily to custom font and HeaderTitle.js is hardcoding fontWeight to 500, so custom font will never reflect.
Quick fix would be have fontWeight: "200" in your header.titleStyle of your navigationOptions. or keep bold variation of your custom font

I'm planning to raise PR in react-native project to fix it by falling back to regular variation of custom font instead default family bold font.

But if you feel, HeaderTitle.js should always read fontWeight from header.titleStyle. Let me know, happy to raise a PR.

Thanks man, you helped me

ridmal · 2019-09-30T10:22:52Z

@thotegowda Thanks , you saved me. :)

SaphiraNgocThuy · 2019-10-07T03:25:07Z

If your fontFamily doesn't on Android for "headerTitleStyle" or "labelStyle", check weights managed by your font.

Just discover after some research that Android use a default font, if requested font doesn't have the requested fontWeight. (iOS seems to ignore fontWeight in this case.)
Both HeaderTitle and DrawerNavigatorItems define fontWeight (respectively 500 and bold).

My workaround is to define a font weight present in my TTF file in "headerTitleStyle" and "labelStyle".
labelStyle: {
  fontWeight: "normal",
  fontFamily: "Chalet-NewYorkNineteenSeventy"
}
Hope this could help someone.

Cool!! Big thankssss!!

RemyMachado · 2021-10-05T09:34:35Z

Is there a way to change it for all headers once. Using the theme for instance? The documentation is really poor in this regard.

github-actions · 2021-10-05T09:34:49Z

Hey! This issue is closed and isn't watched by the core team. You are welcome to discuss the issue with others in this thread, but if you think this issue is still valid and needs to be tracked, please open a new issue with a repro.

grabbou closed this as completed Mar 2, 2017

kenchangh mentioned this issue Apr 22, 2017

Header fontFamily not respected on Android #1080

Closed

rajsuvariya mentioned this issue Jul 25, 2017

Styling the NavBar aksonov/react-native-router-flux#47

Closed

aksonov mentioned this issue Jun 6, 2018

[dev] Upgrade RNRF to React Navigation v1 hippware/rn-chat#1874

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Is there any way to change header's font ? #542

Is there any way to change header's font ? #542

yeknava commented Mar 2, 2017

grabbou commented Mar 2, 2017

yeknava commented Mar 2, 2017

ghost commented Mar 2, 2017

grabbou commented Mar 2, 2017

thotegowda commented Mar 2, 2017 •

edited

allpwrfulroot commented Mar 13, 2017

kamalk333 commented Mar 23, 2017

airguide commented May 2, 2017

WilliamIPark commented Aug 29, 2017

aroth commented Sep 19, 2017

anceque commented Oct 2, 2017

Charlynux commented Nov 17, 2017

pallavbakshi commented Jan 14, 2018 •

edited

mastersam92 commented Feb 21, 2018

Charlynux commented Feb 21, 2018

yasir-netlinks commented Mar 4, 2018

mlazari commented Apr 23, 2018

ivanfranchi commented Aug 7, 2018

pascaloliv commented Nov 14, 2018 •

edited

steniowagner commented Jan 21, 2019

Kalpeshsuthar commented Feb 1, 2019

mlazari commented Feb 1, 2019

kpratik2015 commented Apr 12, 2019

ridmal commented Sep 30, 2019

SaphiraNgocThuy commented Oct 7, 2019

RemyMachado commented Oct 5, 2021

github-actions bot commented Oct 5, 2021

Is there any way to change header's font ? #542

Is there any way to change header's font ? #542

Comments

yeknava commented Mar 2, 2017

grabbou commented Mar 2, 2017

yeknava commented Mar 2, 2017

ghost commented Mar 2, 2017

grabbou commented Mar 2, 2017

thotegowda commented Mar 2, 2017 • edited

allpwrfulroot commented Mar 13, 2017

kamalk333 commented Mar 23, 2017

airguide commented May 2, 2017

WilliamIPark commented Aug 29, 2017

aroth commented Sep 19, 2017

anceque commented Oct 2, 2017

Charlynux commented Nov 17, 2017

pallavbakshi commented Jan 14, 2018 • edited

mastersam92 commented Feb 21, 2018

Charlynux commented Feb 21, 2018

yasir-netlinks commented Mar 4, 2018

mlazari commented Apr 23, 2018

ivanfranchi commented Aug 7, 2018

pascaloliv commented Nov 14, 2018 • edited

steniowagner commented Jan 21, 2019

Kalpeshsuthar commented Feb 1, 2019

mlazari commented Feb 1, 2019

kpratik2015 commented Apr 12, 2019

ridmal commented Sep 30, 2019

SaphiraNgocThuy commented Oct 7, 2019

RemyMachado commented Oct 5, 2021

github-actions bot commented Oct 5, 2021

thotegowda commented Mar 2, 2017 •

edited

pallavbakshi commented Jan 14, 2018 •

edited

pascaloliv commented Nov 14, 2018 •

edited