My client want's to be able to inject a Google font into their application after a build by, for instance, configuring this from a config file. My client has an application that they deploy at several of their clients, and want's to be able to choose things like the Google font used without needing to build a new solution for each deployment.
When I typically include a Google font into an Angular project, I add a link to the index.html file like so:
<head>
...
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
...
</head>
<body>
<gcp-root></gcp-root>
</body>
Since this is an HTML file, I don't think I can use a variable here for the name of the font, so this needs to be done before compile time.
Does anyone have any advice on how I might be able to have this happen at run time? Maybe I can add the link to the page at run time?
Any advice would be greatly appreciated
May be you want something like this?
Download the fonts and save the ttf file inside the src/assets/fonts folder of your project.
src/style.css:
In your src/style.css put the following piece of code:
@font-face {
font-family:"Roboto";
src:url("./assets/fonts/Roboto-Regular.ttf") format("truetype");
font-weight:normal;
font-style:normal;
}
src/assets/config.json:
In your src/assets/config.json (create config.json file) put the following piece of code:
{
"title": "Roboto"
}
.ts:
In your component put the following piece of code accordingly:
import { ConfigLoaderService } from './config-loader.service';
...
public title = '';
...
ngOnInit() {
this.title= this.configLoaderService.appTitle;
}
applyStyles() {
const styles = {'font-family' : this.title};
return styles;
}
.html:
In your template call applyStyles() like this:
<span [ngStyle]="applyStyles()">Roboto Font Family</span>