CODEWITHSUNDEEP
angularangular-fontawesomesingle-spasingle-spa-angular
Laxmikanth
Laxmikanth

Reputation: 21

What is the best way to load custom fonts for child application using single-SPA?

We have custom font awesome icons used in our child application, currently it is loaded in child application as an Angular component. We have no issues when running the child application as a separate application. Where as after converting application as single PA, the application is loading properly but the custom fonts are not loaded as it is looking for child application custom fonts file (.ttf or .woff) file under parent application path.

We are noticing the same issue with other Angular components such as primeng.

What is the best way to load custom fonts for child application using single-SPA?

Upvotes: 2

Views: 1319

Answers (1)

Safa
Safa

Reputation: 74

You can add from global css. https://css-tricks.com/snippets/css/using-font-face/ detailed information available here.

 @font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Upvotes: -1

Related Questions