Angular8: Loading Different google font per route

Question

I am using Angular8 for my frontend project and I am into a situation where I need to use different google font per angular route.

One possible solution is that I import all the google fonts that are needed in the project by importing them in the head section and the just change font-family in the component CSS file. But the drawback here is I need to download all the google font unnecessarily at my 1st app load.

Can anyone suggest a way to load a single google font per route?

Answer 1

You can use @import in each css or route from which you want to change the google font.

Component 1 css

@import url('https://fonts.googleapis.com/css?family=Odibee+Sans&display=swap');

p {
  font-family: 'Odibee Sans', cursive; /* Use font family anywhere in the component */
}

Component 2 css

@import url('https://fonts.googleapis.com/css?family=Tomorrow&display=swap');

p {
  font-family: 'Tomorrow';
}

Demo stackblitz.