Подходящие шрифты можно поискать на https://fonts.google.com - там же будут инструкции по подключению
Если шрифты там не подходят - то можно скачать/купить из интернета, загрузить на сервер и подключить к сайту
для этого нужны форматы шрифта для поддержки разными браузерами, например
Gothic.TTF
Gothic.EOT
Gothic.WOFF
Gothic.SVG
загружаются в папку /fonts/ на сервер и подключаются в CSS
@font-face {
font-family: "Century Gothic";
src: url("fonts/Gothic.eot"); /* Для поддержки браузера IE6+ */
src: url("fonts/Gothic.eot?#iefix") format("embedded-opentype"), /* Хак корректного отображения шрифта в IE8 */
url("fonts/Gothic.woff") format("woff"), /* Для современных браузеров */
url("fonts/Gothic.ttf") format("truetype"),
url("fonts/Gothic.svg#JournalRegular") format("svg");
font-weight: normal;
font-style: normal;
}
Далее можем назначать шрифт для нужного класса, например
h1 {
font-family: Century Gothic;
}
Вцелом, шрифт Century Gothic достаточно популярен и будет отображаться более чем на 80% браузеров. Т.е. если не подключать, то прописать альтернативные похожие шрифты - будут отображаться у кого нет этого (т.е. у остальных 20%)