Как реализовать шрифты Google при загрузке шрифта в коллекцию?

Question

Я хотел бы использовать два шрифта Goo gle, но я боюсь, что добавление таким образом:

<link href='https://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700,700italic' rel='stylesheet' type='text/css'>

может быть медленнее (по производительности), чем загрузка шрифтов в коллекцию...

Итак, я загружаю два шрифта в коллекцию, но у меня есть сомнения, как я могу реализовать на моем сайте...

Может быть, мне просто нужно вставить две коллекции в папку CSS, а затем добавить в head

<link href='https://path/css/font/ ???????' rel='stylesheet' type='text/css'> 

но я не знаю, какой файл я должен связать в пути... Например, когда я загружаю PT Sans в коллекции, в этой папке у меня есть эти файлы:

Я надеюсь, что вы можете помочь мне понять больше..

Большое спасибо и извините за мой английский

Answer 1

Просто назовите свои шрифты в файле CSS.

@font-face {
    font-family: myFirstFont;
    src: url(font1.woff); /* specify the path of your font location*/
}

Повторите это для следующих шрифтов.

 @font-face {
        font-family: myFirstFont;
        src: url(font2.woff); /* specify the path of your font location*/
    }

Answer 2

Вам нужно еще больше файлов шрифтов.

Если вы просто откроете файл с сервера Google...

https://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700,700italic

... вы видите, как это делается.

Вы связываете файлы шрифтов из файла CSS, а не из элемента link.

Answer 3

Предполагая, что вы хотите, чтобы ваши шрифты загружались локально из внутренней папки, а не из внешнего источника:

Добавьте следующий код в свой код в <style> тег:

@font-face {
    font-family: 'PT_Sans';
    font-style: Regular;
    src: url('../fonts/PT_Sans-Web-Bold.ttf'); /* IE9 Compat Modes */
    src: local('PT Sans'), local('PT_Sans'),
    url('../fonts/PT_Sans-Web-Regular.ttf') format('truetype')

}

Или вы можете ссылаться на него внешне в файле CSS.