Question

Does anyone know how to use the Font Squirrel @font-face kit generator, or something similar, to output a variant of a font, i.e. the bold variant?

I am using Gill Sans on my website and it is set to “font-weight: 900” or “font-weight: bold,” which looks great on my machine because it has the font installed. But if I just embed the font generated by Font Squirrel, I only get the “regular” variant and “bold” doesn’t display correctly.

Does anyone know of a way to embed the bold variant of a font?

There is only one file for Gill Sans, and when I upload it, here is what Font Squirrel gave me:

 @font-face {
      font-family: 'GillSansRegular';
      src: url('../fonts/gillsans-webfont.eot');
      src: local('☺'), url('../fonts/gillsans-webfont.woff') format('woff'), url('../fonts/gillsans-webfont.ttf') format('truetype'), url('../fonts/gillsans-webfont.svg#webfontDATch26L') format('svg');
 }

The original file no doubt contains the information for bold, italic, etc., but I’m wondering if Font Squirrel strips out the variants, leaving me with only the “regular” variant.

Even if I just add bold to everything it doesn’t show up bold anywhere:

 @font-face {
     font-family: 'GillSansBold';
     src: url('../fonts/gillsans-webfont.eot');
     src: local('☺'), url('../fonts/gillsans-webfont.woff') format('woff'), url('../fonts/gillsans-webfont.ttf') format('truetype'), url('../fonts/gillsans-webfont.svg#webfontDATch26L') format('svg');
     font-weight: bold;
 }

Nothing is bold even when I strip all font-familys and font-weights from anywhere else in my stylesheets. Everything just shows up as Gill Sans Regular.

Answer 1

I just received an email from Font Squirrel: the generator doesn’t split .dfont files in the current version, so that explains it.