Я пытаюсь загрузить шрифты Google локально, используя шрифт face, и мне это удалось. Код:
<style>
/* roboto-300 - latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
src: url('src/common/fonts/roboto-v18-latin-300.eot');
/* IE9 Compat Modes */
src: local('Roboto Light'), local('Roboto-Light'),
url('src/common/fonts/roboto-v18-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('src/common/fonts/roboto-v18-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
url('src/common/fonts/roboto-v18-latin-300.woff') format('woff'), /* Modern Browsers */
url('src/common/fonts/roboto-v18-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
url('src/common/fonts/roboto-v18-latin-300.svg#Roboto') format('svg');
/* Legacy iOS */
}
</style>
Тем не менее, в компоненте после вышеупомянутой декларации у меня также есть вызов, идущий в cdn Google, чтобы получить шрифты.
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700|Roboto:400,300,300italic,400italic,500,500italic,700,700italic" crossorigin="anonymous">
Из-за этого мои локально сохраненные шрифты игнорируются, и вызов к cdn продолжается, где также выбираются необходимые шрифты (например, https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fBBc4.woff2).
Если комментарий в этой строке, то шрифты выбираются из моего пункта назначения в font-face.
В соответствии с моим пониманием, поскольку мое объявление предшествует этой ссылке, и шрифты должны быть получены из упомянутого src.
Я что-то упустил? Разве это не то, как должен работать font-face, т.е.
Поскольку мои стили шрифтов предшествовали вызову https, их следует загрузить
Кроме того, поскольку они загружаются, последующий вызов cdn от Google (вызовы, которые фактически извлекают нужные шрифты) не должен выполняться (https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fBBc4.woff2)
Примечание: Внешний вызов присутствует в стороннем компоненте, поэтому я не могу закомментировать его в рабочей среде.