How do I use google fonts in spfx web parts for SharePoint online

Question

I'm struggling hard with getting google fonts to render in my spfx component.

In my scss file, I've written the following:

@import url('https://fonts.googleapis.com/css?family=Exo+2:100,300,400,700,900');
@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,700,900');

and later in my scss I simply address them by

font-family: 'Roboto';

This works sometimes, meaning that the web part sometimes is shown with the right fonts. Sometimes it defaults to standard font. I've looked into other peoples solutions but there are only a few out there and none seems to work for me. Have anyone conquered this problem?

Answer 1

Make sure the CSS applied.

My test result.

return (
      <div className={styles.reactSpFx}>

        <div className={styles.container}>

.SCSS

@import url('https://fonts.googleapis.com/css?family=Exo+2:100,300,400,700,900');
@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,700,900');

.reactSpFx {
  .container {
    max-width: 700px;
    margin: 0px auto;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);

    font-family: "Roboto" !important;

Result: