css font connection ttf. Set fonts in css

Fonts play a huge role in website design. The same text written in different fonts can produce opposite impressions on a person.

See for yourself:

Some fonts look more convincing, others more intriguing.

But how to connect any fonts to the site and apply them wherever you want?

In this article I I will show you 3 ways, with which you can connect any, the most diverse and non-standard fonts to your site. And it doesn't matter which CMS you use: WordPress, Joomla, Drupal or Open Cart.

You will see that there is nothing complicated in connecting fonts to the site.

You will learn:

Method number 1. Quick connection of fonts to a WordPress site (difficulty: ⭐ ⭐ ⭐)

If a premium theme is installed on your site, you can connect fonts in 2 minutes.

For example:

You want to change the font of your article titles. For this:

1. In the admin panel, go to the Theme Options section. Depending on your template, this section may be called a little differently, but the meaning is always the same - "theme settings".

2. Go to the Typography section.

3. Select the element whose font you want to change (headings, paragraphs):

If your site is running on a different engine, or your theme does not provide such settings, go to the next method.

Method number 2. Use the power of Google Fonts
(difficulty: ⭐ ⭐ ⭐ ⭐)

Have you ever heard of Google Fonts? In short, this is a service with which you can connect more than 700 fonts to your site.

Step 1. Go to the official website of the service.

Step 2. Find the fonts that suit you in the Google font collection. In the right menu, you can narrow the circle by setting the language, style and popularity of the font:

In order for the service to show fonts with support for the Russian language, select Cyrillic in the Languages ​​item.

Step 3 Let's say you like the Roboto font. Click on the "+" icon:

You can add any fonts by clicking on the "+" sign.

Step 4. After that, you need to expand the basket with the selected fonts:

By going to the Customize tab, you can choose styles and languages. Regarding styles, I advise you to choose a standard set - normal (400), italic (400 italic), bold (700) and italic-bold (bold 700 italic):

But if you only want bold (for headings), choose only that.

Remember, the more styles you choose, the larger the size of the uploaded file will be.

In order not to slow down the loading speed of the site, choose as few font styles as possible.

Step 5. Return to the Embed section and select the @IMPORT tab. Next, copy the line of code containing "@import" and paste it on the first line of your site's CSS file:

If you have a WordPress site, the CSS file is most likely located here: wp_content/themes/"yourtheme"/css/... In the CSS folder, there will most likely be a Fonts file, where you need to transfer the embed code from Google:

It doesn't matter what CMS your site is running on, just paste the code and everything will be 👌

Since the fonts must be loaded first, only then everything else - place the font connection code at the very beginning of the CSS file.

You can define the font for certain elements of the site in the same CSS file.

For example:

To give the Roboto font to all paragraphs, I'll write the following: p ( font-family: Roboto;)

Method number 3. Custom font connection using CSS (difficulty: ⭐ ⭐ ⭐ ⭐ ⭐)

If you're skilled enough, your best bet is to include the fonts yourself via CSS. In this case, the fonts will be located on your server in a special folder. But first you need to get them somewhere.

Where to get web fonts for the site

Did you know that you need to buy a separate license to use web fonts?

Connect fonts with a free license. The easiest way to find them is with the Fontsquirrel service, which we will do.

Step 1. Go to the official website of the service

Step 2. In the right menu, in the Languages ​​section, select Cyrillic.

Step 3. Find a suitable font. Pay attention to the number of fonts.

For example, if there are 4 styles, 4 Styles will be written:

Designation of font styles - normal (400/regular), italic (italic), bold (700/bold), bold italic (700 italic).

Step 5. Click on the name of the font and go to the settings page.

Step 6. Go to the Webfont Kit section. Select all font formats and click on Download @FONT-FACE KIT. If only 1-2 formats are available, it's not scary.

To include fonts, use @Font-face

Through the @font-face directive, you can include one or more fonts to your site. But this method has its pros and cons.

Pros:

  • Through CSS, you can include fonts of any format: ttf, otf, woff, svg.
  • Font files will be located on your server - you will not depend on third-party services.

Minuses:

  • For the correct connection of the font for each style, you need to write a separate code.
  • Without knowing CSS, it's easy to get confused.

You can just copy my finished code and where you need to put your values.

Step 1. Transfer the downloaded font files to your site. This can be done through your hosting control panel or via FTP.

I suggest creating a fonts folder in the same directory as your CSS file. Move all font files to this folder.

Step 2. Write the following entry at the very beginning of the CSS file:

@font-face(
font-family: "MyWebFont";
src: url("../fonts/WebFont.eot");
src: url("../fonts/WebFont.eot?iefix") format("eot"),
url("../fonts/WebFont.woff") format("woff"),
url("../fonts/WebFont.ttf") format("truetype"),
url("../fonts/WebFont.svg#webfont") format("svg");
font-weight: normal
font-style: normal
}

Where MyWebFont is the name of the font, and the value of the src property (data in parentheses in quotes) is their location (relative links). We need to specify each style separately.

Since we first include a normal font, we set the font-weight and font-style properties to normal.

Step 3. When connecting italic style, write the following:

@font-face(
font-family: "MyWebFont";
src: url("../fonts/WebFont-Italic.eot");
src: url("../fonts/WebFont-Italic.eot?iefix") format("eot"),
url("../fonts/WebFont-Italic.woff") format("woff"),
url("../fonts/WebFont-Italic.ttf") format("truetype"),
url("../fonts/WebFont-Italic.svg#webfont") format("svg");
font-weight: normal
font-style: italic;
}

