If you are a designer or webmaster, you most likely know how to incorporate CSS fonts. If you are the owner of a small blog and decided to decorate your resource and make it unique, then this knowledge should help you. But it’s better then to start from the very beginning, to understand what cascading style sheets are, where to get fonts and where to install them.
Description
So, the answer to how to connect the CSS font to the site must begin with a description of the formal language itself. CSS is a cascading style sheet. This language is used as a description of the appearance of the document. It functions in tandem with the markup language.
CSS is working to point out the visual features of pages on the Internet. The latter should be based on special markup languages HTML or XHTML.
Using
Who needs CSS? Connect fonts, set colors, arrange blocks, etc. is necessary for webmasters, programmers who work on creating a site. The main task of cascading style sheets is to visually separate the structuring. That is, if HTML forms a solid block of text, then CSS helps to conditionally “decorate” this block, highlight elements, assign parameters.
Separation provides document accessibility, greater flexibility, and control. Allows you to get rid of complex and repeatable content elements.
Connection
Before you understand how to properly attach fonts to CSS, you need to understand how cascading style sheets are synchronized with the file. Their rules are implemented in the language of the same name. The stylesheet itself has acquired CSS rules, which it uses. Tables can be in a visually editable document, or in a separate file with the extension .css. Such a file usually contains only commands and notes to them.
So it becomes clear that style sheets can be connected in several ways. Let's consider them further.
Methods
There are four options that can help you connect CSS fonts, assign a hue, define blocks, and so on. As mentioned earlier, a set of rules can be in a file written in HTML. But this option is not liked by many designers. This is caused by the fact that then in the entire canvas of the teams it is difficult to find describing parameters and manage it all. It’s much easier to assign styles in a separate document.
If CSS is located separately, they are connected via the <link> tag. It needs to be placed inside <head> and </head>. In this note, you need to specify the href attribute, which will show the address of the file with CSS.
If the commands are again compiled as a separate file, we connect them to the web document using the @import directive. It must be written between the marks <style> and </style>. Immediately after <style> we place the directive and in brackets, following the url, indicate the link to the file with CSS. In both cases, the rules will apply to the entire document.
The following two methods relate to the situation where CSS is placed directly in the document that you want to “decorate”. The style sheet in this case may be between the marks <style> and </style>. And the fourth way involves placing the rules at the heart of one of the tags, through the style attribute. Then the rules will affect a separate parameter, which is within the boundaries of a certain text.
The first two methods marked the emergence of external style sheets, and the second - internal.
Fonts
What are fonts used for? Of course, every site owner wants his resource to look not only beautiful, but also unique. I would like to place special elements on the pages that could stand out among all. You also often notice headlines or custom-writing menus.
There are many questions about this. Perhaps the webmasters used the picture drawn in Photoshop. Maybe this option appeared thanks to Flash. There is an option that used Javascript. But as practice shows, the first option is inconvenient and slow, the second is outdated, and the third is too confused. To create something new and beautiful, you can try connecting CSS fonts.
The properties
It should be understood that in our case fonts are not only a certain style, but also a set of a number of properties that are needed to control the appearance of the text. You can use several options. Assign a specific font to the heading, paragraph, quote, body text, menu, etc.
Despite the fact that the user has access to a huge variety of styles, sizes, saturations, etc., it is important not to forget about readability. It is better to avoid a big pile of different styles. Two fonts on the page will be enough.
Families
To be able to choose the font style, use the font-family family. It is very difficult to unambiguously understand whether there is a certain font on the PC of the reader of your resource, it is better to enter all the options of the same type. In this case, the web browser will select one that is found in the user's system.
This family has a number of meanings. For example, family-name is represented by the name of the font family. The generic-family value defines the five main font families.
The font-style family is responsible for the choice of style. This style is as inherited as the previous one. Among the values there is a regular or oblique style and italics. The font-variant style is responsible for small caps. For saturation use font-weight, etc. The font can be assigned a size and color.
Custom Solution
In addition to standard fonts, you can use non-standard solutions. Usually they are more unique and, most likely, you will not notice them on the websites of competitors. You do not have to use pictures, javascript and flash for this. It will be enough to take the @ font-face rule. It allows the user to load an external file into a document.
This method makes it possible to connect the CSS font OTF and TTF. These are special formats that do a good job of such tasks. Problems can only occur with Internet Explorer. Despite the fact that he first started using third-party fonts back in 1997, now he has strict requirements.
He does a lot to ruin your work. It can often compress a file with a font, sometimes it can encrypt it. Therefore, various kinds of hacks occur.
Formats
Now there are several font formats that you need to know. Otherwise, you will encounter a number of inconsistencies and incompatibilities. You can connect the CSS TTF font. This format is now supported by all web browsers. An exception may be Internet Explorer version 8 and below, as well as Opera Mini 5.0-8.0.
Only IE can work with EOT. The situation with WOFF is the same as with TTF. But SVG operates in Chrome browsers up to version 37, as well as Safari, iOS Safari, Android Browser. As practice shows, it is best to use TTF. This is the most versatile option that rarely causes problems. He is the most common.
The rule
So, to connect the font of one of the above formats, it is enough to use the @ font-face rule, which we talked about earlier. To make it clear, you need to follow a specific algorithm. You have a font.ttf font file. To use it for the main text, you first need to copy the file itself in the folder where all the site files are located.
If you want to use more than one font, you can create a special folder here in which you will load them. So it will be much easier for you to find them and change the contents of such a folder.
Now we need to make the browser load our font on its own. To do this, give him guidance. We use the @ font-face directive. Our team will look like this:
@ font-face {
font-family: MyUniqueFont;
src: url ('fonts / font.ttf');
}
The font-family team is responsible for ensuring that the font gets its name and after that it can be used in style writing. The second line contains an indication of the path by which the browser should find the style and connect it. This is not a universal address. Depending on where you put the font file, this path will also differ. This will show you how to include a CSS font from a folder.
Connections
If you don’t know how to connect multiple CSS fonts, there’s also an instruction for this. It allows you to specify multiple files at once. For example, they can be connected with a dozen. To do this, you must use the above @ font-face rule. Following the example of how you previously connected one file from a folder, in the same way specify links to other font options from a new line.
If your site is based on WordPress, connecting styles is even easier. When you need to replace the heading, just log in to the admin panel. There, look for "Theme Settings." In the section "Printing" will be a list of various options. You only need to select and save the change.
Other options
Very often, they use the Google Fonts service to connect fonts . This is a popular tool for selecting and connecting styles. There is a huge number of font sets. To connect them, just go to the official website.
You will see a whole list with examples and the opportunity to experiment. After you add the desired style, do not forget to select the Cyrillic alphabet if your resource is in Russian. Then it will be possible to choose the size, style or immediately select several options for all occasions.
After that, you will have the code ready to be installed in the CSS file. In this case, the rule of adding methods also applies. For example, if the style sheets are presented as a separate document, then we send the command to the first line. If your stylesheets are located directly in the HTML file, then you need to add it to the body of the <style> and </style> tags.
conclusions
Adding new fonts to your site is easy. It is important to decide immediately on the methods and options. Depending on what system your site is located on, you need to think through these actions. If you have a self-written resource, there are few options in this case. If, for example, on WordPress, then this operation is much simpler than it might seem.