html - change - Prácticas recomendadas/Estilo para importar fuentes en una aplicación web de 4 clics angular

set title angular 4

Question

He estado trabajando en un proyecto personal de Angular 4 y quería agregar la familia de fuentes Ubuntu a mi aplicación Angular. ¿Cuál es la mejor práctica o estilo para agregar una cantidad de fuentes personalizadas a un proyecto? Actualmente, he guardado la familia de fuentes ubuntu en /assets/fonts/ubuntu-font-family-0.83 y la he agregado al archivo CSS más externo, app.component.css con fuente.

@font-face {
   font-family: ''Ubuntu'';
   src: url(''/assets/fonts/ubuntu-font-family-0.83/Ubuntu-R.ttf'');
}

Al poner esto en el componente original, no tengo que redefinir la fuente en componentes anidados, simplemente lo trato como una familia de fuentes predeterminada.

¿Hay una forma más clara / mejor de hacer esto y aún cortar el código duplicado?

Answer 1

Hay una mejor manera de incluir fuentes en el sitio web, no solo en la aplicación angular.

Checkout https://fonts.google.com

¿Por qué es mejor?

• mayor rendimiento
• mayor probabilidad, que su cliente tendrá fuente en su caché
• no tiene que preocuparse por adjuntar archivos y usar su ancho de banda de origen

En su caso usted importaría lo siguiente en su archivo css:

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

Puede colocarlo en el archivo .css principal, incluido por index.html. O puede usar la etiqueta <link> e incluir fuentes en sus encabezados (también en index.html)

<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">