D
D
Dmitry Petrov2015-05-15 23:39:23
css
Dmitry Petrov, 2015-05-15 23:39:23

How to correctly connect fonts?

Hello. So I thought about how to correctly connect fonts based on page loading speed. I experimented with the PT Sans font set which weighs about 6MB. There are several formats: .eot, .svg, .ttf and .woff.
The question is: is there any way to give the user a specific indication, depending on their browser, about which format to download and not to download the others?

Answer the question

In order to leave comments, you need to log in

3 answer(s)
A
al3ch5, 2015-05-15
@krutoo

When you prescribe @font-face, it automatically selects the font that the user's browser will perceive. those. competent use of fonts is their competent arrangement in order (from the lightest .woff to .svg for OS). As an example:

@font-face {
  font-family: 'icomoon';
  src:url('../fonts/icomoon.eot?-cemaup');
  src:url('../fonts/icomoon.eot?#iefix-cemaup') format('embedded-opentype'),
    url('../fonts/icomoon.woff?-cemaup') format('woff'),
    url('../fonts/icomoon.ttf?-cemaup') format('truetype'),
    url('../fonts/icomoon.svg?-cemaup#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

S
Sasha, 2015-05-15
@userAlexander

I use this font connection.

@font-face{
  font-family:'CenturyGothic-Italic';
  src:url('../fonts/CenturyGothic-Italic.woff2') format('woff2'),
    url('../fonts/CenturyGothic-Italic.woff') format('woff'),
    url('../fonts/CenturyGothic-Italic.ttf') format('truetype');
  font-weight:normal;
  font-style:normal;
}

In addition, when converting fonts on a protein , I choose which language should be supported by the font, this helps to reduce the size of the font file and, accordingly, the speed of loading the font on the web page.

P
Pavel, 2015-05-16
Sayk @PiSaiK

Read here Custom fonts on the site using CSS

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question