Иван Кулаков

src: url(/path/Quantum.otf);

Проверьте путь до файла.

Ну тут приходит на ум пока только переопределение тени своим классом тупо, иначе хз, только если через js

Абсолютно все скрипты в конец body, и сделайте по возможности в defer. Он говорит, что данные стили (в 5 кб) грузятся очень медленно. Похоже, проблема в очень медленном соединении с вашим сервером, подумайте, что может быть причиной этому, либо попробуйте CDN.

Ну min-height Вам нужен, судя по всему)
Через JS можно высчитать высоту контента и задать ее как min-height блоку с этим контентом)

UPD: То есть:

body, html, #app {
    height: 100vh;
    min-height: 300px;
}

let app = document.getElementById("app");

const appHeight = () => {
    app.style.minHeight = app.offsetHeight + 'px';
}

window.onload = appHeight;
window.onresize = appHeight;

Можно через IntersectionObserver, например :)

if ('IntersectionObserver' in window &&
	    'IntersectionObserverEntry' in window &&
	    'intersectionRatio' in window.IntersectionObserverEntry.prototype) {
		if (!('isIntersecting' in IntersectionObserverEntry.prototype)) {
			Object.defineProperty(window.IntersectionObserverEntry.prototype, 'isIntersecting', {
				get: function() { return this.intersectionRatio > 0; }
			});
		}

		var oObserver = new IntersectionObserver(function(entries, observer) {
			entries.forEach(function(entry) {
				if (entry.isIntersecting) {
						//  делаем анимацию (добавляем css-класс в котором настроены анимации)
						entry.target.classList.add('animate');
				}
			});
		});

		// вешаем observer на массив элементов
		arrayElements.forEach(function(elem) {
			oObserver.observe(elem);
		});
	}