Errors in online stores
I want to note that the errors of online stores directly affect their income. And serious errors in online stores lead to their closure. This article is intended for ordinary…

Continue reading →

Custom font for the site. @font-face
Recently, we published an article — Cufon-custom font on the site, in which I talked about ways to use non-standard fonts on the site, today we will consider the second…

Continue reading →

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…

Continue reading →

Custom font for the site. @font-face

Recently, we published an article — Cufon-custom font on the site, in which I talked about ways to use non-standard fonts on the site, today we will consider the second method-the css @font-face parameter .

The main advantage of @font-face over cufon is that the text translated into a non-standard font can be highlighted and you do not need to wait for the script to load in order for the text to be transferred to the appropriate font.

Specify the path to the font in the src property.

the correct code for using @ font-face is as follows:

@font-face {font-family: MyriadProCond; src: url(‘MyriadPro-Cond.otf’);
src: url(‘myriadpro-cond-web.html’); src: url(‘myriadpro-cond-webd41d. eot?’) format(‘â?º’),
url(‘myriadpro-cond-web.woff’) format(‘woff’), url (‘myriadpro-cond-web.ttf’) format (‘truetype’),
url(‘myriadpro-cond-web.svg#MyriadProCondensed’) format (‘svg’);}
In a specific example, we enabled the myriadprocond font. The @font-face parameter is set once. In the future, in order to assign the myriadprocond font to an object, you just need to call it with the font-family parameter

font-family: MyriadProCond;

If we look at the code in more detail, we see that to connect a font, you need to set the path to several versions of it in different formats. The use of formats .otf, .eot, .woff, .ttf, and .svg will provide us with maximum cross-browser compatibility.

To get a font in all these formats, you need to convert it. The Font Squirrel service is the best way to do This — www.fontsquirrel.com

Custom font for the site. @font-face

We need to go to the @font-face Generator tab and click on the AddFonts button, select the desired font, then, preferably, select the Expert parameter and select the necessary parameters for You.

If you need Cyrillic support, for the parameter Subsetting: select the Custom Subsetting option… and put a check mark next to Cyrillic.

We agree to the terms of use — put a check mark next to Agreement: and click on the Download Your Kit button.

At the output, we will get an archive with fonts and Html files, where their use is clearly shown.

Connect everything in css and you’re done! We use it with pleasure 🙂

What is a corporate identity and its abbreviated version?
About corporate identity There is a big difference between a "real" corporate style, which is developed by professional design studios for a lot of money, and a mini corporate style,…

...

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…

...

10 examples of truly high-quality UX that helps you learn about users
Make development your priority. You need to expand your customer base, raise revenue per user, and reduce customer losses. At first, this is possible with careful study. You can get…

...

What do I need to know when ordering a site to avoid overpaying?
I will explain on the example of a banal plastic window. The window is simple and clear to everyone, although the prices for different Windows of the same size are…

...