How to inject custom CSS in Modern Site Pages using SPFx Extensions

Question

I would like to inject Custom css in modern site pages. Here i need to change all the fonts on the modern site and i would like to achieve this via App Customizer with SPFx Extensions. Any tips Or help ? Thanks in advance.

Answer 1

Check the demo shared by hugoabernier.

public onInit(): Promise<void> {
    Log.info(LOG_SOURCE, `Initialized ${strings.Title}`);

    const cssUrl: string = this.properties.cssurl;
    if (cssUrl) {
        // inject the style sheet
        const head: any = document.getElementsByTagName("head")[0] || document.documentElement;
        let customStyle: HTMLLinkElement = document.createElement("link");
        customStyle.href = cssUrl;
        customStyle.rel = "stylesheet";
        customStyle.type = "text/css";
        head.insertAdjacentElement("beforeEnd", customStyle);
    }

    return Promise.resolve();
  }