question-mark
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.

Heading (H1, H2, H3, ...) doesn't apply the custom fontWeight property

See original GitHub issue

I use customFont and try to change the default fontWeight for each heading within the theme, but it is not applied.

This is an example with <H1> and <Text variant="h1"> :

  • theme: image

  • code: image

  • app: image

Only <Text> has the correct fontWeight

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:5 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
levic92commented, Apr 22, 2022

Here is another solution that is working for me. Setting the fontWeight to normal in the style prop:

<H1 style={{fontWeight: "normal"}}>Title</H1>

Edit: this was when using a custom font., so maybe slightly unrelated from the OPs issue. I was using the fontWeight property in the theme to use a custom font and on Android it was not using that font unless I did this.

Edit2: Realized the original posts looks to be using multiple fonts and does set a custom font. I have verified that setting the style prop also works in this situation

0reactions
nandorojocommented, Sep 15, 2022

I think I’m going to close this since it’s an issue with @expo/html-elements. Or maybe we apply that style under the hood as @levic92 mentioned.

Read more comments on GitHub >

github_iconTop Results From Across the Web

css - Bold font in h1, h2, h3 titles - 92590 - Stack Overflow
It's probably good to mention that many fonts out there do not support all 9 distinct weight values. For font-weight: bold; , that...
Read more >
font-weight - CSS: Cascading Style Sheets - MDN Web Docs
The font-weight CSS property sets the weight (or boldness) of the font. The weights available depend on the font-family that is currently ...
Read more >
Topic: changing h1, h2 and h3 font size and color - Themeco
Hi there,. Please change font family and color under Customize -> Heading. To change color of social icons you need CSS. Please provide...
Read more >
How To Load and Use Custom Fonts with CSS | DigitalOcean
Next, the h3 is set to the same font-weight and a slightly smaller font-size as the h2 , but gains an added font-style...
Read more >
Using CSS Custom Properties to Adjust Variable Font Weights ...
Since variable fonts enjoy wide browser support, we can use them to help ... strong, b, th, h1, h2, h3, h4, h5, h6...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found