-
Notifications
You must be signed in to change notification settings - Fork 237
Instead of shipping with a selector engine of its own, Cufón takes advantage of selector engines provided by other JavaScript frameworks, and – if none is loaded – the browser itself. Newer browsers come with built-in selector engines (document.querySelectorAll()) which accept full CSS selectors. Older browsers, however, only have document.getElementsByTagName() which only accepts tag names. This is why simple selectors such as “h1” work in all browsers but more advanced selectors such as “.cufon” or “#nav a” do not.
Load a JavaScript framework or a stand-alone selector engine before Cufón. Cufón detects most frameworks automatically. Just load your framework of choice before Cufón and you’re done. With jQuery, it’d look something like this (using Google’s content delivery network):
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="cufon-yui.js" type="text/javascript"></script>
For a more light-weight solution you can use a stand-alone selector engine. We recommend Sizzle.
Either your paths (<script src="..">) are wrong or you’re trying to use a domain-restricted font on a domain it was not meant to be used with.
Double-check your paths and make sure you’ve whitelisted the correct domains. If in doubt, try generating the font with no restrictions at all (just remember to add them back later). If everything works after that you probably forgot to whitelist the correct domain (or you simply mistyped it).
This issue can be caused by two things. Either you are not using UTF-8 or your font does not support the characters you need (or you simply forgot to include them when you generated the font). Or your CMS may replace things such as quotes and lines with more fancy looking ones without you even knowing about it.
Make sure your pages are UTF-8 encoded and that you’ve selected the appropriate glyph ranges. Basic Latin should be enough for most English-only sites. Combine Basic Latin with Latin-1 Supplement and you cover most European languages. You may also wish to select WordPress punctuation if your CMS (WordPress or not) tends to use typographic quotes instead of normal ones.
You’re seeing both the Cufón-replaced text and the regular text meant for printing and screen readers.
There’s none, but we don’t think it’s a problem. Why? Because the only people who disable CSS yet leave JavaScript on are web developers. And they only do that while they’re testing things. If a real user somehow figures out a way to disable CSS, they most likely disable JavaScript too. Mobile browsers with limited or no CSS support either do not support JavaScript at all or at the very least support neither <canvas> nor VML, which mean that Cufón is not activated at all. (Semi-related note: Cufón works on the iPhone and other equally modern mobile browsers)
Delays can be caused by many things. The most common cross-browser delay causing issue is having external <script>s (the src attribute is set) in <body>. Even a single Google Analytics script or an embedded Vimeo video / Twitter feed can be enough to cause the issue. Internet Explorer on the other hand does not require anything special for a delay to appear, they come and go “just because”. It’s also possible that your page simply loads very slowly for some reason.
Either use Cufon.now() (see API) or temporarily hide everything you’re going to replace (see Styling). Cufon.now() alone might not work in all cases.
You can run the generator offline or on your own server. Please note that these instructions are meant for advanced users only, if you have trouble understanding them this may not be for you. The instructions apply to OS X and *nix only, it is extremely difficult to install the generator on a Windows machine (but it may be doable via Cygwin if you have enough time on your hands).
First of all, you’ll need Git, PHP and FontForge. On OS X you’ll probably have to use MacPorts to install PHP.
After you’ve got everything installed, simply fire up your terminal and issue the following commands:
git clone git://github.com/sorccu/cufon.git cufon
cd cufon/generate
php convert.php -u "U+??" /Path/To/Font.TTF 1> MyFont.font.js
On OS X, the last command should be:
php convert.php --fontforge /Applications/FontForge.app/Contents/MacOS/FontForge -u "U+??" /Path/To/Font.TTF 1> MyFont.font.js
Assuming you used the official FontForge binary, of course. MacPorts may use a different name for PHP, such as “php5” or “php5-cli”. You’ll want to use the CLI version if multiple versions are offered.
If everything went fine, you should now have a valid Cufón font in your hands. For help, try:
php convert.php --help