Font-face simplification

[Anahkiasen]

The current font-face syntax is the following :

@include font-face(
    'My Font',
    font-files(
        "myfont.woff",
        "myfont.ttf",
        "myfont.otf",
        "myfont.svgz#Regular", svg,
        "myfont.svg#Regular", svg),
        'myfont.eot',
normal,
normal)

Needless to say, that is a very complex and fat syntax for the simple task to link a font name to its file. And in a time where @webfont are more and more recurring, shouldn't there be a way to offer a simpler syntax ? I mean in 99% of the cases apart from the extension, all the names in the font-files() directive will be the same. Can't something like this be done ?

@include font-face-short('FontName', 'FontFileName', 'woff ttf otf', 400)

Where the third argument is a list of type to go into font-files() using the second argument as a variable ? Like #{$font-file}.#{$type} ? I don't know, there must be another simpler approach, but I really think the base syntax is too bloated for most people's needs.

[mirisuzanne]

I agree. While we're simplifying, though, why not remove the types altogether?

@include font-face($font-name, $file-name, $weight, $style);

Can't we check the given $font-name location, and simply use all the available fonts by that name, determining file type based on extensions?

[Anahkiasen]

Well I thought about that but wasn't sure that was actually possible, but yeah best-case scenario would be that.

[chriseppstein]

@ericam I agree that we need a font-face mixin that is easier to use and adds more value than the current one. Reading fonts from the filesystem based on a naming convention feels like a pretty awesome API. Can you outline a naming/organizational scheme that would enable this?

[mirisuzanne]

I'm on it.

[mirisuzanne]

Here's a first draft: https://gist.github.com/2869914

What am I missing?

[Anahkiasen]

Looks perfect to me !

[MoOx]

I see I've done something similar here https://github.com/MoOx/compass-recipes/blob/master/stylesheets/recipes/_font.scss What do you think about that ? Maybe we can add a filesystem check before including each version ?

[mirisuzanne]

A filesystem check is a good idea, so we're only loading fonts that exist.

I like what you have, but your approach is too font-squirrel specific to make sense in the compass core, and the split of directory/name/suffix/id seems overly divided to me. My recommendation simplifies all that into only two arguments (compared to four) without missing any important use cases that I can see. What am I missing?

[MoOx]

It's a good idea. My mixin was exactly for fontsquirrel package (I'll keep it like this). We have just to warn user for the thing about the svg font-id (maybe as an optional third parameter ?)

[mirisuzanne]

Ah yes. We could either add it as it's own argument:

@mixin font-face(
  $name, 
  $location: $name, 
  $weight: normal, 
  $style: normal,
  $id: $name
) {
  // ... the magic ...
}

or as part of an existing argument that can be parsed as a list:

// simple options result in $name == MyFont and $id == #MyFont
$name : MyFont;
$name : #MyFont;

// complex option
$name : MyFont #fontid;

I see advantages either way.

[chriseppstein]

Much better. I've never actually used our current version as it doesn't seem to add enough value over the standard syntax.

[mirisuzanne]

Is there more I can do to make this happen? Some of it has to happen in Ruby (out of my expertise), but I can work on the Sass end. Which comes first?

[MoOx]

I'll try to work on this next week.

Max

(Sent from my phone)

On 22 août 2012, at 00:46, Eric Meyer notifications@github.com wrote:

Is there more I can do to make this happen? Some of it has to happen in Ruby (out of my expertise), but I can work on the Sass end. Which comes first?

— Reply to this email directly or view it on GitHub.

[mirisuzanne]

I updated the gist to reflect svg ids and inline font options:

https://gist.github.com/2869914

There could also be an inline-font-face() shortcut mixin if that seems helpful. It really only cuts out a single argument.

[MoOx]

What you have written is perfect. I'll just add an automatic thing: If there is no folder specified, the code should test two paths: fonts_dir/font.* or fonts_dir/font/font. Because if you like to keep things organised in folders, you will probably like to put all font.\ format in the same nested folder (with the same name of the file I guess)

[mirisuzanne]

That's a great idea. If you do name the sub-directories something different, that case is covered by $location.

[MoOx]

Orrrrrr maybe we just can try to find recursively in every folders in fonts_dir/*. This is not so complicated to code. But manual location should be possible if the filename is different.

[MoOx]

I'm starting on this one.

[MoOx]

FYI, I'm on this again since yesterday (currently writing tests). What do you think about the sass part https://gist.github.com/4243845 ?

(edit: sorry for the spam... github seems to have issue when I post my comment)

[MoOx]

@chriseppstein Ping me if you are interested to see that when you have some times. I'm stuck with some Ruby issues that are beyond my Ruby knowledge & googling didn't help me. The feature it self should be 99% done (+ tests written) but tests didn't pass since I've hard time to make some things reusable (module/extend that didn't work "as expected"...) .