The process is easy once understood but understanding is the hard part. Create a text file or documentation on d.o that shows how the info file should be created.

Comments

Anonymous’s picture

Anonymous (not verified) commented

Yeah, I agree. I'm using 7.x. I would add this to the .css for the google example, and to documentation in general. Taken from http://code.google.com/apis/webfonts/docs/webfont_loader.html#Styles

/* You can adjust how things look during and after font loading by defining CSS
 * rules for three specific class names, wf-loading, wf-inactive and wf-active. 
 *
 * Show paragraphs in serif font until fonts have loaded.
 * .wf-loading p {
 *    font-family: serif;
 * }
 *
 * Show paragraphs in serif font if fonts have failed to load.
 * .wf-inactive p {
 *    font-family: serif;
 * }
 *
 * Show paragraphs in Tangerine when the fonts have loaded.
 * .wf-active p {
 *   font-family: 'Tangerine', serif;
 * }
 *
 * Show heading in serif font until fonts have loaded.
 * .wf-loading h1 {
 *   font-family: serif;
 *   font-size: 16px
 * }
 *
 * Show heading in serif font if fonts have failed to load.
 * .wf-inactive h1 {
 *   font-family: serif;
 *   font-size: 16px
 * }
 *
 * Show heading in Cantarell when the fonts have loaded.
 * .wf-active h1 {
 *   font-family: 'Cantarell', serif;
 *   font-size: 16px
 * }
 */
btmash’s picture

btmash commented

Thanks for this, Mtro! Also, documentation made its way over to the latest dev releases - would you be able to provide me with some feedback on that documentation? It would be very helpful in setting up a doc page for it.

Anonymous’s picture

Anonymous (not verified) commented

yeah, I'll check it out.

Vc Developer’s picture

Vc Developer commented

How do you get your custom font to show up in the list? I went to http://www.fontsquirrel.com/fontface/generator to generate the files, created a folder \google_webfont_loader_api\fonts\palaoe and:

palaoe.info:
name = "Paleo Bora Hebrew"
custom_families[] = PaleoBoraRegular
custom_style_css[] = stylesheet.css

stylesheet.css:
@font-face {
font-family: 'PaleoBoraRegular';
src: url('pab_____-webfont.eot?') format('eot'),
url('pab_____-webfont.woff') format('woff'),
url('pab_____-webfont.ttf') format('truetype'),
url('pab_____-webfont.svg#webfont0Go134pl') format('svg');
font-weight: normal;
font-style: normal;

}

what else I need to do to make this successful?

Vc Developer’s picture

Vc Developer commented

Cancel that! I didn't have the correct .ext name. .fontinfo not .info

Vc Developer’s picture

Vc Developer commented

Question! How can you use more than one font at a time? For instance, I want to be able to show two different languages side by side.

btmash’s picture

btmash commented

Yes, the .fontinfo can be a bit trippy (its a little more performant and, though changing it would mean it could be in any .info file, changing it would be a not-so-fun change for anyone else currently using the module.)

I'm trying to understand what you mean by using more than one font. The fontinfo file can have multiple custom (or not-custom) fonts:

custom_families[] = PaleoBoraRegular
custom_families[] = AshokCoolFont
custom_style_css[] = myFont.css
custom_style_css[] = myOtherFont.css

You specify multiple families via adding more custom families and more custom font definitions by specifying other css files (or you can have one css file with @font-face definitions for both fonts - its flexible if you want to be able to reference different urls). And your render css could then go based off that.

Vc Developer’s picture

Vc Developer commented

Awh, I gotcha! Thanks!

And to be more precise about the side by side language is; I want to be able to show a Greek word next to a Hebrew. Now I can do this thanks to your clarification!

btmash’s picture

btmash commented

I'm going to mark this as fixed - looks like things are working.

btmash’s picture

btmash commented
Status: Active » Fixed

Whoops.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.