If you have already become familiar with the basics of typography and know where you can find fonts that suit you, then it’s time to get acquainted with the classification of fonts and their types. Nowadays, there are quite a large number of different fonts. They are both paid and free.

Basic font groups

Nowadays there are many different fonts. All of them have specific characteristics, thanks to which they can be divided into groups:

Serif (serif)

Such fonts are usually used in printing. The reason for this is their ease of reading, which makes them very popular. This type of font is attractive due to the small lines at the ends of the letters. It was used in books, various magazines and newspapers. Serif fonts, on the other hand, will help your website gain a certain elegance and make your web design look more sophisticated.

Slab serif (rectangular serifs)

Using this type of font will give your website a unique look and make it look quite stylish. Rectangular serifs are difficult to read and therefore are not recommended for use in the text with which you fill the body of the site. It is best to use them when designing headings, which will give them more interesting view and visually separates them from the main body of the text.


Script (in cursive)

These fonts are best used to complement the decorative elements of your design. When using cursive fonts, be especially careful when using them in your headings, as well as in the body text of the site, because reading them is quite a difficult process for visitors.


Blackletter (Gothic font)

This font has a decorative look. If you want to spice up your web design with something vintage, then you should use this font. Often these fonts are used by various restaurants on their signs.


Sans serif (sans serif)

The letters will not have serifs. They are quite similar to serif fonts and will look great in the text of any Internet resource or in headings. They are usually used on a computer, because they are much more convenient to read when the font is small. These fonts can help make your project simpler and its design more minimalist. Today, San serif is the most popular font used by designers for the text of articles posted on their websites.


Handwriting (handwritten font)

Using this type of font will make your text look like it was written by someone else. It can serve as a good decorative addition for a web project, which in turn will make it unique and inimitable. It's best to use font only to highlight the information you want the reader to notice.


Decorative (decorative)

These fonts include everything existing types funny in nature and quite original. Their small disadvantage is that they are very difficult to read. If you want your web project to have an unusual text design, then you can safely use them.


Selection and combination of fonts

The variety of fonts is huge, which means there are even more combinations of them. Therefore, choosing the right fonts takes a lot of time. This is a rather complicated process, in which you should always base it on the style of your Internet project and on the preferences of your visitors.

First, at the beginning of this process, you must decide on the choice of font that you will use in the text of the body of the site, which will become the main one for your entire project. Often, a font with or without serifs is chosen for the body of the site. This will give you confidence that your site will be readable, and therefore the search for fonts should be carried out directly in these two groups.

Please also ensure that the font you choose has a variety of styles. This will allow you to be more flexible when using them in your web project. In a good way To understand whether a particular font is right for you, it will be tested on large blocks, for example in headings, paragraphs, etc.

Secondly, you definitely need to define another font that you will use in some of the headings. There are no specific rules for such a choice, but experienced designers recommend choosing a font that will differ from the main one you use for the body of the site. This way, you can make the headings on your site more attractive to users. It is better to use a slightly modified font for the body of the site, for example, making it bold.

A good text design option is to mix and match a group of serif heading fonts with the body text of the site, which will be sans serif. See this experiment and you will see that these two groups combine very harmoniously with each other, creating Beautiful design printing houses.

Thirdly, if you want to draw the attention of your users to certain elements of the text and make them more visible, then you should introduce another font into the design. In this case, experiment with cursive and decorative fonts, as these are the best ways to grab the attention of website visitors.

How to mix and use fonts in text

Let's look at several principles of combining fonts that will allow you to achieve beautiful design text.

The site must be readable

When choosing a font for the text of the site body or header, you should definitely remember that it should be easy to read by the user. Of course, the readability of some fonts directly depends on their correct settings: you need to ensure that the appropriate font size, line height, and colors are selected. Before using any fonts in your web design, check how they will look in different colors. This way you can understand whether a particular color suits you.

This rule has a couple of exceptions that should always be kept in mind. For example, you are developing web design for a children's Internet project and you may want to use one of the types of decorative fonts that children will like. In this case, try to stick to serif and sans serif fonts. It is necessary to follow this rule, because studies have shown that these fonts are much easier to read, so the choice of decorative fonts will not be the most the best option in this case.

