Getting Different Figure Types with Google Web Fonts

How to use different kind of Google Font types?

You first have to load you font in the document's head and than use the font in conjunction with the right font-weight in your CSS.

PS: You got a little typo in your font URL.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Website</title>
  <link href="https://fonts.googleapis.com/css?family=Exo+2:300,400,600,900" rel="stylesheet">
  <link href="path/to/styles.css" rel="stylesheet">
</head>
<body>
  …
</body>
</html>

styles.css

.light {
  font-family: 'Exo 2';
  font-weight: 300;
}

.normal {
  font-family: 'Exo 2';
  font-weight: 400;
}

.semi-bold {
  font-family: 'Exo 2';
  font-weight: 600;
}

.black {
  font-family: 'Exo 2';
  font-weight: 900;
}

How can I sort fonts by category with the Google Webfonts API?

Short answer: get it from this gist

Longer answer: Here is a tiny scala program to do this. You'll need to checkout googlefontdirectory project from http://code.google.com/p/googlefontdirectory to use this and change the basePath in the program below:

import com.google.gson.GsonBuilder
import org.apache.commons.io.IOUtils
import java.io.FileInputStream
import collection.mutable
import collection.JavaConverters._

object Webfonts {
  private val basePath = new java.io.File("/path/to/googlefontdirectory")

  def main(args: Array[String]) {
    val fontDetailsList = mutable.ListBuffer.empty[FontDetails]
    val categoryMap = mutable.Map.empty[String, java.util.List[String]]

    val gson = new GsonBuilder().setPrettyPrinting().create()
    for (font <- FontsList.fonts ) {
      fontDetailsList += gson.fromJson(IOUtils.toString(new FileInputStream(new java.io.File(basePath, font))), classOf[FontDetails])
    }

    fontDetailsList.filter(_.subsets.contains("latin")).foreach((font) => {
      val a = categoryMap.getOrElseUpdate(font.category, new java.util.ArrayList[String]())
      a.add(font.name)
    })

    val json = gson.toJson(categoryMap.asJava)
    println(json)
  }

  case class FontDetails(name: String, license: String, category: String, size: Int, subsets: Array[String]) {
    override def toString = category + " : " + name
  }

}

object FontsList {
  val fonts = Array(
    "./apache/aclonica/METADATA.json",
    "./apache/calligraffitti/METADATA.json",
    "./apache/cherrycreamsoda/METADATA.json",
    "./ufl/ubuntucondensed/METADATA.json",
    "./ufl/ubuntumono/METADATA.json"

  )
}

You can get the complete FontsList at https://gist.github.com/4085914

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

Can you specify tabular lining figures for webfonts?

Simply, yes.

Presently you can use the attribute "font-feature-settings" in its prefixed forms and add "tnum" to the value list (example) to access tabular numerals in OpenType enabled fonts:

font-feature-settings: 'tnum';
-webkit-font-feature-settings: 'tnum';
-moz-font-feature-settings: 'tnum';

Check caniuse to see if the prefixed versions are still needed.

Note, if you are using Typekit to serve your webfonts, make sure to select "All Characters" under Language Support.

Get Raleway lining numerals for system font usage

You can use the Expert mode on http://www.fontsquirrel.com/tools/webfont-generator with OpenType flattening to generate a new font with lining numerals turned on.

Additionally, you could generate a font with the stylistic alts. This will give you a more modern, alternative W.

Disabling ligatures and text figures in Open Type Font

You need to use letter-spacing to 1px to achieve what you are looking for.

For instance, as per your code,

h1 {font-family: Raleway; font-size: 4rem;
    letter-spacing: 1px;
    text-rendering: optimizeSpeed;
    font-feature-settings: unset;
    font-variant: normal;
    }

Live demo

You can also check the Comparative demo here

For numeric figures, as mentioned by the OP, you can use font-feature-settings with the value lnum along with font-variant-numeric with the value normal.

For instance,

h1 {font-family: Raleway; font-size: 4rem; letter-spacing: 1px;

  text-rendering: optimizeSpeed;
  font-feature-settings: unset;
  font-variant: normal;
  font-variant-numeric: normal;
  font-feature-settings: 'lnum';

}

Comparative Live demo - For numeric figures

You can read more about the same on the below W3 guidelines.

W3 guidelines on font-variant-numeric