diff --git a/README.md b/README.md
index 3c54b37..a32ca88 100644
--- a/README.md
+++ b/README.md
@@ -39,7 +39,8 @@ This package also includes a SCSS file which allows some configuration and can b
   $base-path: '@arma-events/icon-font/dist',
   // set $class to '' to disable a generation of the css class selector
   $class: 'arma-eventicons',
-  $font-family: 'arma.events Icon Font'
+  $font-family: 'arma.events Icon Font',
+  $font-family-fallback: 'arma.events Icon Font Fallback' !default
 );
 
 // use the styles-mixin to include the relevant
diff --git a/index.scss b/index.scss
index 668b7d6..bbc60d3 100644
--- a/index.scss
+++ b/index.scss
@@ -1,12 +1,24 @@
 $base-path: '@arma-events/icon-font/dist' !default;
 $class: 'arma-eventicons' !default;
 $font-family: 'arma.events Icon Font' !default;
+$font-family-fallback: 'arma.events Icon Font Fallback' !default;
+
+// this fallback font is to make sure icons are invisible (size = 0%)
+// while the webfont is still loading, to make sure the text is not visible
+@font-face {
+  font-family: $font-family-fallback;
+  src: local('Arial');
+  size-adjust: 0%;
+  font-weight: normal;
+  font-style: normal;
+}
 
 @font-face {
   font-family: $font-family;
   src: url('#{$base-path}/icon-font.woff2') format('woff2'), url('#{$base-path}/icon-font.woff') format('woff');
   font-weight: normal;
   font-style: normal;
+  font-display: swap;
 }
 
 @mixin styles() {