Don't use a lot of different fonts

When creating a project design, try not to use a large number of fonts. The optimal number to use would be three fonts. There are several reasons for this:

    When using font services, each font you add will help increase the site's page loading speed.

    The presence of more fonts on site pages distracts visitors, making it harder for them to concentrate on reading the content.

    By using no more than three fonts, you save time while still making your website look great.

Don't use inappropriate combinations

Combining multiple fonts when writing website titles or combining a large number of different fonts is a very bad idea. Such combinations are risky and can bring you a lot of problems.

By viewing fonts on the Typekit web service, you have the opportunity to set the filters you need, which will help you figure out which fonts are best to use for headings or paragraphs, which will be a very useful tool during design development.

Examples of combining fonts

As an example, let’s look at the pages of several sites where fonts are carefully selected.

Headings:
Sentinel (serif slab)

Paragraphs:
Gotham Narrow (sans-serif)

In these examples, we can observe that headings and subheadings are in slab serif font. It acts as a contrast to the main text of the site and is a simple and easy to read font. This design has uniformity. You can achieve a lot from it just by changing the color and its style.

Headings and paragraphs:
Freight Text Pro (serif)

Rest:
Freight Sans Pro (san-serif)

In this example, we can see how only one font is used for headings and paragraphs. It looks pretty cool because the headings have a bolder and larger appearance.

Also here we can see one sans-serif font, which the author uses on the site buttons and message information.

Headings:
PMN Caecilia (slab serif).

Paragraphs:
Gill Sans (sans-serif)

The designers of this site have created a very sophisticated and beautiful design for their web resource. There are no irritants or bold fonts here. They opted for a thin font for the headings and simple font for site body text.

Both font families present on this resource have an excellent combination, which allows the visitor to easily read all the text.

Headings and paragraphs:
Skolar (serif)

The designers of this site use only one serif font. But, despite such an extraordinary decision by specialists, the headings and paragraphs have a visible difference between each other. All this is due to the fact that specific font styles, colors and sizes are used here.


Hi all!

Today I want to talk to you about fonts. More precisely, not about the fonts themselves, but about font management. This topic is extremely important, because both the productivity of your work and its final result largely depend on the ability to manage pin files. I'm not even talking about saved nerves...

So what are we talking about?

In order to operating system your computer could use font files, you need to store them in certain places. On Windows, by default, fonts are located in the folder Windows/Fonts. It is from there that new fonts enter the system. The easiest way to install fonts is to drag them into this folder from other sources.

On the computer Mac files with fonts are stored in the Fonts folders, which are located in the folder Library. Fonts in the Library root directory available to all Mac users. Fonts stored in individual user Libraries (located in the Users), are available exclusively for the use of these users. Fonts from the System Folder Library (System) are used directly by the operating system and are highly undesirable to touch.

Some apps—usually those that come with their own selection of typefaces—store fonts in their own folders that only they can access. This prevents their use by other programs, which is usually specified in the user agreement, since they are intended for use exclusively by the parent program.


Font management programs


If you have to constantly work with fonts, then you know how important it is to select, compare and analyze typefaces. But in reality, managing fonts is often not as easy as it seems.

Font management issues such as installation And deletion, search lost headsets, problem solving font conflict, always cause a lot of trouble for designers and printers.

This is where they come to our aid special programs called Font managers, whose task is to help organize and manage a large number of fonts on a computer.

If you have too many fonts installed on your computer at the same time, two serious problems. First, it slows down your computer, which has to constantly keep track of all your fonts. Moreover, having too many fonts installed can cause your PC to freeze. Secondly, the menu Fonts becomes so long that you have to endlessly scroll the screen to get to the font you need.

Mainly, font managers allow activate And deactivate fonts at any time. Thus, using a font manager, you can work with fonts without installing them on your computer and, therefore, without overloading them system folders fonts.

And for complete convenience, you can organize fonts by collecting them into sets. For example, for a specific task you have a specific set of typefaces or a special set of fonts that are tied to a separate program. Some font managers can automatically install the necessary typefaces according to the type of document being opened.

Additionally, font managers help group them according to internal logic. Since the operating system dumps all fonts into one pile (or worse, into several hard-to-reach folders), the font manager helps you group them according to any criteria you like: by font format, by historical style, by text, by display type, etc.

