TrueType fonts can be scaled to any size and will always be clear and easy to read. They can be sent to any printer or other output device that is supported by Windows.
OpenType fonts related to TrueType fonts, but typically use a wide range of basic characters, particularly small caps, old-style numbers, and additional shapes (such as glyphs and ligatures). OpenType fonts can be scaled to any size, yet are crisp and easy to read. They can be sent to a printer or other output device that is supported by Windows.
PostScript fonts detailed and have high graphical characteristics. They are used for printing, especially for professional high-quality printing of books and magazines.
Which font to choose
It depends on many factors. If you need a font that is easy to read on screen and paper, it is better to choose TrueType font.
If you need a large character set for language marks and typography, you should use OpenType font.
For publications with professional (eg glossy magazine) or industrial printing, choose PostScript.
The most common problem that prevents users from opening this file is an incorrectly assigned program. To fix this in Windows OS, you need to right-click on the file, in the context menu, hover the mouse over the “Open with” item, and select “Select a program...” from the drop-down menu. As a result, you will see a list of installed programs on your computer, and you can select the appropriate one. We also recommend checking the box next to “Use this application for all OTF files.”
Another problem that our users also encounter quite often is that the OTF file is corrupted. This situation can arise in many cases. For example: the file was downloaded incompletely as a result of a server error, the file was damaged initially, etc. To resolve this problem, use one of the recommendations:
- Try finding the file you need in another source on the Internet. You may have luck finding a more suitable version. Example Google search: "File filetype:OTF" . Just replace the word "file" with the name you want;
- Ask them to send you the original file again, it may have been damaged during transmission;
Every web designer dreams of creating a website with beautiful typography. But, unfortunately, browsers only support a few typefaces, the so-called “web-safe” fonts. The standard set includes the following fonts: Arial, Verdana, Times, Georgia, Courier New and several others.
Headset defines a set of one or more fonts, each of which consists of characters that have common design features - weight, style, design, style, weight, size, for example, sans serif fonts (or sans serif), serif fonts (serif). The typeface consists of a set of characters (numbers, letters, punctuation marks, special characters, and may also consist of non-alphabetic characters).
Font is a set of symbols of a specific size, weight and style. For example, a 16px Times New Roman italic style font is one font, and a 10px Times New Roman italic style font is another.
@font-face rule allows you to connect a variety of custom fonts. The browser loads fonts into a cache and uses them to format text on the page. This approach is called font embedding, and built-in fonts are web fonts.
The @font-face rule should be placed before all other css rules as this technique will improve page performance. Downloaded fonts can be placed in a special fonts folder created on the server.
To connect a font using the @font-face rule, you need:
1) upload the font file to the server in several formats for support by all browsers,
2) specify the name of the font, provide a link to the file and set a description of the font,
3) add the font name to the font-family property of the element that will be displayed with this font.
@font-face ( font-family: "WebFont"; src: url(WebFont.eot?) format("eot"), /* IE8+, sign? allows you to bypass a bug in the src value handler */ url(WebFont.woff) format("woff"), /* all modern browsers, IE9+ */ url(WebFont.ttf) format("truetype"); /* all modern browsers */ ) p (font-family: "WebFont", Arial, sans -serif; )
This code tells the browser to display text inside the element
Using a WebFont font. If the browser for some reason cannot load this font, it will select the appropriate one from the list of fonts. It goes through them in that order until it finds a font that it can use successfully.
Within each font family, up to nine weights can be defined. Therefore, for each embedded font, as well as for each style, you need to set a separate @font-face rule, i.e. You cannot declare two different fonts or a font of the same family, but of different styles and weights, in one rule.
@font-face ( font-family: "WebFont"; src: url(WebFont.eot?) format("eot"), url(WebFont.woff) format("woff"), url(WebFont.ttf) format( "truetype"); font-weight: bold; font-style: italic; ) @font-face ( font-family: "WebFont"; src: url(WebFont.eot?) format("eot"), url(WebFont .woff) format("woff"), url(WebFont.ttf) format("truetype"); font-weight: 400; font-style: normal; )
In general, you can set the following properties for a font:
@font-face ( font-family: "FontName"; src: url() format(" "); font-variant: ; font-stretch: ; font-weight: ; font-style: ; )
If you assume that a given font is installed on the user's computer and want the font to be downloaded only after checking that the user has it, you can use the local() value to set the address:
@font-face ( font-family: "WebFont"; src: local("WebFont"), url(WebFont.eot?) format("eot"), url(WebFont.woff) format("woff"), url (WebFont.ttf) format("truetype"); font-weight: bold; font-style: italic; )
Web font formats
The @font-face property has good browser support, but different browsers use different font formats. There are four main font formats:
WOFF format(Web Open Font Format), an open web font format developed by Mozilla. Technically, WOFF cannot be called a font format, since it is just a wrapper with a compression function. The format compresses fonts in TTF/OTF format for use on the Internet. WOFF also allows you to add metadata to the file, such as license information.
OTF/TTF formats(OpenType Font and TrueType Font) work in most browsers. Both formats are freely available.
EOT format(Embedded Open Type) created by Microsoft developers, it is a compressed copy of the TTF font, the reuse of which is prohibited by DRM (Digital Rights Management) technologies. Supported only in IE, starting from version 8.
SVG/SVGZ(Scalabe Vector Graphics) is a font file type that represents a vector font style. Typically has smaller file sizes, thereby improving performance on mobile devices. Works in Opera Mobile and iOS Safari.
Difficulty using built-in fonts
1) Font files can be large, so in some cases adding @font-face slows down page loading.
2) Some fonts have licensing restrictions that do not allow free use.
3) Some fonts just don't look good on web pages.
Hello, Habr!
Mountains of articles have already been written describing different aspects of working with web fonts, many working examples have been collected, but every day we continue to face a basic misunderstanding of what web fonts are. Not everyone has time to Google materials on this topic, so I tried to provide answers to frequently asked questions. This material will be of interest primarily to those who have not yet delved into the intricacies of font technologies.
01. Why do we need web fonts at all, why not standard ones?
The first thing that comes to mind is that standard fonts are terribly boring, and it’s difficult to do something original with their help. As a rule, most of them bring melancholy and despondency not only to users, but also to web designers. In this case, non-standard fonts are more expressive and, in addition, there are an order of magnitude more of them, so there is plenty to choose from. Moreover, the font is an integral part of the brand, so every company strives to use it more actively, since such a technical opportunity has arisen.And one could completely abandon standard fonts, especially since many mobile operating systems do not support them (for example, Arial, Taһoma, Verdana and Georgia). But, unfortunately, the industry, which for many years was adjusted to 96 DPI screens and Georgia verdans, was not quite ready for rapid changes, and on older Windows operating systems there are still problems with displaying non-standard fonts due to the peculiarities of the rasterization mechanism.
02. How to choose a good web font?
A font is not just a digitized set of letters created with a brush on paper or in Illustrator, it is also 98% fine-tuning and polishing, hinting and testing on various media and in different sizes. This font looks good, its style is polished, there will be no problems with it either on the printer or on the screen, it exudes good quality.However, when choosing a font, it is not even this that is of much greater importance, but the appropriateness and compliance of the font with the method of use and the tasks assigned to it. If you work with fonts, you need to understand how it all works what technologies are used. This will help you not to keep in your head a bunch of incomprehensible memorized rules, captured in fits and starts. For example, every self-respecting printer knows why it is undesirable to use TrueType fonts for offset printing, which fonts can be used as text fonts, and which ones - only for headings or indexes. If he doesn’t know this, then he will have to reprint a huge print run, and constant surprises and problems will await him at work. It's surprising why no one makes any demands on web designers.
03. How do browsers render fonts?
Quite often I heard that browsers draw fonts themselves, so they look different everywhere. But in fact, a special graphics subsystem of the OS is engaged in rendering fonts: in Windows this GDI or DirectWrite, and on OS X and iOS - CoreText(and formerly QuickDraw). There are 3 common font rasterization (rendering) mechanisms: two-color (black and white) pixel, monochrome pixel (often called antialiasing or regular anti-aliasing) and subpixel. Subpixel uses the feature of LCD and plasma displays, where each pixel is divided into 3 parts (red, green and blue), in order to increase the horizontal resolution of the rendered image and improve clarity.
However, browsers do choose their own rendering method from those provided by the OS. For example, GDI has 3 rendering options: black and white, regular anti-aliasing and subpixel ClearType. The peculiarity of the latter is that smoothing occurs only horizontally, in accordance with the location of the subpixels. This is why we often see terrible jaggedness on the horizontal and diagonal strokes of the font when using it. Fortunately, Microsoft began to slowly improve the mechanism, and GDI was replaced by DirectWrite technology, which did introduce vertical anti-aliasing. Compare:
04. TTF or OTF?
TrueType and PostScript were originally different font formats. TrueType uses quadratic Bezier curves, while PostScript uses cubic curves, which are familiar to designers working in Illustrator and Photoshop. Today, both methods of describing curves are used as part of the same OpenType format, with the only difference being that TrueType files have a TTF extension, and PostScript files have an OTF extension. Each technology has its own hinting features and application specifics.
Look at the picture. If a TrueType font is much more readable in a small size, but in a large size we see characteristic teeth, then for a PostScript font everything is exactly the opposite. This is because browsers choose different rasterization methods for PS and TT. For PS, the browser applied regular monochrome anti-aliasing, and TT was processed with ClearType. So it turns out that TrueType will be preferable for text fonts, and PostScript is better for headings and large inscriptions.
We also see that not all browsers use DirectWrite yet. So, it is still not in Google Chrome.
05. What else affects the display?
Sometimes it is better to set the rasterization method manually. For example, in browsers with the Webkit engine, you can use the CSS property - webkit-font-smoothing and manually enable regular anti-aliasing instead of sub-pixel anti-aliasing, and vice versa. There are also non-trivial ways to get the browser to change the rasterization method; it was once suggested on Habré.We must not forget about the font size (font-size). Outline shape, stroke contrast, and readability can vary greatly between font sizes. Put down the graphics editor and see how the web font looks in the browser, in combat.
Another way to mitigate the shortcomings of anti-aliasing is through color and contrast management. To reduce the effect of chromatic contouring (when using ClearType, yellow and magenta outlines appear around the edges), you can try to reduce the tonal contrast by making the background color closer to the text color. Do not get carried away too much, remember about users with low vision.
06. Do web fonts need hinting?
Hinting is special instructions that rigidly bind the abstract curves of a font to pixels on the monitor. The vast majority of fonts (including commercial ones) are not hinted, because this is a rather labor-intensive and complex procedure. Hinting is performed differently for TrueType and PostScript. If you take a cheap font, the OTF format is safer, because in TT the procedure has remained unchanged since the days of black and white rasterization and is not entirely adequate, but for PS the procedure is simpler, and the author has the opportunity to do automatic hinting.A font without hinting becomes blurry when rasterized, and the height of the letters may jump.
On the one hand, a font with hinting is quite clear, contrasting and uniform, but on the other hand, letter shapes are distorted depending on the size, and the spacing may differ from real ones. Letters are strictly subordinate to pixels.
In Windows OS we see perhaps the most radical approach: such popular fonts as Tahoma, Verdana, Arial and Georgia were hinted specifically for GDI ClearType, and when DirectWrite appeared, the main fonts included in the OS had to be re-hinted and updated.
Unlike Microsoft, Apple takes the opposite approach, so its operating systems use algorithms that allow any font to be displayed more or less efficiently, and hinting is not taken into account at all.
To answer the question: the era of 300 DPI monitors is rapidly approaching, and a huge number of mobile devices already have this resolution, and soon hinting will not be needed at all. But since Windows still remains hint-dependent and focused on low-resolution monitors, try to choose high-quality hinted or standard fonts for text, otherwise the text will be unreadable and difficult to understand.
07. @font-face or Cufon?
No matter how strange it may sound, there are still people who ask themselves this question. It would seem that after browsers began to support the @font-face attribute, all other font embedding technologies (Cufon, sIFR, Flash) seemed to become irrelevant. But some meaning still remains, for example, a way to replace a font with an image, when not vector curves are displayed on the site, but only a print, like a printer prints it on a sheet or Photoshop outputs an uneditable JPG. This is permitted by many regular (desktop) font licenses. Some font manufacturers (for example, Adobe) allow the desktop font to be embedded (in programs and on the server), as long as it remains protected and cannot be downloaded. If you are unable to purchase a separate web license, then you can use the appropriate sIFR when the font is embedded using Flash objects. The disadvantage is that it uses Flash, which is not supported by all devices. You can also use Cufon technology (Canvas is used), if the license allows. Of course, in this case the script will be cumbersome, and text selection will not work, but in a desperate situation it will do.But it is best to use @font-face, it is both more technologically advanced and more convenient, and in addition, sufficient experience has been accumulated to work with it. It has only one drawback: not all manufacturers allow their fonts to be used on the web.
08. What formats should font files be in?
Today, fonts prepared for implementation (@font-face) on a website should be in several formats:TTF or OTF- a font file that is familiar to us, but loaded from the server while viewing the site;
WOFF- unprotected source archive OTF or TTF is perhaps the most important format that is supported by most popular browsers, and files in WOFF are usually 2–2.5 times lighter than the original ones;
EOT- an archive implemented by TT OpenType, which has protection mechanisms, is needed to support older Internet Explorer browsers (starting from IE8, in addition to TrueType curves, PostScript is also supported);
SVG- to support the Safari browser.
09. Can web fonts be converted?
No matter what people tell you, you can't simply convert a file and retain the original quality of the font, especially if it was originally in OpenType format. In the process, there is a chance to lose some data embedded in the font file (compiled instructions, additional characters, metrics). You will notice this when the file suddenly “loses weight” during conversion; it is especially unkosher to convert TrueType to PostScript and vice versa.
Additionally, the conversion process almost always violates the non-modification terms of the license. Simply put, this is the same as theft. When you throw files into the converter, rest assured that it will not miss them and will issue a warning, because the file contains the manufacturer's digital signatures and corresponding modification restrictions.
10. How much should web fonts weigh?
The browser must fully download the font files before displaying the page. Perhaps you have seen the “font flash” (or FOUT) effect, when for a short moment, instead of exotic fonts, standard system fonts flash. It’s normal if TTF (OTF) fits into 100 kb, and WOFF (EOT) fits into 50 kb. Always think about whether you need to use custom fonts at all, even if you use it in 1 short title, you will still have to download the entire font file.The more perfectionistic the design, the smaller the font files can weigh, and try to choose simple shapes. In this sense, the ideal form is an open geometric grotesque with low contrast. To speed up font loading, it is also useful to use data:uri.
11. How many font styles can be used on the web?
From a designer's point of view, a lot of typefaces are cool. And indeed, for the header - Bold, and over there, for the inset - ExtraLight, we’ll generally push unnecessary texts and press them into Condensed Bold. Here it is - real wealth and stylistic diversity. But when all this “wealth” begins to be transferred to the site, it turns out that everything is terribly slow. And it’s better not to even try to open such a site from a mobile device. Also, don’t forget that each typeface costs separate money, and it is likely that the customer will ask you to either find a font synonym, or reduce the number of styles, just so as not to buy all the expensive typeface. It is normal to use a maximum of 2-3 styles of the same or different typefaces.12. Is it necessary to limit the character set?
The answer to this question depends on what kind of site it is and how it will be used. Restrictions can be useful because it is possible to significantly reduce the size of files. Sometimes, due to ignorance, developers upload heavy font files to the site with its full set of characters, and it’s good if there are no hieroglyphs (note, the Arial Unicode font containing most of the characters from the Unicode table weighs 22 MB).For those who make English-language sites the easiest, they don't need to load additional characters at all, the ones in Basic Latin (or ASCII) are enough. If you use the font only for headings in Russian + inclusions of English, then ASCII (Basic Latin) sets and 64 characters of the Russian alphabet will be enough for you; it is not at all necessary to load the Cyrillic Extended set of 420 characters. It's a completely different story if your site is multilingual, in which case, to avoid incorrect display of characters, you need to try to cover all the languages used.
13. Can I use font clones?
It happens that buying the original font is either too expensive or even impossible, then it will be appropriate to choose a font synonym (clone). Of course, you shouldn’t expect amazing quality from them, even if they are made, say, by a famous Russian company. Everything is completely bad when you come across the opus of some anonymous literate person who decided to try himself in a new field, beware of such fonts. Here are examples of clones (the original is indicated in brackets): FreeSet (Frutiger), Pragmatica and Helios (Helvetica). Please note that letter shapes may vary. There are a large number of clones in the Paratype font synonyms directory.
14. How to test a font?
Designers, don’t get used to seeing fonts only through Photoshop windows, graphic editors use their own methods of text smoothing, and you can be deceived by a beautiful picture. It is much more useful to learn how to test and watch them in browsers. If there is a demo page, be sure to make sure that all sorts of artifacts and spikes do not appear during rendering. There is also a tool called Typecast, where you can check many fonts and then show the page to the client. For those who choose a new font for an already finished website, the Web Fonts Previewer service is indispensable for you; you can test any font on a live, working website, as if you had already implemented it.15. I have a font on my computer, can I use it on the website?
First, a little about theft. I know a lot of designers who have thousands of fonts on their computer, the origin of which no one knows. As a rule, they simply downloaded it from the Internet. But for some reason no one thinks that creating good fonts takes months and sometimes years of serious work! But this is not the only reason why you should not use fonts that are scorched and taken from unknown sources, but also because you may encounter serious difficulties at the development stage.
If you want to embed a font that comes with the operating system into your website, you can only do this by rasterizing it or using it in images. If you really need to embed, then you will need to buy a separate license, just like regular fonts (both Georgia and Tahoma are on sale).
16. How to buy a web font?
When you "buy a font" the closest thing to buying software is that you receive a license to use it, rather than the rights to the program file itself. It turns out that a legally compiled font file is a program. Modification or alteration unless permitted by the license is considered copyright infringement.A convenient way to purchase fonts is through font catalogs (Fonts.com, MyFonts, Ascender, Typekit). You will be able to view, compare and select one of the available options for use, and pay by card. The easiest way for companies would be to directly contact the production studio or leave the purchase of fonts to the customer
Or maybe it’s better not to spend money on a font at all? There are many great free fonts that are just as good as the paid ones!
17. What types of licenses are there?
There are different types of font licenses, and with the advent of web fonts, the variety has only increased. In real life, each company sets the rules of the game itself, and a font license may contain features of various others. We will be interested in typical ones.A regular commercial license limits use on a certain number of devices and allows distribution of works created using the font. These can be magazines, newspapers, leaflets, business cards, rasterized images of font - all together we can call them prints. This license is not suitable for film, television, web and embedding in applications and programs; such rights must be purchased separately.
There are also specific licenses, for example: a license with exclusive rights. In this case, the company buys all rights from the type designers, and even the author of the font does not have the right to use it anywhere. It is especially surprising when such fonts are on torrents, or when some third-party designers use them.
Free licenses (public domain) - the author of the font allows free distribution, with or without the condition of indicating his name (Creative Commons) (for example, OFL, GPL, Apache 2.0). This type of license even allows commercial use, other than sales and paid distribution. Examples: PT Sans, Opensans, Droid. Sometimes modification of a font is allowed (GPL), but the modification you create automatically inherits the same license (meaning you can be forked too). Freedom assumes that it can be used on any media, incl. and web.
Free for non-commercial use - that is, you can use it in all cases where you do not make money from it. For example, for training, hobbies and community projects. Sometimes, manufacturers allow use for designers, in the hope that the designer's lucky client will then buy a commercial version of the font.
18. How are licenses different for web fonts?
Web licenses are our favorite, they are either in addition to the main license or are given separately. Regulates a special case - the use of fonts on websites. As a rule, the most important limitation is on the number of page views. For example, 10 thousand per month, 100 thousand or 1 million. That is, the more people visit your site, the more you pay for the license. There are also unlimited options, when you pay for the font once, but they are many times more expensive. You probably wondered, does anyone keep track of the number of views? Most often not. But do not forget that a huge number of counters monitor your site traffic and, if you arouse the seller’s suspicion, you may lose your license.And yet, a separate web license does not allow use on regular computers. Sometimes a web license is issued free of charge, that is, at the same time as purchasing a desktop font, you get the right to use its web version. But this is still rare; the vast majority of manufacturers require an additional fee.
After the purchase, you receive special files that you embed into the site (TTF, OTF, WOFF, EOT), and some fonts do not allow these files to be placed on the site in an unprotected form, since theoretically third parties could obtain the font files themselves. The third option is that you use a special web service of a font manufacturer, such as Typekit, owned by Adobe, and pay a subscription fee.
19. Where can I get good web fonts?
Catalog of free fonts from GoogleFontsquirrel is a famous web font converter and directory
Myfonts - a huge font store with a convenient payment system
Fonts.com is the main competitor of MyFonts
Typekit - a service for renting fonts from Adobe
Typecast - the aforementioned store with testing service
P.S. Another useful resource that was recommended by Maria Doreuli, WebFont.ru. Licensing. To make it clear
Tim Brown. Type rendering on the web
Tim Brown. CSS properties that affect type rendering
Tim Brown. Type rendering: operating systems
Tim Ahrens. A Closer Look At Font Rendering
Tim Ahrens (Typekit). A closer look at TrueType hinting
The Benefits Of OpenType/CFF Over TrueType
Ildar Kinyabulatov, web designer ADV/web-engineering
You"re here because you have a file that has a file extension ending in .otf. Files with the file extension .otf can only be launched by certain applications. It"s possible that .otf files are data files rather than documents or media , which means they"re not meant to be viewed at all.
what is a .otf file?
applications that open a .otf file
Microsoft Windows Font Viewer
Microsoft Windows Font Viewer
Font Viewer is a utility that is able to preview fonts in many ways including sample text, comparison list, and large character map. Word processing and desktop publishing software giving font previews to make it easy to choose the font the users want. They commonly have pull-down list of fonts with each font name displayed. Though a lot of free font viewers are not actively developed, users may find an old one that is still useful. Even Windows" standard font utilities may be sufficient for some users. Many of the viewers are mainly character maps. These focus on the character set used by each font. This is the view that the users need when trying to decide what symbol to insert into a document, or when is the need to type a word in a foreign language full of unfamiliar characters with strange accents. Print sample font lists to have handy while working with graphics applications. In the past, viewers generally showed only the 256 ASCII or ANSI characters but the most useful viewers now show the extended Unicode character set. 
FontForge for Mac