Specifying Style and Weight for Google Fonts

Question

I am using Google fonts in a few of my pages and hit a wall when trying to use variations of a font  Example  http   www google com webfonts QuickUsePlace quickUse Family Open Sans  I am importing three faces  Normal  Bold  ExtraBold via the link tag  The normal face displays correctly  but I cannot figure out how to use the variants of the font in my CSS  I tried all of the following as attributes for font-family but no dice     Open Sans Bold   Open Sans 700   Open Sans Bold 700   Open Sans Bold    The google docs themselves do not offer much help  Anyone have an idea of how I should write my CSS rules to display these variants

User · Answer

font-family  Open Sans    sans-serif   For light  font-weight   100  Or font-weight   lighter   For normal  font-weight   500  Or font-weight   normal   For bold  font-weight   700  Or  font-weight   bold   For more bolder  font-weight   900  Or  font-weight   bolder

User · Answer

Here s the issue   You can t specify font weights that don t exist in the font set from Google   Click on the SEE SPECIMEN link below the font  then scroll down to the STYLES section  There you ll see each of the  quot styles quot  available for that particular font   Sadly Google doesn t list the CSS font weights for each style   Here s how the names map to CSS font weight numbers  Thin            100      Extra Light     200 Light           300 Regular         400 Medium          500 Semi-Bold       600 Bold            700 Extra-Bold      800 Black           900  Note that very few fonts come in all 9 weights

User · Answer

you can use the weight value specified in the Google Fonts   body   font-family   Heebo   sans-serif   font-weight  100

User · Answer

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    lt link href  fonts googleapis com css family Comfortaa 400 700   rel  stylesheet  type  text css  gt

[css] Specifying Style and Weight for Google Fonts

Examples related to css

Examples related to fonts