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