Лидеры

Весь необходимый для этого код открыт.

Только лучше так не делать, на моей памяти, google fonts раза 2-3 падал. Лучше всё держать на сервере, если уж очень жаль места, лучше использовать форматы woff/woff2, но тогда поддержка старых браузеров вряд ли будет. Подключать шрифты с сервера довольно легко: @font-face { /*Тут можете задать любое имя, которое будет указывать на подключаемый шрифт*/ font-family: "Roboto"; /*Тут стандартные стили для шрифта*/ font-style: normal; font-weight: 400; /*Здесь указваем путь до скаченного шрифта в разных форматах*/ /*Чем выше (раньше) указан шрифт, тем больше его приоритет*/ src: url("/fonts/roboto.woff2") format("woff2"), url("/fonts/roboto.woff") format("woff"), url("/fonts/roboto.svg") format("svg"), url("/fonts/roboto.ttf") format("ttf"); } body { /* Тут уже используем приготовленный выше шрифт */ font-family: "Roboto", "Arial", sans-serif; } Так же, в каждом браузере, рендер (формирование) текста с шрифтом разное, поэтому советую при назначении @font-face задавать свойство font-display. Оно позволяет задать, как конкретно будет отображаться текст при загрузке шрифта. У этого свойства есть несколько значений: block - пока не загрузился шрифт текст не будет отображать, но не больше 3-х секунд, иначе, если шрифт до сих пор не загружен, будет использоваться стандартный; swap - сначала отображается текст с стандартным шрифтом, после загружается подключаемый, и как тот будет готов - рендерится; fallback - похож на block, в течении 0.1 секунды текст не отображается, после, если шрифт до сих пор не загружен, текст отрендерится с стандартным шрифтом, подождёт 3 секунды, и если шрифт снова опоздает, то текст так и останется с стандартным шрифтом; optional - текст не отображается 0.1 секунды, если Ваш шрифт не был загружен - текст рендерится стандартным шрифтом. @font-face { font-display: swap; /*css...*/ Так же советую почитать эту статью про оптимизацию шрифтов, будет полезно :)