Posted by zigmoo on August 31, 2011 at 10:14pm
Hello All,
Thanks in advance for your help on this question:
What's the best way to add a typekit javascript include plus "try" line with Omega? (I'm an omega noob, obviously!)
Thus far, my subtheme is extremely clean, and I want to put it in the most efficient place possible.
The lines I normally have in my tag:
<script type="text/javascript" src="http://use.typekit.com/my_autogen_tk_file.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>Thanks,
moo
Comments
I have it in html.tpl.php
I have the code from Typekit in the html.tpl.php template file, at the bottom of the head. I'm using a sub-theme from the latest release of Omega's XHTML starterkit.
I've also placed font events styles just below it. If you don't know about using font events you can find lots of info on the Typekit site help section and the Typekit blog archives.
Thanks Arne, I'm following
Thanks Arne, I'm following your advice!
moo
Use the font-your-face module
Use the font-your-face module http://drupal.org/project/fontyourface
Ya, I've looked at
Ya, I've looked at font-your-face... but all I need to do is add two lines of code in the right place and I'm done!
I'm looking to use omega's features to do it, so shouldn't I be using the "preprocess" file "preprocess-html.inc"?
If so, what's the right syntax to add two lines to the section?
<script type="text/javascript" src="http://use.typekit.com/my_autogen_tk_file.js"></script><script type="text/javascript">try{Typekit.load();}catch(e){}</script>
Thanks,
moo
Font-your-face questions
Does the font-your-face module deal with FOUT, fallback font styling and so forth through font events? That would be helpful.
I've had success with Google
I've had success with Google Fonts. Or you could manually add your font to a CSS file.
Thanks for the tip! I'm
Thanks for the tip! I'm having fun playing with the Google Fonts!
Ultimately, I just copied omega's html.tpl.php to my sub theme's templates folder and put in the one line:
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:300,400,700|Open+Sans:300' rel='stylesheet' type='text/css'>I like typekit fine from previous use, and I think their system is well-constructed, but I'm definitely trying Google Fonts out for a while...
moo
Typekit
With Typekit, if you are using their service, it's a simple matter to just add the code (which they provide) in the head section. Pretty straight forward and no modules to keep updated and so forth. At least that's my preference. The simpler the better. It's great to see that others are using web fonts!
Will they let you download
Will they let you download the font?
I've always been a little afraid of not being able to reach the font server and the font not appearing at all.
I much prefer to add the font to my server and then implement it in the CSS. I actually don't use the Google Fonts module for that reason, opting instead to download the font.
No
No, not in the way I think you mean. With Typekit you are only buying rights to use the fonts they offer through their service, for as long as you are a subscriber. You can't download them. Although they do offer some fonts free through their open ended "Trial Offer" level, which is kind of cool, really.
But their lower cost services are pretty reasonable given they offer a lot of fonts and are constantly adding more. Plus they offer customer support, have an easy to use kit editor where you can get code examples and so forth. If I had the money I'd probably go ahead and directly purchase the web fonts from FontShop (or whomever) I knew I would want to keep using and then either use Typekit's free service with them or use the font-your-face module or something.
...
...
The best way of doing
The best way of doing Javascript with Drupal is to add it to the Javascript queue. With Omega, create a preprocess/preprocess-html.inc file in your theme, then
function ppc_alpha_preprocess_html(&$vars) {drupal_add_js('http://use.typekit.com/typekit_id.js');
drupal_add_js('try{Typekit.load();}catch(e){}', array('type' => 'inline'));
}
about drupal_add_js
Also remember that within Typekit you need to add the local server name that you're developing on if you're doing that.
My preferred method
I know this is an old thread, but thought someone mind find this info helpful.
At typekit, you can "view advanced" code and it will give you the full javascript (which is very small).
You can then create a javascript file, save it in your javascript folder in your sub-theme as something like typekit.js
Then add the following lines to the Omega sub theme, [subtheme_name].info file such as...
libraries[typekit][name] = Typekit link.
libraries[typekit][description] = Typekit collection javascript file.
libraries[typekit][js][0][file] = typekit.js
libraries[typekit][js][0][options][weight] = 15 (*this is variable based on your personal preferences/needs)
It will now show up in your Omega Appearance references to select.
admin/appearance/settings/[subthmeme_name]
Perhaps a tad more work than the pre-process method, but it's another method...
Tutorial
Hey, just found this post while searching around.
I wrote up a blog post tutorial on how to do this if anyone is still lost.
I prefer to use the prep-process method, but as stated above, with drupal, there are always a few methods to get the job done.
http://cheekymonkeymedia.ca/blog/drupal-planet/how-add-typekit-fonts-you...