Как импортировать новый шрифт в проект - Угловой 5

Я хочу импортировать новый шрифт в свой проект Angular 5.

Я пытался:

1) Копирование файла в активы/шрифты/

2) добавив его в .angular-cli.json стили

но я проверил, что файл не является .css, это .otf который работает как .exe (это установщик), поэтому я действительно не знаю, как его импортировать. Любая идея?

Ответ 1

Вы должны поместить файлы шрифтов в папку с ресурсами (может быть подпапкой шрифтов в пределах активов) и ссылаться на нее в стилях:

@font-face {
  font-family: lato;
  src: url(assets/font/Lato.otf) format("opentype");
}

После этого вы можете применить этот шрифт в любом месте:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'lato', 'arial', sans-serif;
}

Вы можете поместить определение @font-face в свои глобальные styles.css или styles.scss и вы сможете ссылаться на шрифт где угодно - даже в вашем конкретном компоненте CSS/SCSS. styles.css или styles.scss уже определен в angular-cli.json. Или, если вы хотите, вы можете создать отдельный файл CSS/SCSS и объявить его в angular-cli.json, а также styles.css или styles.scss например:

"styles": [
  "styles.css",
  "fonts.css"
],

Ответ 2

Вы можете попробовать создать css для своего шрифта с помощью font-face (как описано здесь)

Шаг 1

Создайте файл css с шрифтом и поместите его где-нибудь, например, в assets/fonts

customfont.css

@font-face {
    font-family: YourFontFamily;
    src: url("/assets/font/yourFont.otf") format("truetype");
}

Шаг 2

Добавьте css в ваш.angular-cli.json в настройках styles

"styles":[
 //...your other styles
 "assets/fonts/customFonts.css"
 ]

Не забудьте перезапустить ng serve после этого

Шаг 3

Использовать шрифт в коде

component.css

span {font-family: YourFontFamily; }

Ответ 3

Это лучший способ использовать шрифт Google локально с углом 2,4,5,6,7 и более, сначала загрузите шрифт Google, и это в папке активов, и используйте его в соответствии с вашими требованиями.

В angular.json это называется в src/assets

"assets": [
    "src/assets"
 ],

В файле CSS добавьте это font-face вверху

@font-face {
  font-family: 'Montserrat', sans-serif;
  src: url(assets/Montserrat/Montserrat-Light.ttf) format("truetype");
  src: url(assets/Montserrat/Montserrat-Medium.ttf) format("truetype");
  src: url(assets/Montserrat/Montserrat-Regular.ttf) format("truetype");
  src: url(assets/Montserrat/Montserrat-SemiBold.ttf) format("truetype");
}

Наконец, используйте его согласно вашему требованию, как

body{
 font-family: 'Montserrat', sans-serif;
}