I seek a web font with the full range of font-weights (ie. 100, 200, 300... 900).
All the fonts I have tried seem to support just two font-weights: normal and bold. If I try the numerical values I get the normal font-weight for 100-500, and the bold font-weight for 600-900.
More info on font-weights is given on the Mozilla documentation page.
I am aware of Google fonts, but I see no way to limit results to the fonts I'm interested in.
If anyone can tell me of even one font that has more than two font-weights, that would be helpful.
I tried Helvetica Neue, as recommended in an answer to this question, but I saw only two font-weights.
My browser is Firefox 26.
After playing around more with the Google Fonts site, I found the Sorting option at the top, which allows sorting by 'Number of styles'. There are many fonts that support a range of font-weights. The first returned was Exo.
I couldn't get the fonts with numerical font-weight working locally until I figured out that @font-face CSS rules were necessary. Here is the minimal code required to demonstrate the full range of font-weights for the Exo font.
<!DOCTYPE html>
<html>
<head>
<title>Exo Font Weights Demo</title>
<style>
@font-face {font-family: 'Exo'; font-style: normal; font-weight: 100; src: url(http://themes.googleusercontent.com/static/fonts/exo/v2/LOvrl2pqswCkT8i3Cr0n-A.woff) format('woff');}
@font-face {font-family: 'Exo'; font-style: normal; font-weight: 200; src: url(http://themes.googleusercontent.com/static/fonts/exo/v2/6QiS59P8BsX03DD46j0MBA.woff) format('woff');}
@font-face {font-family: 'Exo'; font-style: normal; font-weight: 300; src: url(http://themes.googleusercontent.com/static/fonts/exo/v2/4KZbxe9r2TXLhWnvIEYFtg.woff) format('woff');}
@font-face {font-family: 'Exo'; font-style: normal; font-weight: 400; src: url(http://themes.googleusercontent.com/static/fonts/exo/v2/ciAJ5J-gAMQ5PmKP3W3-DQ.woff) format('woff');}
@font-face {font-family: 'Exo'; font-style: normal; font-weight: 500; src: url(http://themes.googleusercontent.com/static/fonts/exo/v2/P68xbqSRbv2P2Y1Gn89_Sw.woff) format('woff');}
@font-face {font-family: 'Exo'; font-style: normal; font-weight: 600; src: url(http://themes.googleusercontent.com/static/fonts/exo/v2/81Bt2ny37U7oEhl3JhWo7g.woff) format('woff');}
@font-face {font-family: 'Exo'; font-style: normal; font-weight: 700; src: url(http://themes.googleusercontent.com/static/fonts/exo/v2/XImhdIFxStwHS9PAgE4VpA.woff) format('woff');}
@font-face {font-family: 'Exo'; font-style: normal; font-weight: 800; src: url(http://themes.googleusercontent.com/static/fonts/exo/v2/8F32bA5gdXrOnEJkKVwXsA.woff) format('woff');}
@font-face {font-family: 'Exo'; font-style: normal; font-weight: 900; src: url(http://themes.googleusercontent.com/static/fonts/exo/v2/vRBeganESUK4UFluFjuHcQ.woff) format('woff');}
.Exo-normal-100 {font-family: 'Exo'; font-style: normal; font-weight: 100;}
.Exo-normal-200 {font-family: 'Exo'; font-style: normal; font-weight: 200;}
.Exo-normal-300 {font-family: 'Exo'; font-style: normal; font-weight: 300;}
.Exo-normal-400 {font-family: 'Exo'; font-style: normal; font-weight: 400;}
.Exo-normal-500 {font-family: 'Exo'; font-style: normal; font-weight: 500;}
.Exo-normal-600 {font-family: 'Exo'; font-style: normal; font-weight: 600;}
.Exo-normal-700 {font-family: 'Exo'; font-style: normal; font-weight: 700;}
.Exo-normal-800 {font-family: 'Exo'; font-style: normal; font-weight: 800;}
.Exo-normal-900 {font-family: 'Exo'; font-style: normal; font-weight: 900;}
</style>
</head>
<body>
<p class="Exo-normal-100">Grumpy wizards make toxic brew for the evil Queen</p>
<p class="Exo-normal-200">Grumpy wizards make toxic brew for the evil Queen</p>
<p class="Exo-normal-300">Grumpy wizards make toxic brew for the evil Queen</p>
<p class="Exo-normal-400">Grumpy wizards make toxic brew for the evil Queen</p>
<p class="Exo-normal-500">Grumpy wizards make toxic brew for the evil Queen</p>
<p class="Exo-normal-600">Grumpy wizards make toxic brew for the evil Queen</p>
<p class="Exo-normal-700">Grumpy wizards make toxic brew for the evil Queen</p>
<p class="Exo-normal-800">Grumpy wizards make toxic brew for the evil Queen</p>
<p class="Exo-normal-900">Grumpy wizards make toxic brew for the evil Queen</p>
</body>
</html>
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments