Fonttsmania from fontsquirrel. Common logic of working with fonts during site layout
A small story about how to correctly generate font for runet. The focus is already known on Habré bourgeois service fontsquirrel .
If beauty has to save the world, then web interface designers are an army of evil. Neither understand me correctly, I consider myself a web designer, and I cannot transfer Krivorukov’s web designers, I have to impose my own psd-surveys with the same crooked hands. And here the most interesting begins ...
How is everything in practice:
1. First of all, everything depends on the choice of the necessary font stack for the RuNet, and if it were not for this , then it would have been necessary to keep it in mind. Choosing the right stack we feed it to the body, like this:
')
At the output we get the base font, close to what we use in our design layout. Fine!
2. Satisfied with our promptness, we carefully look at the design layout of the work and in some places (either in the menu or in the footer) we see the popular, almost among all printers: Myriad Pro, Arial Narrow or some other StarCraft Europe . Three options immediately come to mind: replace them with pictures, put JS (aha, the one that is cufon ) well, or once again touch the CSS property @ font-face . Yes, the idea of giving up the universal scale and using a safe stack everywhere in our country certainly does not arise - we, as they say, “embody” beauty into life.
The first option that came to mind is to replace everything with png - we throw it away immediately, as our forefathers did at the dawn of the Paleolithic;
The second option (cufon.js) does not suit our customer, may God bless him with health - there was one sober-minded client on earth; - so go to point three.
3. We look for the font we need from the depths of Windows 7 along the following path: “Start → Control Panel → Fonts”, copy to the local folder on the computer with the project and open the font generator fontsquirrel . In my case, MyriadProCondensed.
For luck, click on the buttons and get the finished css property from the series:
We also get in the archive for download an example of what our font will look like in browsers. And all would be nothing, but the result does not work as we need. And they seemed to put EXPERT ... in the settings, and even chose some ticks - but still there was no effect - Russian letters do not want to become MyriadProCondensed.
I googled two days, first I opened Habr, from where I actually learned about the service, thanks to Terion , I didn’t find anything on this issue and continued to “google” the mood. Two days later, the mood appeared and began to parse the service www.fontsquirrel.com on the shelves, namely, to search for the localization of the Cyrillic alphabet there.
4. Found it! In total, it was necessary to put the "radio button " in Subsetting to the position of Custom Subsetting . In the dropdown set, set the Language checkbox in the Cyrillic position.
5. Hurray earned. We go to drink coffee. Thank you all for your patience.
PS To persuade you to make layout / interface safe stacks, I will not even. Let it be on our conscience, but I know one thing, while this typeface exists - the world is slowly but surely heading into the abyss. Nothing beautiful about the fact that the font from the monitor screen is impossible to read - no!
If beauty has to save the world, then web interface designers are an army of evil. Neither understand me correctly, I consider myself a web designer, and I cannot transfer Krivorukov’s web designers, I have to impose my own psd-surveys with the same crooked hands. And here the most interesting begins ...
How is everything in practice:
1. First of all, everything depends on the choice of the necessary font stack for the RuNet, and if it were not for this , then it would have been necessary to keep it in mind. Choosing the right stack we feed it to the body, like this:
')
body{
font-family: "Arial Black", "Helvetica CY", "Nimbus Sans L" sans-serif;
font-size:12px;
}At the output we get the base font, close to what we use in our design layout. Fine!
2. Satisfied with our promptness, we carefully look at the design layout of the work and in some places (either in the menu or in the footer) we see the popular, almost among all printers: Myriad Pro, Arial Narrow or some other StarCraft Europe . Three options immediately come to mind: replace them with pictures, put JS (aha, the one that is cufon ) well, or once again touch the CSS property @ font-face . Yes, the idea of giving up the universal scale and using a safe stack everywhere in our country certainly does not arise - we, as they say, “embody” beauty into life.
The first option that came to mind is to replace everything with png - we throw it away immediately, as our forefathers did at the dawn of the Paleolithic;
The second option (cufon.js) does not suit our customer, may God bless him with health - there was one sober-minded client on earth; - so go to point three.
3. We look for the font we need from the depths of Windows 7 along the following path: “Start → Control Panel → Fonts”, copy to the local folder on the computer with the project and open the font generator fontsquirrel . In my case, MyriadProCondensed.
For luck, click on the buttons and get the finished css property from the series:
@font-face {
font-family: 'MyriadProCondensed';
src: url('myriadpro_cond-webfont.eot');
src: url('myriadpro_cond-webfont.eot?#iefix') format('embedded-opentype'),
url('myriadpro_cond-webfont.woff') format('woff'),
url('myriadpro_cond-webfont.ttf') format('truetype'),
url('myriadpro_cond-webfont.svg#MyriadProCondensed') format('svg');
font-weight: normal;
font-style: normal;
}We also get in the archive for download an example of what our font will look like in browsers. And all would be nothing, but the result does not work as we need. And they seemed to put EXPERT ... in the settings, and even chose some ticks - but still there was no effect - Russian letters do not want to become MyriadProCondensed.
I googled two days, first I opened Habr, from where I actually learned about the service, thanks to Terion , I didn’t find anything on this issue and continued to “google” the mood. Two days later, the mood appeared and began to parse the service www.fontsquirrel.com on the shelves, namely, to search for the localization of the Cyrillic alphabet there.
4. Found it! In total, it was necessary to put the "radio button " in Subsetting to the position of Custom Subsetting . In the dropdown set, set the Language checkbox in the Cyrillic position.
5. Hurray earned. We go to drink coffee. Thank you all for your patience.
PS To persuade you to make layout / interface safe stacks, I will not even. Let it be on our conscience, but I know one thing, while this typeface exists - the world is slowly but surely heading into the abyss. Nothing beautiful about the fact that the font from the monitor screen is impossible to read - no!
Source: https://habr.com/ru/post/138747/
All Articles