Подключение шрифтов к сайту

Подключил шрифт на сайт с разными начертаниями, 2 начертания подключил немного иначе и результат отображения немного удивил.

Как подключал:

/*---1---*/
@font-face {
  font-family: 'Raleway';
  font-weight: 100;
  font-style: normal;
  src: local('Raleway Thin'), local('Raleway-Thin'),
    url("/font/Raleway-Thin.eot");
  src: local('Raleway Thin'), local('Raleway-Thin'),
    url("/font/Raleway-Thin.eot?#iefix") format("embedded-opentype"),
    url("/font/Raleway-Thin.otf") format("opentype"),
    url("/font/Raleway-Thin.svg") format("svg"),
    url("/font/Raleway-Thin.ttf") format("truetype"),
    url("/font/Raleway-Thin.woff") format("woff"),
    url("/font/Raleway-Thin.woff2") format("woff2");
}    
@font-face {
  font-family: "Raleway";
  font-weight: 400;
  font-style: normal;
  src: local('Raleway'), url("/font/Raleway-Regular.eot");
  src: local('Raleway'), url("/font/Raleway-Regular.eot?#iefix") format("embedded-opentype"), 
  /* все как в первом, имя файлов в соответствии с начертанием */ 
}
/*---2---*/
@font-face {
  font-family: "Raleway-ThinItalic";
  font-weight: normal;
  font-style: normal;
  src: url("/font/Raleway-Thin-Italic.eot");
  src: url("/font/Raleway-Thin-Italic.eot?#iefix") format("embedded-opentype"),
  /* все как в первом, имя файлов в соответствии с начертанием */
}
@font-face {
  font-family: "Raleway-Italic";
  font-weight: normal;
  font-style: normal;
  src: url("/font/Raleway-Regular-Italic.eot");
  src: url("/font/Raleway-Regular-Italic.eot?#iefix") format("embedded-opentype"), 
  /* все как в первом, имя файлов в соответствии с начертанием */ 
}

Как использовал:

<span style='font-size: 18px; font-family: "Raleway";'>Raleway-Regular</span><br>
<span style='font-size: 18px; font-family: "Raleway-Italic";'>Raleway-Italic</span><br>
<span style='font-size: 18px; font-family: "Raleway"; font-weight:100;'>Raleway-Thin</span><br>
<span style='font-size: 18px; font-family: "Raleway-ThinItalic";'>Raleway-ThinItalic</span><br>

Результат стал неожиданным когда открыл файл через телефон (iOS 12.1.2) и вот в чем отличие:

На ПК у всех 4х начертаний одинаковый размер.

Почему так могло произойти и у каких начертаний в итоге размер 18px? И в чем разница между методами подключения?

Подключил с гугла, результат тот же

/* latin */
@font-face {
  font-family: 'Raleway-ThinItalic';
  font-style: normal;
  font-weight: normal;
  src: local('Raleway Thin Italic'), local('Raleway-ThinItalic'), url(https://fonts.gstatic.com/s/raleway/v12/1Ptqg8zYS_SKggPNyCgwLrFoJfU.woff2) format('woff2');
}
/* latin */
@font-face {
  font-family: 'Raleway-Italic';
  font-style: normal;
  font-weight: normal;
  src: local('Raleway Italic'), local('Raleway-Italic'), url(https://fonts.gstatic.com/s/raleway/v12/1Ptsg8zYS_SKggPNyCg4TYFq.woff2) format('woff2');
}
/* latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 100;
  src: local('Raleway Thin'), local('Raleway-Thin'), url(https://fonts.gstatic.com/s/raleway/v12/1Ptsg8zYS_SKggPNwE44TYFq.woff2) format('woff2');
}
/* latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: local('Raleway'), local('Raleway-Regular'), url(https://fonts.gstatic.com/s/raleway/v12/1Ptug8zYS_SKggPNyC0ITw.woff2) format('woff2');

После добавления <meta name="viewport" content="width=device-width, initial-scale=1"> все стало одним размером и судя по всему 18px был у курсива.

Остался только вопрос о разнице подключения шрифтов