Андрей Федоров

В качестве вложенных кавычек попробуйте символы ` и \' (последнее используется как один символ).
Кроме того в font-name можно использовать названия шрифтов без кавычек, даже если в названии есть пробел.

Но это же очевидно, определять есть ли поддержка webp в браузере и отдавать либо jpg, либо webp.
Самый простой вариант - с использованием тега <picture>
Использование webp относится к техническому СЕО, что даст результат в пузомерках, но слабо отразится на ранжировании.
Если вопрос в скорости загрузки, то я бы порекомендовал внедрить lazy loading для изображений.

Вижу 2 решения:
1. Найти библиотеку на js для определения браузера.
2. Использовать Google Fonts. По идее он должен сам подобрать необходимый шрифт для каждого конкретного браузера.

Что? https://codepen.io/aliencash/pen/bGVrZvq

С чего вы решили? Приведите пример кода.

Вот код подтверждающий что такого эффекта нет - https://codepen.io/aliencash/pen/ExVgWJz?editors=1100С

Дизайнера на кол. Картинками делайте.

Чистый css... К сожалению значения нужно подбирать и общий фон возможен только одноцветный (поверх картинки аватар нельзя разместить)
https://codepen.io/aliencash/pen/jObPZyV?editors=1100

Ну, самый простой вариант - это дата-атрибуты или вообще любые атрибуты.
Когда генерите html-код страницы для запеченных вставляете атрибут так, чтобы получилось типа такого:

<div data-baked="yes"></div>

Теперь, в css можно написать такой селектор:

div:not([data-baked="yes"]) {
  display: none;
}

И все товары кроме запеченных исчезнут.

.item {
  display: flex;
}
.item:nth-child(4n+2),
.item:nth-child(4n+3) {
  flex-direction: column;
}
.item:nth-child(4n) {
  flex-direction: row-reverse;
}

Критическую часть вы не загружаете, а размещаете через style в теге head. Общий файл грузите асинхронно.