Например, сгенерировать случайные цвета и присвоить их соответственно.
Достаточно сгенерировать в цикле 3 случайных цифры и сложить их в hex -- #05F
Или сделать массив из цветов и брать из них случайным образом. https://developer.mozilla.org/ru/docs/Web/JavaScri...
Да варианов полно.
Теоретически @font-face быстрее, тк -1 запрос. Используйте @font-face с font-display и без бороды из eot, ttf и пр, достаточно woff/woff2 и действительно необходимого набора из множества стилей шрифта.
А гугллфонтс комфортно использовать, да)
Что такое "раздвигаются блоки" не очень понятено, но для плавного появления скрытого блока display: none; просто добавьте по клику класс с animation и display: block;