Mac OS X includes its own own program for managing fonts: Font Book located in the folder Applications. There is no such utility in Windows, but there are a number of programs from independent software developers.

Below I bring to your attention an analysis of the most famous font manager programs for Windows and Mac.

It would be interesting to know which one you use and why? Is your favorite program not listed? Let us know in the comments!


Suitcase (Win) / Suitcase Fusion (Mac)




Suitcase Fusion (Mac) and Suitcase (Win)- powerful, fast and smart font managers with a simple, intuitive user interface. IN new version The utility allows you to collect your fonts into a structured and secure data archive called the Font Vault.

Font Vault gives the user greater control over their fonts, eliminating unnecessary conflicts between fonts, duplicate issues, and offers fast access to your own library.

Suitcase ensures you have the correct version of the font you want and prevents potential font disruptions from missing fonts or the wrong font being substituted. Among other things, the program stores fonts in one, safe place that is easy to find and creates backup copies.

In addition, it offers to automatically register fonts in the system: only the fonts you need are registered when you open a document, and deactivated when you close it

Together with Suitcase Fusion or Suitcase for Windows is coming FontDoctor utility (Font Doctor). FontDoctor is a professional software whose task is to detect, diagnose and correct most errors found in fonts, meaning you no longer need to be distracted from your daily work.

The price of the Suitcase Fusion program is from $99.95. Suitcase Fusion runs on Mac or PC platforms.

Main characteristics:

  • Easy to use interface
  • Grouping fonts into sets
  • Headset preview
  • Font Sense, the most advanced font verification technology, provides for in-depth analysis of the typeface at the time of font identification for further automatic activation using various selection criteria - font type, manufacturer, version, etc.
  • Keeping the font library safe and tidy
  • Automatic font activation
  • Windows Vista compatible
  • Powerful font diagnostics and correction
  • Font Doctor (free when purchasing the program)

Linotype FontExplorer X (Win/Mac, free)




What really differentiates Linotype FontExplorer X What differs from other programs is the integration of an online store into it, with which you can get acquainted with fonts before making a purchase. That is, you can explore and compare fonts within the online store directly in FontExplorer X, as if they were already installed on your system.

This tool combines the ability to manage fonts, sort them, purchase and get to know the font, all in one user-friendly interface.

You can group your fonts using the library, into folders, tags and smart sets. This makes it easier to view all headsets from one specific manufacturer, all italic fonts or headsets tagged with a specific tag.

Automatic enrollment allows you to choose which applications can request fonts and which cannot. Plugins are also available for such popular graphics programs like Adobe InDesign, Adobe Illustrator and Quark Xpress.

You can see the full set of characters, find out about the legality of using a certain typeface, or simply see, using the example of a few paragraphs, what a particular font will look like in a letter.

Finally, you can enable/disable fonts, clear font cache, view a quick overview about the font family, export font information in image/zip/disk format, search for lost fonts, scan document fonts, and get Growl alert system support.

On this moment The program supports English and German languages. Linotype FontExplorer X is free. The Windows version was released in beta form (not currently available for download), the Mac version is stable.

Main characteristics:

  • Powerful font management tool
  • Built-in online store
  • Automatic registration in the system
  • System integration (Spotlight support)
  • Solution lost files(system auto-registration of fonts throughout the system)
  • Solving the problem of conflicting fonts
  • Scan document fonts
  • Growl Alarm System Support

FontExpert 2007 (Win)




In addition to the usual set of font manager functions, FontExpert 2007 offers the opportunity to assign keywords, categories, ratings and signatures in tag mode, printer output, search for duplicates and damaged fonts, as well as checking the system for errors.

You can also export fonts to HTML and add them to custom context menu Windows Explorer commands Open, Print and Install.

FontExpert can create test text images with detailed settings width, height, color and file format (BMP, GIF, JPEG, TIFF, PNG). The program can sort and print raster fonts, PostScript, TrueType, OpenType fonts.

Using this utility it is very easy to manage any fonts that can be found in the body of the program. You can sort, filter, view fonts, copy, move, delete font files, activate or deactivate fonts, add or link them to font groups (sets).

