What is a corporate website | business site?
The phrase: "Office is the face of the company" is known by everyone, so: a corporate website is the second face of the company after the office for local firms,…

Continue reading →

3 cool ideas to make CAPTCHA less annoying
Do you like captcha? You don't need to be a clairvoyant to know that the answer is no. However, as an understanding web designer or developer, you know that this…

Continue reading →

Customer and web designer: how to reach a common denominator?
So, You have clearly set a goal-to create a website and you need a web designer to make Your goal a reality. This will be the company's website or your…

Continue reading →

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.

18 YouTube channels for web design that will be useful to everyone
Web designers and developers are constantly searching for discoveries. Any app is backed by updates and new versions. The market offers alternative versions that will appeal to the public more.…


The free Google tool for novice coders has a desktop version
More recently, we talked about 10 mobile apps that will teach you how to code. The Grasshopper app was also included in the top ten. We praised it for its…


5 tips on how to control the user's attention on your site
Some details on your site are more important than others. There is nothing wrong with this – just a fact. The "Buy now" button is almost certainly more important than…


20 web design examples that set the tone for 2020
It seems that the year 2020 has just arrived – and a whole month has already passed, which for many has become very productive. January is always the most interesting…