Answer the question
In order to leave comments, you need to log in
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
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;
}
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;
}
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question