Cufon-custom font on the site
Cufon-non-standard font on the site. Sooner or later, when developing a layout, there is a need to use non-standard fonts on the site. For example, the customer wants the site to use a font with the company’s corporate style in the headers. There are several ways to solve this problem:
Use of images.
Connecting a font via the css @font-face parameter
Using the Cufon javascript plugin
The first option, although it will be cross-browser, will limit the site administrator, because it is unlikely that the customer will want to contact you every time you need to add new materials to the site. The second option will work, but not in all versions of older browsers. Read more about using @ font-face here.
In this article, I want to elaborate on an interesting plugin — Cufon. This skipt allows you to connect any fonts to Your site.
It works as follows: changes the text to an SVG object, or to a VML object (for Internet Explorer). Cufon is a good solution for connecting your font to a website. It has a number of drawbacks, which we will consider later, and now I propose to focus more on connecting Cufon to the site.
Using non-standard fonts — Cufon. Step 1.
Download the latest version of Cufon from the official website of the plugin http://cufon.shoqolate.com and connect the script in the header of your site.
Using non-standard fonts — Cufon. Step 2.
Go to the Generator tab http://cufon.shoqolate.com/generate/. Here we need to convert our font so that the script can use it.
In the Select the font you’d like to use item, set the path to the font on the computer. If there are available versions of bold, italic, or bold italic, set the path to them as well. Be sure to check the box next to the item the EULAs of these fonts allow Web Embedding (without Adobe Flash).
The next option, Include the following glyphs (if available), is responsible for the font versions that are supposed to be used. If you want the font to support Cyrillic, make sure to check the box next to Cyrillic Alphabet and Russian Alphabet.
In all the following points, we leave the default settings, only in the last Terms, you need to agree to the rules for using the Cufon plugin, so put a check mark next to I acknowledge and accept these terms and click the Let’s do this button. The generator converts the font to a file .js and this file must be connected on the site together with the Cufon plugin script.
Using non-standard fonts — Cufon. Step 3.
Now you just need to tell the Cufon plugin what you want to display in a non-standard font. To do this, insert the code in the same header
Cufon.replace (“h1 “);
Instead of h1, we write classes, identifiers, or objects whose contents we need to display in a non-standard font and voila-ready!
To make the script work on hover, write the following:
Cufon.replace (‘h1’, {hover: true });
Advantages of using Cufon
easy to use
responds to the hover parameter
convenient for the site administrator
reacts to the css text-shadow parameter.
Cufon doesn’t weigh much, so it won’t overload the site too much.
Sufficient cross-browser compatibility-works even in IE6, though it refuses to work in 9
Cons of using Cufon:
it is not possible to highlight the text, although developers are actively working to solve this problem.
for large texts, it is unlikely to be used. The script will undoubtedly affect the loading speed of the site, and we want to make it as small as possible.
Using a custom font on the site using Cufon. Conclusion.
So, having weighed all the pros and, despite some cons, we can say that The cufon plugin is currently an excellent tool for using a non-standard font on the site.
