Adding a new font to a website is not the easiest task. Where to choose, download and how to add a font to a website in CSS? In this article we will show one of the most convenient ways to install and connect the font to the site.
How to include a font on a website in CSS
For example, we have a font Raleway.ttf and we want to use it in all headers( h1) of our website. To do this, perform the following steps:
h1 ( font-family: "RalewayRegular"; }
Now all 1st level headings on the site are displayed in the font we need.
If you want to connect several fonts (or their styles), then simply add them under the previous one:
@font-face { font-family: "RalewayRegular"; src: url("../fonts/RalewayRegular.ttf" ) format( "truetype"); font-style : normal; font-weight: normal; } @font-face{ font-family: "RalewayBold"; src: url("../fonts/RalewayBold.ttf" ) format( "truetype"); font-style : normal; font-weight: normal; }
You may have noticed that there are different font formats - .ttf, .woff, .eot, .svg etc. There is also a format for modern browsers. woff2, but we will talk about it in one of the following articles. Typically, each font is included in 3 formats at once. This is done so that the font is displayed correctly in all browsers, including. and old ones. It looks like this:
@font-face { font-family: "RalewayRegular"; src: url( "../fonts/RalewayRegular/RalewayRegular.eot") ; src: url( "../fonts/RalewayRegular/RalewayRegular.eot?#iefix") format("embedded-opentype" ), url( "../fonts/RalewayRegular/RalewayRegular.woff") format( "woff"), url( "../fonts/RalewayRegular/RalewayRegular.ttf") format( "truetype"); font-style : normal; font-weight: normal; }
Here follows Pay attention to the connection order - this is important!
We will not go into details, just remember the appearance of this design.
If you have a font in only one format, then use different font converters. Here is one of them.
How to connect a font using various services
You can also use the fonts4web service to connect fonts: 
The easiest way to connect fonts
How to connect a font to a Moguta CMS template 
How to add a link with Google fonts to a Moguta CMS template
Now you know how to add a font to a website using CSS and more. We will be happy to answer all your questions Nowadays, you can increasingly find websites that use non-standard fonts. This matches modern web design, where creativity is prioritized over readability. Of course, such a combination does not happen often, but it does happen. On English resources, non-standard fonts are quite popular. Here, for example, look in the original, that is, in the author’s native language. And we will see how unique fonts are used in almost every third theme.
From the author: “Before writing this article, I leafed through quite a lot of information on the topic “Fonts”. And I very clearly remembered one point: many people speak negatively about connecting non-standard fonts. More precisely, they don’t recommend it, they say it’s wrong, it’s a heavy load, and the like.
In fact, such a statement is in many cases regarded as imposing one’s own opinion, or even conveying someone else’s opinion from oneself. It is worth noting that absolutely any additional connection puts a load on the site, following this argument, you can safely demolish half the site. If there are more compelling arguments in favor of abandoning fonts, then yes, please... otherwise... it is necessary to experiment.”
What does custom font mean?
This is a font that is not available by default in software (Windows, Linux, etc.). Consequently, if the user does not have the appropriate font in his software, he will automatically use the standard font from the system. This violates the author’s original idea of conveying the desired character of the design.
Connecting your fonts to the site
The font connection occurs through the @font-face rule in the CSS cascading table. This includes: typeface, relative or direct path, and checking for font presence in the user software. This whole structure looks like this:
@font-face ( font-family: namefont;/*typeface*/ src: local("namefont"),/*check*/ url: (font/namefont.ttf);/*path*/ )
Explanation: The font-family property specifies the font family, and src: local checks for the reader's font installation. But the possibility that the font will be installed occurs once in a million. Therefore, the “check” line is not so mandatory, but the last url “path” must certainly be present (since this is the path to the font itself, which will be loaded directly on the site).
Cross-browser font compatibility
Browser support should be mentioned as inconsistencies may occur. All popular browsers, latest versions, work perfectly with connecting fonts in the format ttf. And speaking of later versions, in particular IE, as well as devices from Apple, there may be difficulties. This problem is solved by special services that allow you to generate a font format for each browser separately.
In my opinion, this is an absolute necessity. Let me explain: IE below version 10 already requires additional actions. But the percentage of its use is very small. As for Apple mobile devices, it all comes down to minimalism. definitely should be faster and easier than normal.
| Format | Explorer | Chrome | Firefox | Safari | Opera | iOS | Android |
|---|---|---|---|---|---|---|---|
| TTF | 9.0+ | 4.0+ | 3.5+ | 3.1+ | 10.0+ | X | 2.2+ |
| OTF | 9.0+ | 4.0+ | 3.5+ | 3.1+ | 10.0+ | X | 2.2+ |
| EOT | 6.0+ | X | X | X | X | X | X |
| WOFF | 9.0+ | 5.0+ | 3.6+ | 5.1+ | 11.1+ | 5 | X |
| WOFF2 | X | 36.0+ | 35.0+ | X | 26.0+ | X | X |
| SVG | X | 4.0+ | X | 3.2+ | 9.0+ | 3.1+ | X |
Font formats
Fonts, like many other files, have different extensions (formats). In a brief review, we’ll look at which ones…
TTF (TrueType Fonts)– the most common font format in operating systems. It was developed back in the late 80s, according to one source, by Apple, and in another, together with Microsoft. Most often, this font format is used to connect to a web page. Based on the support of all popular browsers for the latest versions.
OTF (OpenType Fonts)– modification of its predecessor (TrueType) with more advanced capabilities. More characters and less weight. It was officially introduced in 1996 by Adobe and was developed jointly with Microsoft.
WOFF (Web Open Font Format)– created on the basis of the first two fonts with some changes.
WOFF 2.0 (Web Open Font Format)– minor changes in compression.
EOT (Embedded OpenType)– created by Microsoft in 2007 exclusively for Internet Explorer browsers.
SVG Fonts– support for iOS Safari.
Font conversion service
But still, there are different cases, and if you need to support the font in all browsers and devices, you will have to resort to services.
Step 1.
Step 2.
On the left in the script, select the Cyrillic alphabet.
Step 3.
Decide on the font choice and click on the “quick use” icon.
Step 4.
The opening page contains information broken down into steps:
1. Select a font style (normal, bold, etc.);
2. Select support (Latin, Cyrillic, etc.);
3. Connection methods (more details below);
4. Font integration.
Step 5.
In the last step, we will look at connection methods. In fact, everything is very simple. Each of the three methods is a separate code that is connected in its own way depending on the choice.
1. Standard connection via a tag is usually written between tags
(WordPress file: header.php).2. Importing into a cascading table via the @import rule (WordPress file: style.css).
3. Connection via JavaScript in a separate file or also between tags
.After connecting, you will only need to specify the font typeface in styles.
Font-family: "Comfortaa", cursive;
That's all! I hope you found something useful in this material for yourself. If you have any questions, please ask them in the comments, don’t be shy).
Most text elements default to Times New Roman. There is an option in CSS to install other fonts. You can also include a font in CSS that was not originally provided in browsers. In this topic we will look at how to do this.
Font families
Fonts are divided into families. The following font families exist:
serif - serif
sans-serif - sans serif
monospace - monospace
cursive - cursive
fantasy - decorative
Safe fonts
There are quite a lot of fonts. The difficulty in using them is that each operating system has its own set of fonts. Additionally, different browsers may not display all fonts. If a text element is set to a font that is not available on the user's computer's operating system, the text will be displayed in some other font. Fonts that are displayed on all computers and in all browsers are called safe fonts. It is believed that there are no absolutely safe ones. But still, there are a number of fonts that the vast majority of users have. The following are safe fonts and their families.
Times New Roman, serif
Arial, sans-serif
Verdana, sans-serif
Tahoma, sans-serif
Impact, sans-serif
Trebuchet MS, sans-serif
Courier New, monospace
Comic Sans MS, cursive
You can find other fonts if you type in any search engine: standard fonts.
Setting the font
To change or include a font in CSS, use the font-family property. The value of this property is the name of the font. For example, let's create a paragraph and set the font for it:
Style:
The font-family property allows you to specify multiple fonts separated by commas. You can also specify a font family. In this case, the font specified first will be used. If this is not the case, then the next font is used, and so on. Basically, this is what they do on real pages. This is done to ensure that the page will display as expected.
15 |
div (font-family: Tahoma, Verdana, sans-serif; ) |
How to include a custom font in CSS
In addition to the fonts contained in the user's operating system, other fonts can be used. You can find them on the Internet or create them yourself. There are many custom fonts. To find them, you need to write fonts in a search engine. The font file needs to be downloaded and attached to the page. When choosing, you need to take into account that some fonts are paid. There should be information about this on the page from which you download the font.
The difficulty with using custom fonts is that each browser supports a different set of formats. Therefore, when using a non-standard font, you need to check how the page is displayed in different browsers. There are a lot of font formats. The most universal is the woff format. It should work in most modern browsers.
To include a non-standard CSS font, use the @font-face rule. It must contain two properties: the font-family property specifies the name of the font under which this font will be used on the site. You choose the name yourself. And the src property specifies the path to the non-standard font file. After this, the font can be used for any selector. In the font-family property you need to indicate the name you have chosen for the font.
For example, I'm using a font file called unineue.woff. It is located in the same folder as the page. I'll call the font Nfont.
Many designers who create serious and interesting layouts have a ton of unique and beautiful fonts available. Thanks to such fonts, the design gets its zest and exclusivity. However, non-standard fonts will only be displayed on the computer on which they are already installed, so in order to work with them properly, the designer must provide you with all the fonts that he uses in his layout. Because when laying out the layout, you will have to install these fonts on your computer. But the user of your site will not download all the fonts and will not install them on his computer, so you need to make the browser pull up the necessary fonts itself. The rule will help here, there are also options to use Cufon or load fonts from Google Webfonts or Fontsquirrel, but Google Webfonts and Fontsquirrel may not have a font needed, so let’s consider the best option - connecting unique fonts using @font-face.
The easiest way to connect a font is to write it in the style sheet:
@font-face ( font-family: "PF Din CompPro"; src: url("fonts/pfdintextcomppro-medium-webfont.ttf"); ) body( font-family: "PF Din CompPro", Arial, sans-serif ; )
Here 'PF Din CompPro' is the name of the font, and then you can specify this font for the necessary elements of the site, and fonts/pfdintextcomppro-medium-webfont.ttf is the path to your font, which is in the fonts folder, it is important that in the name there were no spaces in the font file, it is better to replace them with a dash.
This is the easiest way, but it doesn’t work in all browsers, and this is a big problem.
Each browser supports its own font formats:
TrueType Fonts for Firefox 3.5+, Opera 10+, Safari 3.1+, Chrome 4.0.249.4+
EOT fonts for Internet Explorer 4+
WOFF fonts for Firefox 3.6+, Internet Explorer 9+, Chrome 5+
SVG fonts for iPad and iPhone
Therefore, from one of your fonts in the .ttf format, you will have to make several more of the same fonts only in a different format. This is where the font generator at fontsquirrel.com can help. On this page, download your font, select the Optimal settings, check the checkbox confirming the legality of the downloaded font (some fonts cost a lot of money and you must have permission to use them), then click the “Download Your kit” button and you will receive the desired archive with all your font formats.
From the archive, download all the formats of your fonts, in theory these are 4 files with the extensions .eot, .svg, .ttf and .woff, copy these files to the fonts folder on your website, the archive will also contain the file stylesheet.css - it contains All the rules for connecting fonts will already be written down, you can safely copy them into your style sheet, just don’t forget to indicate your paths to the font files, for example, to the fonts folder. An example of what happened on one of my sites:
@font-face ( font-family: "PF Din CompPro"; src: url("fonts/pfdintextcomppro-medium-webfont.eot"); src: url("fonts/pfdintextcomppro-medium-webfont.eot?#iefix" ) format("embedded-opentype"), url("fonts/pfdintextcomppro-medium-webfont.woff") format("woff"), url("fonts/pfdintextcomppro-medium-webfont.ttf") format("truetype" ), url("fonts/pfdintextcomppro-medium-webfont.svg#pf_din_text_comp_promedium") format("svg"); font-weight: normal; font-style: normal; ) body( font-family: "PF Din CompPro", Arial, Tahoma, Verdana, sans-serif)
With these parameters, fonts are displayed in any browser, including everyone’s favorite IE-7-8-9.
If you use non-standard fonts for the Cyrillic alphabet, i.e. for Russian characters, and the font is not displayed correctly on the site, then perhaps generating a font with advanced settings will help, download the page http://www.fontsquirrel.com/tools/webfont-generator your font and select “Expert” settings. There are a lot of settings there, I don’t know everything, but read carefully and select the ones you need, and to support the Cyrillic alphabet, select in the Subsetting block: section Custom Subsetting... and check the Cyrillic checkbox, and also check the languages and formats you need.
Here's an example of what I got: 
In the next project, I once again see headings and menus in a non-standard font. Make it with pictures? Sucks: awkward, inflexible, slow. Flash? I can't stand him. Javascript? The best solution for now, of course, but it’s still a crutch that reminds us of the limitations of browsers. It's time to dig into the standards: what they offer and where it already works.
The note
A custom font, in contrast, is a font that is likely to be missing from most site visitors.
Task
Implement a custom font without using images, javascript or flash. We use only the latest advances in .
Solution
But for IE it’s not so simple. Although it was the first to support the implementation of third-party fonts (since 1997 with the release of Internet Explorer 4th version!!!), it requires a special format for the font - EOT (Embedded OpenType). The EOT format solves two problems at once:
- compresses the font file, making its weight several times smaller (judging by the tests of colleagues, this method compresses better than RAR, ZIP, and gzip methods)
- encrypts the file: information is written to the font file where it should be used. This font will not work outside of this address.
As a result, connecting the font in styles will look like this hack:
/* only for Internet Explorer */ @font-face ( font-family: Scriptorama; src: local("Scriptorama"), url(path-to/Scriptorama.eot); ) /* further for all other browsers */ @ font-face ( font-family: Scriptorama; src: local("Scriptorama"), url(path-to/Scriptorama.ttf); ) [...] h1 ( font-family: Scriptorama, arial; font-weight: normal;
Instead of a hack, you can use .
update 23.08.11 A more complete font embedding syntax that takes into account some possible IE bugs and greater browser support:
@font-face ( font-family: "JournalRegular"; src: url("journal-webfont.eot"); src: url("journal-webfont.eot?#iefix") format("embedded-opentype"), url("journal-webfont.woff") format("woff"), url("journal-webfont.ttf") format("truetype"), url("journal-webfont.svg#JournalRegular") format("svg "); font-weight: normal; font-style: normal; )
The note
update 10.11.10 In IE local may not work. Moreover, because of it, the font may not be connected at all. In our projects we pay attention to this point: if it doesn’t work, we simply remove it for IE local.
Advantages:
- flexibility - the site owner can change any texts as he pleases;
- fast loading speed - a minimum number of external files with any amount of text in a non-standard font;
- maximum speed of the site - zero additional elements in the DOM structure, zero scripts and flash objects slowing down the site;
- the text behaves like text (after all, it remains text), i.e. stands out, responds to changes in color, boldness, style, etc., ideal SEO;
- Quite simple implementation even taking into account font optimizations.
Flaws:
Font compression and conversion
If the font developers tried to please everyone, then the font will most likely contain many, many characters and, accordingly, weigh many, many. So the Arial Unicode MS font contains 51 thousand characters and weighs more than 23 megabytes! It's time to think about whether the site will use Udmurt or Finno-Ugric languages? And also various additional symbols, punctuation marks and numbers? You should also pay attention that each font has a certain number of styles: regular, italic, bold, semibold. A font can contain up to 9 types of boldness (remember the acceptable values).
What to do
We exclude from the font everything that is not needed to achieve the task. For example, if the font is used only for the menu, then punctuation marks, various additional symbols, and numbers will be superfluous.
How to do
The following may help with this:
Online service @font-face Generator
What can:
- two operating modes: Easy - for those who don’t want to delve into it and Expert - for maximum optimization
- different formats of results and it’s in one place! Those. no need to first compress True Type for all browsers, and then separately convert to EOT for IE
- various options for obtaining results. Right down to protecting the font from local use and the file for Cufon!
- precise selection of characters for a compressed font. You can specify the language and a set of additional characters, or you can specify the range of characters used, or simply list the characters that are needed, or use a symbiosis of all methods
- for those who are weak in CSS, even style rules will form
For the experiment, I compressed a 145Kb font with the “Use for menu” test task. I left only small Russian letters. The final font size was 8Kb. Amazing!
Flaws:
- EOT is generated without being tied to a specific domain (for serious projects you will still have to do EOT separately)
- not all licensed fonts can be processed (this is a relative disadvantage)
Impression- fantastic, excellent, super-duper, amazing!!! I'll get myself a PayPal to make a Donation.
Web Font Optimizer
An online service that allows you to leave only the necessary characters. Works .
Pros: simple and clear. The result is a True Type compressed font, an EOT font for IE and CSS code for connection.
On the downside: the service is only available for a strictly fixed list of fonts that they have on their website.
WEFT
Software from Microsoft. Helps convert font to EOT. Plus makes it impossible to use the font outside the specified site. You can download and get acquainted in more detail on the page dedicated to the script.
TTF2EOT
From the name it is clear that it converts a font from TTF to EOT. It works locally via the command line, which in itself is not convenient. You can download the script and read more about it on the project website.
Online Font Converter
Easy to use, allows you to convert licensed fonts. Available.
Disadvantages: registration is required.
What about font protection?
If the font is of high quality, it is developed by high professionals, often by a team of professionals, often for more than one month. Such a font can cost no less than “Zhiguli” from the assembly line. Font developers began to register them as trademarks, securing the rights of the copyright holder to the font at the level of industrial property protection.
Those. To use a font on the web, the site owner must purchase the font with the right to use it on the web. But acquisition is half the problem. The font also needs to be protected from illegal copying. There are almost no such problems if the licensed font on the site is implemented with pictures or using Javascript. But if you implement it via @font-face, the font is openly located on the server, which any user can download. And this already threatens lawsuits.
The note
For millions of small sites, the illegal use of fonts can and will pass without consequences, but cool, commercial, especially international projects should seriously think about purchasing licenses.
How to protect a font?
For IE, this problem was solved immediately - the EOT format encrypts the file. As a result, we have a font that will only work within this site.
