Задать вопрос
  • Как осуществить подключение нескольких шрифтов в css?

    Zoxon
    @Zoxon
    Веб-разработчик
    @font-face {
    font-family: "PT Serif";
      src: url("../fonts/ptserif-normal.eot");
      src: local('☺'), 
      url("../fonts/ptserif-normal.eot?#iefix") format("embedded-opentype"), 
      url("../fonts/ptserif-normal.woff") format("woff"),
      url("../fonts/ptserif-normal.ttf") format("truetype"), 
      url("../fonts/ptserif-normal.svg#PT Serif") format("svg");
    
      font-weight: normal;
      font-style: normal;
    }
    
    @font-face {
      font-family: "PT Serif";
      src: url("../fonts/ptserif-bold.eot");
      src: local('☺'), 
      url("../fonts/ptserif-bold.eot?#iefix") format("embedded-opentype"), 
      url("../fonts/ptserif-bold.woff") format("woff"), 
      url("../fonts/ptserif-bold.ttf") format("truetype"), 
      url("../fonts/ptserif-bold.svg#PT Serif") format("svg");
    
      font-weight: bold;
      font-style: normal;
    }
    
    @font-face {
      font-family: "PT Serif";
      src: url("../fonts/ptserif-italic.eot");
      src: local('☺'), 
      url("../fonts/ptserif-italic.eot?#iefix") format("embedded-opentype"), 
      url("../fonts/ptserif-italic.woff") format("woff"), 
      url("../fonts/ptserif-italic.ttf") format("truetype"), 
      url("../fonts/ptserif-italic.svg#PT Serif") format("svg");
    
      font-weight: normal;
      font-style: italic;
    }
    
    @font-face {
      font-family: "PT Serif";
      src: url("../fonts/ptserif-bolditalic.eot");
      src: local('☺'), 
      url("../fonts/ptserif-bolditalic.eot?#iefix") format("embedded-opentype"), 
      url("../fonts/ptserif-bolditalic.woff") format("woff"), 
      url("../fonts/ptserif-bolditalic.ttf") format("truetype"), 
      url("../fonts/ptserif-bolditalic.svg#PT Serif") format("svg");
    
      font-weight: bold;
      font-style: italic;
    }


    В font-weight можно использовать не ключевые слова, а цифры

    100 Ultra Light
    200 Thin
    300 Light
    400 Regular, Normal
    500 Roman
    600 Medium, SemiBold
    700 Bold
    800 Heavy, ExtraBold
    900 Black

    При использовании указывать font-weight и font-style, в зависимости от их комбинаций будет выбран нужный файл шрифта

    UPD: Если вам не нужно поддерживать совсем уж древние браузеры IE8 (eot) и Android 4.3 (ttf) то достаточно подключить только woff и woff2.
    Svg нужен для Safari версии ниже 5.1

    Подробнее смотрите на caniuse.com

    Хорошая статья на эту тему nicothin.pro/page/web-fonts

    @font-face { 
      font-family: 'Web font'; 
      src: url('webfont.woff2') format('woff2'), 
           url('webfont.ttf')  format('truetype'), /* Только если нужна поддержка старых Android, иначе закомментировать */ 
           url('webfont.woff') format('woff'); 
      font-weight: normal; 
      font-style: normal; 
    }
    Ответ написан
    4 комментария