Во время отладки вашего сайта вам может потребоваться более легкий для чтения скрипт css, который поможет найти некоторые проблемы. Сжатие должно выполняться только тогда, когда все работает так, как вы намереваетесь.
на данный момент вы можете скопировать / вставить его на этом сайте, чтобы увидеть его более четко:
http://www.digitalcoding.com/tools/css-beautifier.html
Я немного подозрительно относился к печати @media и более поздней к @page. Я не уверен, правильно ли они настроены. Я бы посоветовал сначала сосредоточиться на веб-сайте, комментируя особенности печати, чтобы помочь вам решить проблему с веб-отображением. Возможно, вы захотите создать тестовую HTML-страницу со всеми различными элементами, которые вы хотите использовать, и убедитесь, что они работают должным образом, прежде чем добавлять трехмерные фигуры. Просто создайте HTML-файл и удалите эти классы, чтобы вы могли видеть, как все отображается в виде базовой веб-страницы.
Как сказал Эттиен, есть несколько мест, где код устанавливает шрифт для разных элементов в Lucida Grande и Courier. В этих местах вы должны ссылаться на название нужного шрифта ColThin. Также важно, как вы их называете, проверьте файл, который был загружен с шрифта squirrel (если у вас там есть шрифт). Включенный демонстрационный HTML-файл содержит несколько CSS, которые показывают, как использовать шрифты @ font-face:
p.style1 {font: 18px/27px 'ColaborateThinRegular', Arial, sans-serif;}
Вам не хватает кавычек, поэтому CSS может не регистрировать новое имя шрифта. Кроме того, установка его в html и последующее добавление других имен шрифтов в код заменяет настройку html. Важно только то, как вы определяете имя @ font-face. Вы можете назначить его «smashed-font», и если вы ссылаетесь на него как «smashed-font», он будет ссылаться на файлы, которые вы определили как «smashed-font». 'ColThin' должно быть хорошо.
Из того, что я вижу, вы скопировали файлы шрифтов в их правильные места, но то, как вы хотите их использовать, не совсем правильно.
Хорошее использование эксперимента Пола Хейса, кстати. http://www.paulrhayes.com/2009-07/animated-css3-cube-interface-using-3d-transforms/
Имейте в виду, что он может не работать должным образом на нескольких типах браузеров, так что имейте в виду некоторый запасной вариант для людей, которым не повезло иметь браузеры webkit, или включить альтернативы, такие как -moz и -o и версию css, который не включает -webkit, на тот случай, если эти преобразования сделают его в спецификации css3.
Если это пугает, считайте это опытом обучения. Устранение этих ошибок с помощью вашей собственной работы сделает ваши услуги гораздо более ценными для ваших потенциальных клиентов.