diff --git a/Gemfile.lock b/Gemfile.lock
index 18ea6e44fd3..1085a067b19 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -105,7 +105,7 @@ GEM
       jquery-rails (>= 1.0.17)
       railties (>= 3.1)
     discourse-ember-source (3.12.2.2)
-    discourse-fonts (0.0.3)
+    discourse-fonts (0.0.4)
     discourse_image_optim (0.26.2)
       exifr (~> 1.2, >= 1.2.2)
       fspath (~> 3.0)
diff --git a/app/assets/javascripts/wizard/components/font-preview.js b/app/assets/javascripts/wizard/components/font-preview.js
index a41aa21f17e..1a5d71bc5bc 100644
--- a/app/assets/javascripts/wizard/components/font-preview.js
+++ b/app/assets/javascripts/wizard/components/font-preview.js
@@ -37,7 +37,6 @@ export default createPreviewComponent(305, 165, {
 
   paint(ctx, colors, font, width, height) {
     const headerHeight = height * 0.3;
-
     this.drawFullHeader(colors, font);
 
     const margin = width * 0.04;
diff --git a/app/assets/javascripts/wizard/models/wizard.js b/app/assets/javascripts/wizard/models/wizard.js
index e7b96bc37f4..db2f583c210 100644
--- a/app/assets/javascripts/wizard/models/wizard.js
+++ b/app/assets/javascripts/wizard/models/wizard.js
@@ -80,7 +80,7 @@ const Wizard = EmberObject.extend({
       return;
     }
 
-    return option.data.font_stack.split(",")[0];
+    return option.data.name;
   },
 });
 
diff --git a/lib/stylesheet/importer.rb b/lib/stylesheet/importer.rb
index 882ed5c5ebf..9d4df50db2c 100644
--- a/lib/stylesheet/importer.rb
+++ b/lib/stylesheet/importer.rb
@@ -62,6 +62,15 @@ module Stylesheet
         contents = +""
 
         DiscourseFonts.fonts.each do |font|
+          if font[:key] == "system"
+            # Overwrite font definition because the preview canvases in the wizard require explicit @font-face definitions.
+            # uses same technique as https://github.com/jonathantneal/system-font-css
+            font[:variants] = [
+              { src: 'local(".SFNS-Regular"), local(".SFNSText-Regular"), local(".HelveticaNeueDeskInterface-Regular"), local(".LucidaGrandeUI"), local("Segoe UI"), local("Ubuntu"), local("Roboto-Regular"), local("DroidSans"), local("Tahoma")', weight: 400 },
+              { src: 'local(".SFNS-Bold"), local(".SFNSText-Bold"), local(".HelveticaNeueDeskInterface-Bold"), local(".LucidaGrandeUI"), local("Segoe UI Bold"), local("Ubuntu Bold"), local("Roboto-Bold"), local("DroidSans-Bold"), local("Tahoma Bold")', weight: 700 }
+            ]
+          end
+
           contents << font_css(font)
           contents << <<~EOF
             .font-#{font[:key].tr("_", "-")} {
@@ -266,10 +275,11 @@ module Stylesheet
 
       if font[:variants].present?
         font[:variants].each do |variant|
+          src = variant[:src] ? variant[:src] : "asset-url(\"/fonts/#{variant[:filename]}?v=#{DiscourseFonts::VERSION}\") format(\"#{variant[:format]}\")"
           contents << <<~EOF
             @font-face {
               font-family: #{font[:name]};
-              src: asset-url("/fonts/#{variant[:filename]}?v=#{DiscourseFonts::VERSION}") format("#{variant[:format]}");
+              src: #{src};
               font-weight: #{variant[:weight]};
             }
           EOF
diff --git a/lib/wizard/builder.rb b/lib/wizard/builder.rb
index 27fc715aac8..7594e54dff5 100644
--- a/lib/wizard/builder.rb
+++ b/lib/wizard/builder.rb
@@ -217,7 +217,7 @@ class Wizard
         )
 
         DiscourseFonts.fonts.each do |font|
-          field.add_choice(font[:key], data: { class: font[:key].tr("_", "-"), font_stack: font[:stack] })
+          field.add_choice(font[:key], data: { class: font[:key].tr("_", "-"), name: font[:name] })
         end
 
         step.on_update do |updater|