CODEWITHSUNDEEP
htmlcssfontstextarea
Art Taylor
Art Taylor

Reputation: 492

lighter font not working in textarea

I've been looking around and can't seem to find a definitive answer to this.

How do I get font weights lighter than 600 to show correctly for textarea fonts?

Fiddle: http://jsfiddle.net/bk53K/

Code: 

<textarea rows="7" class="randomText">Never gonna give you up Never gonna let you down Never gonna run around and desert you Never gonna make you cry Never gonna say goodbye Never gonna tell a lie and hurt you


textarea {
    border: none;
    resize: none;
    font-size: 30px;
    font-weight: 100;
}

Upvotes: 0

Views: 338

Answers (3)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201508

You get font weights lighter than 600 (or lighter than 700 for that matter) by declaring a font that has a typeface with such a weight. Most fonts that people normally use on web pages don’t have such typefaces. In your case, no font is declared, so browsers will use their default font for textarea, normally whatever the generic name monospace maps to. It is virtually certain that it does not have any weight smaller than normal (700).

The practical way to get lighter font weights is to use suitable Google fonts. Most Google fonts have just normal and bold, but some have other weights too. The weight 100 is very rare, though.

If you wish to use a light monospace font for textarea, you might consider Source Code Pro, which is a simple sans-serif monospace font with weights 200, 300, 400, 500, 600, 700, and 900. Example:

<link rel='stylesheet' href=
  'http://fonts.googleapis.com/css?family=Source+Code+Pro:300'>
<style>
textarea {
  font-family: Source Code Pro;
  font-weight: 300;
}
</style>
<textarea>Hello world</textarea>

Upvotes: 1

Amy Leaman
Amy Leaman

Reputation: 318

Here's a great article about font-smoothing that might do the trick. I find using -webkit-font-smoothing: antialiased; brings my fonts much closer to their desktop weights than without.

Upvotes: 0

j08691
j08691

Reputation: 207861

Not all fonts are available in all weights. As the MDN states:

The font-weight CSS property specifies the weight or boldness of the font. However, some fonts are not available in all weights; some are available only on normal and bold. Numeric font weights for fonts that provide more than just normal and bold. If the exact weight given is unavailable, then 600-900 use the closest available darker weight (or, if there is none, the closest available lighter weight), and 100-500 use the closest available lighter weight (or, if there is none, the closest available darker weight). This means that for fonts that provide only normal and bold, 100-500 are normal, and 600-900 are bold.

Behavior will also vary by browser, font, and client OS.

Upvotes: 7

Related Questions