Specifying Style and Weight for Google Fonts

 

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?

    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'>

    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;

    您可以使用Google字体中指定的体重值。 

    body{
 font-family: 'Heebo', sans-serif;
 font-weight: 100;
}
    链接地址: http://www.djcxy.com/p/65050.html

    上一篇: 延迟加载谷歌字体类型

    下一篇: 指定Google字体的样式和重量