Where everything is the same, only we gave the font-style property the value italic.

Step 4. To enable bold style, add the following code:

@font-face(
font-family: "MyWebFont";
src: url("../fonts/WebFont-Bold.eot");
src: url("../fonts/WebFont-Bold.eot?iefix") format("eot"),
url("../fonts/WebFont-Bold.woff") format("woff"),
url("../fonts/WebFont-Bold.ttf") format("truetype"),
url("../fonts/WebFont-Bold.svg#webfont") format("svg");
font-weight: bold;
font-style: normal
}

Where we set the font-weight property to bold.

Be sure to specify the correct location for the font files for each style.

Step 5. To enable bold italic type, write the following:

@font-face(
font-family: "MyWebFont";
src: url("../fonts/WebFont-Italic-Bold.eot");
src: url("../fonts/WebFont-Italic-Bold.eot?iefix") format("eot"),
url("../fonts/WebFont-Italic-Bold.woff") format("woff"),
url("../fonts/WebFont-Italic-Bold.ttf") format("truetype"),
url("../fonts/WebFont-Italic-Bold.svg#webfont") format("svg");
font-weight: bold;
font-style: italic;
}

Well, that's it :) You've just added 4 font styles to your site.

But there is one note - this connection of fonts will not be displayed correctly in the Internet Explorer 8 browser. The consolation is that there are very few of them left.

How to connect fonts for sites on different CMS

It doesn't matter what engine your site is on (WordPress, Joomla, Drupal, Opencart) - if you have access to the CSS file, you can connect the fonts either through Google Fonts or by uploading them to your server through Fontsquirrel.

Well that's all. If you think that this article may be useful to other webmasters, please share it on social networks.

As well as:

Subscribe to my newsletter so as not to miss useful and interesting blog posts.

Many designers who create serious and interesting layouts have tons of unique and beautiful fonts available. Thanks to such fonts, the design gets its zest and exclusivity. But non-standard fonts will only be displayed on the computer on which they are already installed, therefore, in order to work properly with them, 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 for himself and will not install them on his computer, so you need to make the browser pull up the necessary fonts on its own. The rule will help here, there are still options to use Cufon or download fonts from Google Webfonts or Fontsquirrel, but Google Webfonts and Fontsquirrel may not need a font, so consider the best option - connecting unique fonts using @font-face.

The easiest way to include a font is to write it in a 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 font name, and then you can specify this font for the necessary site elements, 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, better replace them with dashes.

This is the easiest way, but it just does not work in all browsers, and this is a big problem.

Each browser supports its own font formats:
true type 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, you will have to make several more of the same fonts from one of your fonts in .ttf format, only in a different format. This is where the font generator at fontsquirrel.com comes in handy. On this page, upload 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 required archive with all formats of your font.

Download all the formats of your fonts from the archive, 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 stylesheet.css file will also be in the archive - in it all the rules for connecting fonts will already be written, you can safely copy them to your style sheet, just do not forget to specify your paths to 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 settings, fonts are displayed in all browsers, including the beloved IE-7-8-9.

If you are using non-standard fonts for Cyrillic, i.e. for Russian characters, and the font is displayed incorrectly on the site, then generating a font with advanced settings may help, on the page http://www.fontsquirrel.com/tools/webfont-generator download your font and select "Expert" settings. There are a lot of settings, I don’t know everything, but read carefully and select the ones you need, and to support Cyrillic, select in the Subsetting block: the Custom Subsetting section ... and check the Cyrillic checkbox, and also mark the languages ​​\u200b\u200band formats you need.

Here's an example of what I got:

What does a site visitor actually see when using a non-standard Web font at this stage of browser development?

Many suffer when creating a site. In many cases, the site requires the use of a non-standard font or hieroglyph. You download a beautiful font and start laying out the page, but not all users have such fonts. Some are not embarrassed and simply create a graphic file using the font they need, but additional graphics do not always fit the page and many have enough of them anyway. But there is one suitable way out! This way out is to use CSS technology (Cascading Style Sheets) or simply "Cascading Style Sheets". Usually CSS is included in the created file itself, the page, but you can create a CSS file (.css) separately and connect it by padding between the tag thus:

And with the help of CSS, we need to automatically download and install the True Type Font (.ttf) font file, but the installation will only occur if the user's computer does not detect the required font. First of all, we must specify the location of the font. To do this, we write between the tags And So:

Thus, you can use any fonts on your site. But I advise you not to be too sophisticated, since the process of downloading and installing a font also requires a certain amount of time. And if your font itself "weighs" 500kb or more, then it is not recommended to use it in this case.

To be honest, it's easier and more correct to do this:


Although web fonts are supported by most browsers, they are buggy in Opera from the very beginning. On some systems they do not work at all, on those that do, pages may or may not work when reloading:

Therefore, this should not be used in serious projects, only in personal blogs, and only for text larger than 30px, so as not to see the wonders of anti-aliasing and kerning.

At the same time Google provides - API for cross-browser connection of non-standard fonts.







Making the Web Beautiful!



Google detects the browser and issues valid CSS and font for it.

RELATED ARTICLES