Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

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

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.