Разница между @font-face и Google Fonts заключается в способе подключения шрифтов и месте их хранения. 12
@font-face позволяет контролировать внешний вид текста на сайте, при этом файлы со шрифтами хранятся вместе с остальными ресурсами сайта. 12 Для них обычно создают отдельную директорию в корне проекта, например, fonts. 2 В неё помещают файлы для каждого начертания в нужных форматах. 2
Google Fonts — это библиотека бесплатных веб-шрифтов, которые можно легко интегрировать в проект. 1 Шрифты хранятся на серверах Google, что обеспечивает быструю загрузку и высокую доступность. 1 Google Fonts предлагает широкий выбор шрифтов, которые можно использовать для различных целей, от заголовков до основного текста. 1
Таким образом, при использовании @font-face разработчик имеет полный контроль над отображением текста и независимость от внешних сервисов, а при использовании Google Fonts — простоту использования и всегда актуальные версии шрифтов, но с учётом того, что запросы к сторонним серверам могут негативно повлиять на скорость загрузки страницы. 2