fortawesome - angular2-cli incluye fuentes personalizadas

install font awesome angular 4

Question

Estoy tratando de incluir algunas fuentes personalizadas en mi proyecto sin éxito.

NOTA: Estoy usando angular-cli: [email protected]

1. Pongo las fuentes en carpeta

   src / asset / fonts / Roboto-Regular.tff

2. Agrego en src/styles.css

   @ font-face {font-family: "Roboto-Regular"; src: url ("./ asset / fonts / Roboto-Regular.tff"); }

3. Lo uso en un componente .scss

   Familia de fuentes: "Roboto-Regular";

4. Me sale el error 404:

   No se puede encontrar el módulo "./assets/fonts/Roboto-Regular.tff" cliente? 93b6: 80 ./~/css-loader?sourcemap!./~/postcss-loader!./src/styles.css No se encuentra el módulo: Error: No se puede resolver ''./assets/fonts/Roboto-Regular.tff'' en ''D: / Work / Blah / angular / BlahFrontEnd / src'' resolution ''./assets/fonts/Roboto-Regular.tff'' in '' D: / Work / Blah / angular / BlahFrontEnd / src ''usando el archivo de descripción: D: / Work / Blah / angular / BlahFrontEnd / package.json (ruta relativa: ./src) El campo'' navegador ''no contiene un alias válido configuración después de usar el archivo de descripción: D: / Work / Blah / angular / BlahFrontEnd / package.json (ruta relativa: ./src) usando el archivo de descripción: D: / Work / Blah / angular / BlahFrontEnd / package.json (ruta relativa: ./src/assets/fonts/Roboto-Regular.tff) como directorio D: / Work / Blah / angular / BlahFrontEnd / src / asset / fonts / Roboto-Regular.tff no existe ninguna extensión. Campo ''browser'' doesn '' t contiene una configuración de alias válida D: / Work / Blah / angular / BlahFrontEnd / src / asset / fonts / Roboto-Regular.tff no existe .ts El campo ''browser'' no co ntain una configuración de alias válida D: / Work / Blah / angular / BlahFrontEnd / src / asset / fonts / Roboto-Regular.tff.ts no existe .js El campo ''browser'' no contiene una configuración de alias válida D: / Work / Blah / angular / BlahFrontEnd / src / asset / fonts / Roboto-Regular.tff.js no existe [D: / Work / Blah / angular / BlahFrontEnd / src / asset / fonts / Roboto-Regular.tff] [ D: / Work / Blah / angular / BlahFrontEnd / src / asset / fonts / Roboto-Regular.tff] [D: / Work / Blah / angular / BlahFrontEnd / src / asset / fonts / Roboto-Regular.tff.ts] [ D: / Work / Blah / angular / BlahFrontEnd / src / asset / fonts / Roboto-Regular.tff.js] @ ./~/css-loader?sourcemap!./~/postcss-loader!./src/styles. css 6: 793-837 @ ./src/styles.css @ multi styles

5. Si agrego la definición de fuente tipográfica en app.component.scss , también obtengo un error 404

   jquery.js: 2 GET http://localhost:4200/assets/fonts/Roboto-Regular.tff 404

¿Alguna idea de cómo incluir mi fuente Roboto-Regular.tff?

Atentamente

Answer 1

¿Ha intentado usar la URL de googlefont desde https://fonts.google.com ?

En tus styles.css:

@import url(''https://fonts.googleapis.com/css?family=Roboto'');

Luego use la familia de fuentes en styles.css o donde lo necesite:

body, html {
  font-family: ''Roboto'';
}

Estoy usando esto en mi proyecto y funciona muy bien.

Answer 2

Lo que has hecho fue correcto, pero con un pequeño error:

@font-face { font-family: "Roboto-Regular"; src: url("./assets/fonts/Roboto-Regular.tff"); }

Has dado tff lugar de ttf

Prueba esto :

@font-face { font-family: "Roboto-Regular"; src: url("./assets/fonts/Roboto-Regular.ttf"); }

Answer 3

Para las personas que llegan aquí buscando:

Instalar con npm:

npm install roboto-fontface --save

Agregue a los estilos en .angular-cli.json ( apps[0].styles ):

"styles": [
    "styles.css",
    "../node_modules/roboto-fontface/css/roboto/roboto-fontface.css"
],

¡Eso es todo!

Edición: desde Angular 6, este archivo se llama angular.json lugar de angular-cli.json . Agregar fuentes aún funciona de la misma manera que antes.

Answer 4

Si está utilizando SCSS puede:

Instalar roboto-fontface

npm install roboto-fontface --save

Importa en tu archivo styles.scss

@import ''~roboto-fontface/css/roboto/roboto-fontface.css'';

body {
  font-family: Roboto, Helvetica, Arial, sans-serif;
}