Web Safe Font Weights -- How to get thinner?
You are right, it is a difference in rendering. How the text renders depends on your OS, your settings, and your browser (Safari, for example, renders bolder than IE). So there is no way to make this rendering match your photoshop comp.
A bit more info here:
Browser Choice vs Font Rendering | Phinney on Fonts
CSS very thin font?
Google is using their font API and CSS's @font-face
See the following reference in their code:
<link href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&subset=latin" rel="stylesheet">
Below is the exact definition that "registers" said font:
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url('http://themes.googleusercontent.com/static/fonts/opensans/v5/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff') format('woff');
}
Then they simply apply that font to element/s:
h1, h2, h3, h4, blockquote, q, .maia-nav ul {
font-family: 'open sans',arial,sans-serif;
}
Note: @font-face
fonts don't render crisply on downlevel browsers. If you need to support them try - http://cufon.shoqolate.com/
font-weight is not working properly?
Its because the font size (9px) is too small to display bold. Try 11px or more and it works fine.
Roboto 'Thin' with Google Fonts
thin
is not a valid keyword for font-weight
. According to Google Fonts (when you select "Roboto" and then look at the "customize" list of weights) Thin corresponds to a weight of 100
Specifying Style and Weight for Google Fonts
They use regular CSS.
Just use your regular font family like this:
font-family: 'Open Sans', sans-serif;
Now you decide what "weight" the font should have by adding
for semi-bold
font-weight:600;
for bold (700)
font-weight:bold;
for extra bold (800)
font-weight:800;
Like this its fallback proof, so if the google font should "fail" your backup font Arial/Helvetica(Sans-serif) use the same weight as the google font.
Pretty smart :-)
Note that the different font weights have to be specifically imported via the link tag url (family query param of the google font url) in the header.
For example the following link will include both weights 400 and 700:
<link href='fonts.googleapis.com/css?family=Comfortaa:400,700'; rel='stylesheet' type='text/css'>
For CSS2
<link href='fonts.googleapis.com/css2?family=Comfortaa:wght@400;700'; rel='stylesheet' type='text/css'>
Related Topics
Difference Between Firefox and Chrome Padding
How to Apply CSS to a MAC Chrome Select Box
How to Horizontally Center an Item in Mui Grid Item
Separate Sentence to One Word Per Line
How to Add a Svg as Content on: Before Pseudo Element of an Element
Background Color in Tabsetpanel in Shiny
How to Use CSS? (Not *Learn* But Really *Use*)
What Does The & Mean in an SCSS Selector
Is There a Reason to Use Uppercase Letters for Hexadecimal CSS Color Values
Remove All Borders on a Specific Datatable
Add Delayed Time in CSS3 Animation