Как подключить целое семейство шрифтов?

Question

[lillianfisher]

Здрасвствуйте, я скачал https://fonts.google.com/specimen/Open+Sans шрифт, но как подключитьцелое семейство етого шрифта в css. К примеру

@font-face {
  font-family: OpenSans;
  src: local("Open Sans Regular"), local("OpenSans-Regular"),
    url("../assets/fonts/OpenSans/OpenSans-Regular.ttf");
}

так я подключу только вариант Regular предварительно поискав его локально.
При подключении семейтва я должен каждый раз копировать ети строки? К примеру

@font-face {
  font-family: OpenSans;
  src: local("Open Sans Regular"), local("OpenSans-Regular"),
    url("../assets/fonts/OpenSans/OpenSans-Regular.ttf");
  src: local("Open Sans Bold"), local("OpenSans-Bold"),
    url("../assets/fonts/OpenSans/OpenSans-Bold.ttf");
//?????????
}

или как правильно, чтоб браузер подбирал шрифт относительно font-weight
При использовании vue cli, могу ли я поставить етот шрифт в папку assets/fonts/OpenSans
и вместе с файлами шрифта поставить туда scss (в котором будет только font-face) а потом просто импортировать его чтоб не писать подключение на каждой странице, будет ли етот файл виден пользователю?

Answer 1

[Сергей delphinpro]

@font-face {
  font-family: "Open Sans";
  src: local("Open Sans"), url("../assets/fonts/OpenSans/OpenSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Open Sans";
  src: local("Open Sans"), url("../assets/fonts/OpenSans/OpenSans-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Open Sans";
  src: local("Open Sans"), url("../assets/fonts/OpenSans/OpenSans-BoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
}