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 🙂
