Hi, I’m not sure if this is the right place for this, but I can’t seem to find a webfonts specific forum anywhere. If there is one, please point me in the right direction!
But we are needing to integrate a family of fonts from Fonts.com’s webfonts service into a site. We have experience integrating fonts from FontsLive and TypeKit, but it looks like Fonts.com does not work the same and is not intuitive. Unfortunately, the font we need is ITC Avant Garde, and ITC is owned by Monotype, so we’re stuck with Fonts.com.
The main difference here is that it doesn’t appear that you can ‘group’ your font faces into a single font-family and then just add that to your font-stack, allowing the natural declarations for bold, italic and bold-italic to automatically use the proper font, as it does with any other font for years.
- So anyone with experience on how to get your bold, italic and bold-italic styles to work properly, while STILL allowing your fallback fonts to work right, could you give any tips???
For instance, it looks like I’ll have to specifically add a font-family declaration for any bold type used in the site to use the ‘Avant Garde Demi’ font face. But if I do that, and leave any default ‘font-weight:bold’ styling (even the default for heading tags - h1-h6), some browsers will apply a ‘faux’ bold to my already bold typeface. This doesn’t look right. However, if I manually add a declaration to make all bold type ‘font-weight:normal’, then anyone who ends up with the fallback font (say Arial) won’t see it properly.
I’m stumped here. ANYONE?!?!?
THANKS!
Hello, I’m typing from Fonts.com’s Web Fonts customer support. As a note, we do not currently have any forums of our own but we are looking into the idea.
Yesterday afternoon I spoke with a developer about this subject–perhaps it was you, but if it wasn’t or for any interested parties, the answer is that we unfortunately do not have this feature/ability integrated into our current service.
While I realize it is a bit more work, there is an alternative method that should allow the end result you’re aiming for: Google’s WebFont Loader API (with our service delivering fonts).
Essentially, Google has built an AJAX API that you can use with our service. Advantages include the ability to detect the status of font loads–the API dynamically styles the HTML tag of the page with different classes based on whether a font fails to load (inactive), is currently being loaded (loading), or has successfully loaded (active). You can then use some clever CSS rules to take advantage of these classes.
More information can be found on our blog post and [URL=“http://code.google.com/apis/webfonts/docs/webfont_loader.html”]Google’s [URL=“http://code.google.com/apis/webfonts/docs/webfont_loader.html#Specifying”]documentation.
OK, thanks. Yes, it was probably me you spoke with. We had just brushed over the Google option pretty quickly, so I didn’t realize how necessary it was.
I’ll explore using the Google WebFont Loader with this if that’s the only real way to make it work. But I have a couple questions about this:
-
Do I still need to include the default JS/CSS from Fonts.com in the head as well as the Google JS, or is that not necessary now (it just looks like your sample page includes the Fonts.com JS in addition to the Google JS)?
-
Does adding the Google API add any additional weight or lag to the delivery of the fonts (do they now have to go from your CDN through Google’s CDN on their way to our site)?
-
Does having our project ID clearly displayed in the code on the page pose any security risks (i.e., what’s to stop anyone else from using our ID to put our fonts on their site - increasing the apparent page count)??
Hopefully this won’t make it any slower. We also may use the Google API loader to import jQuery & MooTools, so maybe this could be grouped with that?!?
I still strongly feel you need to look into adapting the FontsLive’s implementation, which avoids all of this hassle, to remain popular with developers. Typekit works similarly, and also natively includes the Google functionality (separate inactive/load/active states).
Thanks for the help!
- No, you don’t have to do this manually. When specifying the Loader API’s configuration to use your Fonts.com Web Fonts project ID, the Loader API will automatically insert this into your page when viewed.
- I’m not 100% on how Google’s API works. From what I do understand, what happens is their Javascript dynamically inserts the same script tag we’d normally ask you to insert and monitors this script’s activity (and related files) so it can apply the dynamic CSS classes. If you notice, you will have to include an additional script from Google, however that’s hosted by ajax.googleapis.com which is presumably at least as fast as the CDN we use for our service.
- Your project ID is actually part of the script/link tag you’d normally have to include as well. However, your project is safe because only page views from domains you have specified in your project list will receive fonts and increase your page view total. If I was to include your project ID on my own site, because my domain is not in your project’s domain list, it would fail our validation and thus not receive your fonts and would not count toward your page views.
I actually spoke with some of the developers earlier today. From what I heard, they were considering this functionality when first creating the service but decided against it do to lack of proper support for iOS. However, this support has been added and they will now be looking at a way to integrate this functionality.
Great! Thanks for the help, we’ll give it a shot.
And that’s good news about your developers looking into this. Bummer to hear that Apple was behind the lack of implementing this before - Microsoft is usually the bane of all web developer’s lives…