Options for font source imports

[stacyk]

What is the best way to include fonts from a CDN, like Google? Or Typekit?

Currently, I think this is set up to expect font files within the project on the same server. Would be nice to clearly document other ways to import/include font files, if possible.

If it doesn't work well with these other options, can we create this feature? If not, can we state this within the readme and/or in the file in which we import the source?

[mirisuzanne]

@stacyk working on a solution for this, to set up fonts on OddSite. How does this syntax look? or do you have another idea?

// set variant path to 'false' to stop import.
$font: (
  'my-font': {
    'normal': 'my/local/font-path', // will be imported
    'italic': false, // will not be imported
  }
);

The goal is that we still list the available variants (italic, bold, etc) for Herman, but the system doesn't try to import those variants.

[davisagli]

Would it make any sense to handle an absolute URI here? Or do these services vary too much in how they handle importing fonts?

[mirisuzanne]

We should handle absolute URI's for anyone serving their own fonts that way, but that's not how the big CDN services work. They all use JS to inject the font directly in the html — so we don't want the CSS to do anything in those cases.

[stacyk]

Google puts all of them in one string instead of separate paths for different fonts/weights.

@import url('https://fonts.googleapis.com/css?family=Cabin+Condensed:700|Merriweather|Open+Sans+Condensed:400,700|Roboto+Condensed:400,700');

or if you want to do it in html, you can use something like this:

<link href="https://fonts.googleapis.com/css?family=Lato:300,300i,400|Open+Sans:400,700|Slabo+27px" rel="stylesheet">