The program can work with fonts located in Windows folder Fonts and the Psfonts folder (used Adobe program Type Manager), this way you don't have to remove fonts from standard folders, as required by other managers.

Price starts at $59.00. A free demo version is available for download.

Main characteristics:

  • View and preview fonts (installed or hosted on local disks)
  • Assigning tags, ratings, or categories
  • Find duplicate or damaged files
  • Organizing fonts into groups (sets)
  • Activate and deactivate fonts with one click
  • Printing a character table for selected fonts; the ability to create templates with headers and footers manually
  • Checking the system for font errors
  • Export to HTML
  • Automatic activation of lost fonts (includes plugin
  • Missing Fonts Loader plug-in for Adobe InDesign CS2 and Adobe InDesign CS3)
  • Windows Shell Extensions (adds the ability to install into a shell to quickly register a font with the system or print any font from a folder viewed in Windows Explorer)

Advanced Font Viewer (Win)




If you are choosing a font for printed material, you can use the viewer Advanced Font Viewer, display a list of fonts on the printer and choose a font in accordance with the practical requirements of choosing a specific font.

Designers who need to carefully compare samples of several similar fonts can create a selection. Interesting feature This tool is that it allows users to view previously uninstalled fonts and install them again.

You can also print a list with sample text, remove duplicates, and fix font-related registry errors. Export to HTML is possible, and you can also print a list of uninstalled fonts.

Price starts at $49.95. Demo version available.





Option Font Viewerfree utility with open source code, written in Java language. Allows you to view installed and uninstalled fonts, mark your favorite fonts, and preview them as customizable sample text.

Optionion is a very simple, basic font management tool. Its main advantage is that it works on all platforms. That is, if you just need to look at the font, this program may be the best solution.

This tool offers a default view, allowing you to view one font at a time, as well as a list view, which allows you to view many fonts at once.

The list of favorite fonts can then be saved for future work or used when searching for the names of files that you want to install on your computer. To work with Option Font Viewer, you must install Java 1.4.0 or higher.


Font Frenzy (Win, free)




FontFrenzy- Fully functional free software - the pop-up window disappears immediately after a quick registration.

Specific function FrenzySnap allows you to set “restore points” and reinstall those fonts that were on the system in certain moment. DeFrenzy removes all fonts except the original fonts shipped with Windows, or up to previous state systems. You can specify the folder where all deleted fonts will be saved.

Main characteristics:

  • Save a snapshot of your fonts folder as a restore point
  • Easily and effortlessly reinstall fonts to their previous state View a list of fonts at any point size using a custom test phrase
  • View an example of each font in a pop-up window, including all upper and lower case characters and numbers
  • A friendly font manager allows you to add new fonts, delete, and save selected fonts on disk.
  • View all fonts in a specified folder.

Font Xplorer (Win, free)




Font Xplorer can display both installed and uninstalled fonts on local disks. Among others distinctive features programs - rename the file to use the full font name with the option to return the old file name (for example, rename the file arialbi.ttf to Arial Bold Italic.ttf).

I will also note the customizable character table window, which shows all font scripts and allows you to zoom in on any character. You can even copy the symbol to the clipboard as vector image or in RTF format. Among other things, you can filter fonts by encoding to see only character fonts.

Font Xplorer does not support Adobe Type 1 fonts or OpenType fonts with PostScript outlines. It only works with TrueType and OpenType fonts that have TrueType outlines. The application is free.

Main characteristics:

  • View both installed and uninstalled TrueType fonts on disk
  • Printing pre-project, professional proofs and font lists
  • Filtering fonts by character set
  • Integrated Repair Wizard solves most font problems
  • Enhanced On-Call Support external programs. As well as support for various variables in the called command line

MainType (Win)




MainType is a universal font manager that will be useful for both beginners and experienced graphic designers or type designers. In order to choose the fonts that suit your needs, this program equipped with a filter and sorter. Basic information about the font, such as properties, supported characters, font type, etc., is displayed in the information window. The Groups panel helps you quickly group all fonts together.

MainType is one of the drag and drop managers, providing a simple and easy-to-use interface that helps you find, preview, group, install and print your fonts. This application works with TrueType, OpenType, TrueType Collections, Postscript Type 1, vector and raster fonts.

