Mi cliente quiere poder inyectar una fuente de Google en su aplicación después de una compilación, por ejemplo, configurando esto desde un archivo de configuración. Mi cliente tiene una aplicación que implementa en varios de sus clientes y quiere poder elegir cosas como la fuente de Google utilizada sin necesidad de crear una nueva solución para cada implementación.
Cuando normalmente incluyo una fuente de Google en un proyecto Angular, agrego un enlace al archivo index.html así:
<head> ... <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet"> ... </head> <body> <gcp-root></gcp-root> </body>Dado que este es un archivo HTML, no creo que pueda usar una variable aquí para el nombre de la fuente, por lo que debe hacerse antes del tiempo de compilación.
¿Alguien tiene algún consejo sobre cómo podría hacer que esto suceda en tiempo de ejecución? ¿Tal vez pueda agregar el enlace a la página en tiempo de ejecución?
Cualquier consejo sería muy apreciado.
¿Puede ser que quieras algo como esto?
Descarga las fuentes y guarda el archivo ttf dentro de la carpeta src/assets/fonts de tu proyecto.
src/estilo.css:
En su src/style.css coloque el siguiente código:
@font-face { font-family:"Roboto"; src:url("./assets/fonts/Roboto-Regular.ttf") format("truetype"); font-weight:normal; font-style:normal; }src/assets/config.json:
En su src/assets/config.json (cree el archivo config.json ) coloque el siguiente código:
{ "title": "Roboto" }.ts:
En su componente, coloque el siguiente fragmento de código en consecuencia:
import { ConfigLoaderService } from './config-loader.service'; ... public title = ''; ... ngOnInit() { this.title= this.configLoaderService.appTitle; } applyStyles() { const styles = {'font-family' : this.title}; return styles; }.html:
En su plantilla, llame a applyStyles() así:
<span [ngStyle]="applyStyles()">Roboto Font Family</span>