How to import font in CSS file using Single-SPA

Mohamed Salah 0
Viewed 37

I am using Single SPA with angular and I am trying to import a font in my css file using src

@font-face {
  font-family: "Effra";
  src: url("//example/assets/fonts/effra/Effra-BoldItalic.woff2")
      format("woff2"),
    url("//example/assets/fonts/effra/Effra-BoldItalic.woff")
      format("woff");
}

But since I am using Single-SPA, this won't work, So is there a specific path I should be using to get this import work?

single-spa-angular single-spa angular
1 Answers

In your style.css file and include the font by referencing a path.

@font-face {
    font-family: "Oxygen";
    src: local("Oxygen"), url(./assets/fonts/Oxygen/Oxygen-Regular.ttf) format("truetype");
}

Here I added a Oxygen font. Now, you can use this font inside the components CSS files like this.

.container{
    font-family: "Oxygen", Arial, Helvetica, sans-serif;
    font-size: 20px;
}

Finally clear your browser cache and reload it.

Dhanushka sasanka0
Related