当前位置: 动力学知识库 > 问答 > 编程问答 >

css - Replacing google font url with generated font squirrel font kit

问题描述:

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

网友答案:

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:

  • Droid Sans Bold

  • Droid Serif

  • Droid Serif Bold

  • Droid Serif Italic


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');
}
分享给朋友:
您可能感兴趣的文章:
随机阅读: