search

belluzj / fantasque-sans

A font family with a great monospaced variant for programmers.
http://openfontlibrary.org/en/font/fantasque-sans-mono
SIL Open Font License 1.1
7.05k stars 155 forks source link

New font-family defined for each variant #26

Closed rileyjshaw closed 10 years ago

rileyjshaw commented 10 years ago

validate-generate.sh currently creates the following css rules:

@font-face {
    font-family: 'FantasqueSansMono-RegItalic';
    src: url('FantasqueSansMono-RegItalic.eot'); /* IE 9 Compatibility Mode */
    src: url('FantasqueSansMono-RegItalic.eot?#iefix') format('embedded-opentype'), /* IE < 9 */
         url('FantasqueSansMono-RegItalic.woff') format('woff'), /* Firefox >= 3.6, any other modern browser */
         url('FantasqueSansMono-RegItalic.ttf') format('truetype'), /* Safari, Android, iOS */
         url('FantasqueSansMono-RegItalic.svg#FantasqueSansMono-RegItalic') format('svg'); /* Chrome < 4, Legacy iOS */
}

@font-face {
    font-family: 'FantasqueSansMono-Regular';
    src: url('FantasqueSansMono-Regular.eot'); /* IE 9 Compatibility Mode */
    src: url('FantasqueSansMono-Regular.eot?#iefix') format('embedded-opentype'), /* IE < 9 */
         url('FantasqueSansMono-Regular.woff') format('woff'), /* Firefox >= 3.6, any other modern browser */
         url('FantasqueSansMono-Regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('FantasqueSansMono-Regular.svg#FantasqueSansMono-Regular') format('svg'); /* Chrome < 4, Legacy iOS */
}

// ...etc.

This means that when assigning fonts, style and weight are determined by the font-family name. A cleaner pattern is the following:

@font-face {
    font-family: 'FantasqueSansMono';
    src: url('FantasqueSansMono-RegItalic.eot'); /* IE 9 Compatibility Mode */
    src: url('FantasqueSansMono-RegItalic.eot?#iefix') format('embedded-opentype'), /* IE < 9 */
         url('FantasqueSansMono-RegItalic.woff') format('woff'), /* Firefox >= 3.6, any other modern browser */
         url('FantasqueSansMono-RegItalic.ttf') format('truetype'), /* Safari, Android, iOS */
         url('FantasqueSansMono-RegItalic.svg#FantasqueSansMono-RegItalic') format('svg'); /* Chrome < 4, Legacy iOS */
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'FantasqueSansMono';
    src: url('FantasqueSansMono-Regular.eot'); /* IE 9 Compatibility Mode */
    src: url('FantasqueSansMono-Regular.eot?#iefix') format('embedded-opentype'), /* IE < 9 */
         url('FantasqueSansMono-Regular.woff') format('woff'), /* Firefox >= 3.6, any other modern browser */
         url('FantasqueSansMono-Regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('FantasqueSansMono-Regular.svg#FantasqueSansMono-Regular') format('svg'); /* Chrome < 4, Legacy iOS */
    font-weight: normal;
    font-style: normal;
}
// ...etc.

This way a general font-family: 'FantastiqueSansMono' rule can be used and font-weight and font-style will work as expected.

rileyjshaw commented 10 years ago

Awesome!! Thanks :)

belluzj commented 10 years ago

You're welcome! Here is the resulting file: https://gist.github.com/belluzj/9454852