Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Darren Knight
Darren Knight
4,393 Points
Posted by Darren Knight
Darren Knight
4,393 Points

font-weight not working on mobile

I am setting the font-weight of some text to to be 'lighter' or '300' and it is showing up fine on desktop, but not on mobile. It seems to be showing as 'normal' on mobile (iOS). I am wanting to distinguish the first sentence from the rest of the text by setting the font-weight to 'normal'.

<style>
.light-text {
  font-weight: lighter;
}
</style>

<div class="light-text">
<span style="font-weight:normal;">The first sentence.</span> The rest of the text.
</div>

1 Answer

Scott Magdalein
Scott Magdalein
1,667 Points
Scott Magdalein
Scott Magdalein
1,667 Points

Hi there, there are some oddities about fonts rendering in different browsers. However, to be safe, make sure that your font actually provides the weights you're assigning. Some browsers will "guess" at the font-weight even if the font doesn't provide the actual weight you set. I hope that makes sense.