Теоретически @font-face быстрее, тк -1 запрос. Используйте @font-face с font-display и без бороды из eot, ttf и пр, достаточно woff/woff2 и действительно необходимого набора из множества стилей шрифта.
А гугллфонтс комфортно использовать, да)
Что такое "раздвигаются блоки" не очень понятено, но для плавного появления скрытого блока display: none; просто добавьте по клику класс с animation и display: block;