Estate atento porque en esta sección encontrarás la contestación que buscas.Este artículo ha sido analizado por nuestros expertos para garantizar la calidad y veracidad de nuestro contenido.
Solución:
Debe colocar los archivos de fuentes en la carpeta de activos (puede ser una subcarpeta de fuentes dentro de los activos) y consultarlos 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;
Puedes poner el @font-face definición en su global styles.css o styles.scss 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 el styles.css o styles.scss me gusta:
"styles": [
"styles.css",
"fonts.css"
],
Puede intentar crear un css para su fuente con font-face (como se explica aquí)
Paso 1
Cree un archivo css con fuente y colóquelo en algún lugar, como en assets/fonts
fuente personalizada.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 el styles configuración
"styles":[
//...your other styles
"assets/fonts/customFonts.css"
]
No olvides reiniciar ng serve después de hacer esto
Paso 3
Usa la fuente en tu código
componente.css
span font-family: YourFontFamily;
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 puedes indicar el nombre de la familia de fuentes que ya elegiste
NOTA: el peso de la fuente y el estilo de la fuente dependen de sus archivos .woff .ttf …
Agradecemos que quieras asentar nuestro quehacer escribiendo un comentario o dejando una puntuación te estamos eternamente agradecidos.