In addition, the program allows you to create short description V HTML format for any font, print reports and export font information. Newest update includes the ability to write test text in the Font drop-down list, character enlargement in the dialog box, and other preset font variables.

Price from $49.00. Demo version is available for free download...

Main characteristics:

  • Preview and view fonts on any disk or folder without installation
  • Full Unicode support
  • Pixel grid with Unicode table navigation
  • Font printing and preview
  • Supports all popular formats and more: TrueType, OpenType, TrueType Collections,
  • Postscript Type 1, vector and bitmap fonts
  • Drag and drop support
  • Font export wizard that generates a summary of all typefaces in HTML format

  • The Font Thing (Win, free)




    The Font Thing is an old classic, but still very popular free program to manage TrueType fonts in Windows environment 95, Windows 98 and Windows NT 4.0.

    With it, you can install and uninstall TrueType fonts, view sample text, individual characters, and detailed information about the font.

    Easy-to-use font management features allow you to install, uninstall, print, copy or delete any number of fonts at once.

    It also allows you to record your personal notes on files, filter them by type (serif, sans serif, etc.) and group them into collections for easy reference.

    The user can rename files to avoid conflicts in their work, and also download them temporarily, without registering them in the system.


    AMP Font Viewer 3.82 (Win, free)




    AMP Font Viewer- a simple free file manager for brief overview both installed and uninstalled fonts. You can install fonts from a folder directly into the system or temporarily (until you close the program). There are also standard options for organizing and managing fonts by category.

    Using this program, you can print a list of all or some of the installed fonts with examples for each of them. The application has a so-called Scratchpad (Draft) for checking how the font looks.

    In addition, all your favorite fonts can be divided into groups and categories. AMP Font Viewer is free software and comes in English and Spanish versions.

    Main characteristics:

    • TrueType, OpenType and Type1 font support
    • Installing fonts from a folder (one at a time or from a list)
    • Temporary installation of fonts (until work with the program is completed)
    • Several options for grouping and managing fonts
    • Print a list of all or some of your installed fonts with examples
    • Scratchpad draft field for review appearance any font (installed or from a folder)

    Font Fitting Room Deluxe (Win)






    An interesting feature of the program Font Fitting Room Deluxe is the Setting ClearType Fonts option. Enable this feature to switch to font smoothing mode, set the ClearType font contrast value, or change the LCD screen scan settings.

    You can also preview your text example by scrolling through the fonts in the list, without necessarily registering them in the system.


    FontAgent Pro 4 (Mac)



    Fontcase (Mac)





    As you know, fonts can be paid And free.

    But there is also a combined option - shareware fonts.

    In such cases, the use of the font is permitted only if certain conditions are met by the copyright holder.

    As a rule, this is an opportunity for free use in personal, i.e. non-commercial purposes. Another option for free use is attribution on the resource using the font.

    Free fonts there are system And non-systemic.

    Set of system fonts, depending on version windows or mac os may vary, but as a rule the standard set looks like this:

    • Arial
    • Arial Black
    • Comic Sans MS
    • Courier New
    • Georgia
    • Impact
    • Times New Roman
    • Trebuchet MS
    • Verdana

    Fonts from this set are also called the most “safe” fonts.

    You are allowed to use free fonts on different media at your discretion.

    Paid fonts come with 2 types of license:

    1. Desktop license

    Ttf files of the font are purchased, installed on the computer and used in graphic editors and for printing. Such a font can be converted into a web font, but this will be considered a violation of the license.

    2. Web license

    In this case, you do not buy a font, but rather rent it and use it on your website. This license comes with 3 types of payment/use:

    • Pay per views ( pageviews)
    • Font subscription on month\six months\year etc
    • Subscription to the tariff. Each tariff may limit the number of views or the amount of time for use

    How to check whether a font is paid or not

    1. Let's go to www.myfonts.com
    2. Enter the font name into the search bar - http://s3. micp.ru/Q48rU. jpg
    3. Click on the desired font in the search results - http://s3. micp.ru/SoG6F. jpg
    4. Click on the tab Licensing - http://s1. micp.ru/vIOm1. jpg
    5. Read the terms of use carefully

    For customers

    If you order work from a designer, then check what fonts the artist used. Read the terms of use for each font. If the font turns out to be paid, then without purchasing a license you will face lawsuits from copyright holders.

    For designers

    Before using a font, also read the terms of use. If the font is paid, then warn the client about this.

    If the client agrees to purchase a license for the font, then write a clause in the work contract about the transfer of all exclusive rights to the final result. Otherwise, a situation may arise when the client is late in paying for the license, receives a claim from the copyright holder and tries to blame you as the performer.

    If the font turned out to be paid and you used it in a project without warning the customer, then you can also expect claims from the client when he receives a claim from the copyright holders.

    More interesting information in my

    Vlad Merzhevich

    The font is an integral part of web design, gives the site expressiveness and recognition, expresses the characteristic style of the site and is directly related to the perception of texts. A well-chosen font may not be noticed, but without it there will be no zest that gives the site design completeness.

    If you already have a specific font installed on your computer, then just add a line to the styles.

    h1 (font-family: SuperPuperFont; )

    The value of the font-family property is the name of the font typeface; it will be applied to all headings

    . But what will website visitors see if our spectacular and rare font is not installed? This situation is most likely, so if the browser does not recognize the declared font, it will use the default font, for example in Windows this is Times New Roman. All our carefully thought out type design will crumble and go to dust overnight, so we need to look for the most universal solution. The first thing that immediately comes to mind is to arrange for the font file to be downloaded to the user’s computer and the text to be displayed in the selected font. Compared to other methods such as displaying text through a picture, this method is the simplest and most versatile.

    What advantages does loading a font file and then applying it via CSS ultimately give us?

    • Text is easy to add and edit.
    • In the browser, you can use the search and find the desired phrases.
    • In the browser settings, you can reduce or increase the font size to achieve comfortable viewing.
    • Search engines They index document content well.
    • Text can be selected and copied to the clipboard, as well as translated into another language.
    • Text parameters like line spacing, color, size, and the like can be easily changed using CSS properties.
    • Again, using CSS, you can simply add different effects to the text, such as a shadow.

    As you can see, there are a lot of advantages. There are also small disadvantages and for balance they are worth mentioning.

    • Not all browser versions support downloadable fonts and one-size-fits-all formats.
    • The file containing the font typeface can take up a large amount of space, thereby slowing down the loading of the web page.

    In table 1 lists the browser versions and font formats they support.

    Table 1. Supported formats
    Format Internet Explorer Chrome Opera Safari Firefox Android iOS
    TTF 9.0+ 4.0+ 10.0+ 3.1+ 3.5+ 2.2+
    EOT 5.0-8.0
    WOFF 9.0+ 5.0+ 3.6+
    SVG 1.0+ 9.0+ 3.1+ 3.5+ 1.0+

    The most supported format is TTF. With the exception of IE up to version 9.0 and iOS, all browsers understand it perfectly. So if your font is in this format and you are focusing on modern browsers, you don’t have to do any additional actions. It is enough to write the following code in styles (example 1).

    Example 1: TTF connection

    HTML5 CSS3 IE 8 IE 9+ Cr Op Sa Fx

    Font



    First, we load the font file itself using the @font-face rule. Inside it we write the name of the font typeface through the font-family parameter and the path to the file through src . Then we use the font as usual. So, if we need to set the title font, then for the h1 selector, as shown in the example, we set the font-family property with the name of the loaded font. For older versions of IE, we list fallback options separated by commas. In this case, the title font will be "Comic Sans MS", since IE8 and below do not support the TTF format.

    Result this example shown in Fig. 1.

    Rice. 1. Header with loaded font

    What to do if you desperately need a florid font in IE8? Fortunately, @font-face allows you to include multiple font files of different formats at the same time. The browser just has to choose the appropriate one. Thus, a universal solution that works in all browsers comes down to converting the existing TTF format to EOT and then connecting both files.

    For conversion, there are several online services that allow you to upload a TTF file and receive an EOT file as output. Unfortunately, most of these services have the same problem - we receive the file, but the Russian language is not supported. As a result, the desired result is not achieved, the conversion occurs incorrectly. Among the sites I checked, there was one that displayed the text correctly in IE.

    We go to this site, download the TTF file and click the “Convert TTF to EOT” button, after which we save the resulting file to the folder with fonts. In styles, it remains to perform a small trick and force different browsers load font into in the required format. To do this, we add two src parameters. The first one points to the EOT file and is intended for older versions of IE. The second src parameter must contain two comma-separated addresses, one of which points to the TTF file. The fact is that IE versions 8.0 and earlier do not understand the comma in the src parameter and, accordingly, will ignore the entire parameter. There can be several writing options, for example, repeat the url, specify the font name inside the local parameter, or even write a non-existent font. If the browser cannot load such a font, then it will go to the second one in the list, and we have it written correctly. Acceptable writing methods.

    src: url(fonts/pompadur.ttf), url(fonts/pompadur.ttf);
    src: local(pompadur), url(fonts/pompadur.ttf);
    src: local("bla bla"), url(fonts/pompadur.ttf);

    A working option for connecting a font for all browser versions is shown in example 2.

    Example 2: EOT connection

    HTML5 CSS3 IE Cr Op Sa Fx

    Font

    Modern element political process

    In fact, Montesquieu’s political teachings bring forward the continental European type of political culture, which was reflected in the works of Michels.



    As for iOS, make and download a separate font in SVG format It doesn't seem to make much sense to me. The audience of sites viewing it via iOS is still small, and besides, the version of the site is for mobile devices They are trying to make it easier, and it is not advisable to download an additional few tens of kilobytes.

    Google Web Fonts

    A convenient service that takes care of the routine of supporting different font formats and browser versions can be found at www.google.com/webfonts. Although there are relatively few different fonts in the collection (there are several dozen), they are all selected very high quality and are free for use on websites.

    Before selecting a font, switch the Script value to Cyrillic, then you will see a list of fonts that support the Russian language (Fig. 2).

    Rice. 2. Selecting fonts in Google Web Fonts

    The font you like must first be added to the collection by clicking on the “Add to Collection” button, and then on the “Use” button in the lower right corner of the screen. On the next page (Fig. 3) you can finally select the fonts you need. At the same time, you need to understand that a font typeface can contain several styles and each of them increases the volume of downloaded files.

    Rice. 3. Fonts loaded on the page

    You can connect the selected fonts in one of three ways; the added code can be copied below the page.

    1. Via element . The line will look something like this.

    2. Through the @import rule. We insert this line into our CSS file at the very top.

    @import url(http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic);

    3. Through JavaScript.

    In principle, all paths are equal, so choose according to your preference.

    The advantages of using this service are as follows.

    • The fonts are free to use, you don't have to pay for them.
    • The offered fonts are “sharpened” for viewing on the screen, the files are optimized and occupy a relatively small volume.
    • The browser is detected automatically and the font in the required format is provided for it.

    One of the main advantages of the service is that fonts are stored in TTF, EOT, WOFF, SVG formats and are loaded after checking the browser. Thus, the EOT format will only be available for older versions of IE.

    Whether you use Google Web Fonts or not is up to you. If you don’t find a suitable font there, you can always connect the popular and widespread TTF. Moreover, it is supported latest versions all popular browsers.

    If you are looking for how to install a font, then most likely you know why it is needed. Let me guess - you are making a card for a wedding, and you want the congratulations to look exotic, and not standard font Times New Roman (or worse - Comic Sans). Or maybe you are creating a resume and need to highlight the title in a special font. One way or another, two questions arise in connection with fonts:

    • Where to download a beautiful font;
    • How to install a font.

    Where to download a beautiful font

    Here are several services where you can download a variety of fonts:

    What’s convenient is that on these services you can immediately see what the font looks like.

    How to install a font

    In fact, installing the font is a simple matter. In general, fonts are stored in the folder C:/Windows/Fonts(it is hidden by default). But the system provides standard way installing fonts through the interface.

    There is a separate section in the control panel "Fonts". By dragging any downloaded font (file in ttf format) into this “folder”, you will see it in the list of fonts, for example, in Photoshop. Below I showed this whole “process” on.

    And as you can see, our font has successfully appeared in the list of Microsoft Word fonts