Встроенные шрифты и внешний ресурс

Question

Я решал проблемы с веб-шрифтами в различных браузерах и следовал рекомендациям FontSpring, который, похоже, является последним рекомендуемым решением.

Однако, поскольку я использую CDN и обслуживаю свои CSS-файлы из другого домена, я очень быстро обнаружил, что ни IE, ни Firefox не будут загружать веб-шрифты из CDN, выдавая такую ​​ошибку, как @font-face failed cross-origin request, В моем CSS у меня было что-то вроде следующего:

@font-face {
    font-family: 'ClarendonRoman';
    src: url('/assets/fonts/clarendon-bt-webfont.eot?#iefix') format('embedded-opentype'),
       url('/assets/fonts/clarendon-bt-webfont.woff') format('woff'),
       url('/assets/fonts/clarendon-bt-webfont.ttf')  format('truetype'),
       url('/assets/fonts/clarendon-bt-webfont.svg#svgFontName') format('svg');
    font-weight: normal;
    font-style: normal;
}

Как видите, пути к шрифтам относятся к CSS, и в результате шрифты не загружаются из CDN. То, что мне было нужно, это жесткий код в домене сайта в мои таблицы стилей, чтобы шрифты загружались из одного источника. Так что моя новая таблица стилей выглядит так:

@font-face {
    font-family: 'ClarendonRoman';
    src: url('//mydomain.com/assets/fonts/clarendon-bt-webfont.eot?#iefix') format('embedded-opentype'),
       url('//mydomain.com/assets/fonts/clarendon-bt-webfont.woff') format('woff'),
       url('//mydomain.com/assets/fonts/clarendon-bt-webfont.ttf')  format('truetype'),
       url('//mydomain.com/assets/fonts/clarendon-bt-webfont.svg#svgFontName') format('svg');
    font-weight: normal;
    font-style: normal;
}

А теперь со встроенным доменом все отлично работает для HTTPS и HTTP-трафика. Тем не менее, я не совсем счастлив, так как я больше не использую свой CDN для обслуживания файлов шрифтов, и я сторонник производительности. Поскольку я не могу обойти проблему с доменом кросс-происхождения, я подумываю о внедрении шрифтов. Если вы посмотрите на http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax, вы увидите, что они рекомендуют встроенный формат data-uri следующим образом:

@font-face {
  font-family: 'MyFontFamily';
  src: url('myfont-webfont.eot?') format('embedded-opentype');
  }

@font-face {
  font-family: 'MyFontFamily';
  url(data:font/truetype;charset=utf-8;base64,BASE64_ENCODED_DATA_HERE)  format('truetype'),
  url(data:font/woff;charset=utf-8;base64,BASE64_ENCODED_DATA_HERE)  format('woff'),
  url('myfont-webfont.svg#svgFontName') format('svg');    
}

У меня есть несколько вопросов по этому поводу:

• Конечно, если я дважды внедряю шрифт в свою таблицу стилей, используя кодировку Base64 для форматов TTF и WOFF, я собираюсь раздуть свою таблицу стилей до такой степени, что, возможно, преимущество вложения сводится на нет удвоением или большим количеством данных в моей таблице стилей?
• Почему в этом примере src: не используется перед каждым URL (data:...). Это опечатка или умышленное?
• Если я встраиваю шрифты, будут ли все браузеры использовать встроенную версию поверх EOT-версии и, таким образом, сохранить сервер в оба конца? Какие браузеры будут использовать встроенные файлы TTF или WOFF?
• Почему мы не внедряем версию EOT?

Я ценю, что в этом посте немало информации, но я надеюсь, что этот пост окажется полезным для тех, кто сталкивается с той же дилеммой.

Matt