0
votes

I have written a web application which uses the yaml css framework. One of the lines in the yaml css file is....

@import url(http://fonts.googleapis.com/css?family=Droid+Serif:400,400italic,700|Droid+Sans:700);

The internet is very slow at my company and I want to replace that download with a local copy of the font.

To try to achieve this I went to http://www.google.com/fonts, downloaded the DroidSans and DroidSerif fonts. The files I get are...

  • fonts.DroidSerif-Italic.ttf
  • fonts/DroidSerif-BoldItalic.ttf
  • fonts/DroidSerif-Bold.ttf
  • fonts/DroidSerif.ttf
  • fonts.DroidSans.ttf
  • fonts/DroidSans-Bold.ttf

I then went to http://www.fontsquirrel.com/tools/webfont-generator and created 1 font kit for all my DroidSerif fonts and 1 font kit for all my DroidSans fonts.

I am a bit stuck now though because having a look at the demos in the generated font kits they have given a different font-face declaration per ttf file. In other words I have a number of font-face declarations...

@font-face {font-family: 'droid_serifbold'; ...
@font-face {font-family: 'droid_serifitalic'; ...
@font-face {font-family: 'droid_serifbold_italic'; ...
@font-face {font-family: 'droid_serifregular'; ...
...and same for droid sans...

But the yaml CSS framework doesn't use the fonts that way. Instead they have one definition of the font and then specify different font-weights...

  body {
    font-family: "Droid Serif", Georgia, "Times New Roman", Times, serif;
    ...
  }

  h6 {
    font-family: "Droid Sans", Arial, Helvetica, sans-serif;
    font-weight: 400;

  q {
    font-family: "Droid Serif", Georgia, "Times New Roman", Times, serif;
    font-style: italic;

  b {
     font-weight: bold;

I would rather not change the yaml css as I might muck it up. My question is how can I change the font-face declarations provided to me from the font squirrel font kit to match the font-weight style my css is using?

thanks

1
You would have to combine all the font faces into a single font file and generate the webfonts from that file. - user13286

1 Answers

1
votes

If you go to the site you had in the first place: Google Fonts, and take a look at the generated code,

you can realize you need to:


Download these 4 files:


Rename all appropriately and place in the fonts folder:

  • fonts/DroidSans-Bold.woff

  • fonts/DroidSerif.woff

  • fonts/DroidSerif-Bold.woff

  • fonts/DroidSerif-Italic.woff


And then use this code:

@font-face {
  font-family: 'Droid Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Droid Sans Bold'), local('DroidSans-Bold'), url('fonts/DroidSans-Bold.woff') format('woff');
}
@font-face {
  font-family: 'Droid Serif';
  font-style: normal;
  font-weight: 400;
  src: local('Droid Serif'), local('DroidSerif'), url('fonts/DroidSerif.woff') format('woff');
}
@font-face {
  font-family: 'Droid Serif';
  font-style: normal;
  font-weight: 700;
  src: local('Droid Serif Bold'), local('DroidSerif-Bold'), url('fonts/DroidSerif-Bold.woff') format('woff');
}
@font-face {
  font-family: 'Droid Serif';
  font-style: italic;
  font-weight: 400;
  src: local('Droid Serif Italic'), local('DroidSerif-Italic'), url('fonts/DroidSerif-Italic.woff') format('woff');
}