Quiero importar una nueva fuente a mi proyecto Angular 5.

He intentado:

1) Copiar el archivo a activos / fuentes /

2) agregarlo a los estilos .angular-cli.json

Pero he comprobado que el archivo no es un .css, es un .otf que funciona como un .exe (es un instalador), así que realmente no sé cómo importarlo. ¿Alguna idea?

60
Mario 17 abr. 2018 a las 16:06

3 respuestas

La mejor respuesta

Debe colocar los archivos de fuente en la carpeta de activos (puede ser una subcarpeta de fuentes dentro de los activos) y consultarla en los estilos:

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

Una vez hecho esto, puede aplicar esta fuente en cualquier lugar como:

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

Puede poner la definición @font-face en su styles.css o styles.scss global y podrá hacer referencia a la fuente en cualquier lugar, incluso en el CSS / SCSS específico de su componente. styles.css o styles.scss ya está definido en angular-cli.json. O, si lo desea, puede crear un archivo CSS / SCSS separado y declararlo en angular-cli.json junto con styles.css o styles.scss como:

"styles": [
  "styles.css",
  "fonts.css"
],
109
Saptarshi Basu 17 abr. 2018 a las 13:33

Puede intentar crear un CSS para su fuente con font-face (como se explica aquí )

Paso # 1

Cree un archivo CSS con la fuente y colóquelo en algún lugar, como en assets/fonts

customfont.css

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

Paso # 2

Agregue el CSS a su .angular-cli.json en la configuración styles

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

No olvide reiniciar ng serve después de hacer esto

Paso # 3

Usa la fuente en tu código

component.css

span {font-family: YourFontFamily; }
23
David 17 abr. 2018 a las 13:24

La respuesta ya existe arriba, pero me gustaría agregar algo ... puede especificar lo siguiente en su @ font-face

@font-face {
  font-family: 'Name You Font';
  src: url('assets/font/xxyourfontxxx.eot');
  src: local('Cera Pro Medium'), local('CeraPro-Medium'),
  url('assets/font/xxyourfontxxx.eot?#iefix') format('embedded-opentype'),
  url('assets/font/xxyourfontxxx.woff') format('woff'),
  url('assets/font/xxyourfontxxx.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}

Así que solo puede indicar el nombre de su familia de fuentes que ya eligió

NOTA : el peso de la fuente y el estilo de fuente dependen de sus archivos .woff .ttf ...

0
Smaillns 3 jun. 2020 a las 12:26