From ded0f5b4e5d29110bb5ee9680b4be5ce824fe286 Mon Sep 17 00:00:00 2001 From: Kris Date: Fri, 5 Feb 2021 17:01:21 -0500 Subject: [PATCH] UX: Remove Helvetica from our font stack (#11876) Arial is more consistently available across operating systems and aligns better. --- Gemfile.lock | 2 +- .../discourse/app/lib/update-tab-count.js | 2 +- .../common/base/username_tagsinput.scss | 2 - app/assets/stylesheets/vendor/pikaday.scss | 2 +- app/assets/stylesheets/wizard.scss | 2 +- app/views/email/default_template.html | 65 +++++++++++++------ app/views/offline/offline.html.erb | 2 +- app/views/user_notifications/digest.html.erb | 14 ++-- config/site_settings.yml | 4 +- lib/email/styles.rb | 2 +- plugins/lazy-yt/assets/stylesheets/lazyYT.css | 2 +- spec/components/stylesheet/importer_spec.rb | 2 +- 12 files changed, 61 insertions(+), 40 deletions(-) diff --git a/Gemfile.lock b/Gemfile.lock index 4ed985371a4..260c4328e4c 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -106,7 +106,7 @@ GEM jquery-rails (>= 1.0.17) railties (>= 3.1) discourse-ember-source (3.12.2.2) - discourse-fonts (0.0.5) + discourse-fonts (0.0.6) discourse_image_optim (0.26.2) exifr (~> 1.2, >= 1.2.2) fspath (~> 3.0) diff --git a/app/assets/javascripts/discourse/app/lib/update-tab-count.js b/app/assets/javascripts/discourse/app/lib/update-tab-count.js index db574730a90..918c51f2f5c 100644 --- a/app/assets/javascripts/discourse/app/lib/update-tab-count.js +++ b/app/assets/javascripts/discourse/app/lib/update-tab-count.js @@ -18,7 +18,7 @@ function renderIcon(canvas, img, count) { canvas.height = canvas.width = img.width; let ctx = canvas.getContext("2d"); - ctx.font = `bold ${fontSize}px Helvetica, Arial, sans-serif`; + ctx.font = `bold ${fontSize}px Arial, sans-serif`; if (count) { ctx.globalAlpha = 0.4; diff --git a/app/assets/stylesheets/common/base/username_tagsinput.scss b/app/assets/stylesheets/common/base/username_tagsinput.scss index 4e69515c27a..41a462f7c24 100644 --- a/app/assets/stylesheets/common/base/username_tagsinput.scss +++ b/app/assets/stylesheets/common/base/username_tagsinput.scss @@ -19,7 +19,6 @@ div.tagsinput span.tag { color: #638421; margin-right: 5px; margin-bottom: 5px; - font-family: helvetica; font-size: $font-down-1; } @@ -31,7 +30,6 @@ div.tagsinput span.tag a { } div.tagsinput input { width: 80px; - font-family: helvetica; font-size: $font-down-1; border: 1px solid transparent; padding: 2px 5px; diff --git a/app/assets/stylesheets/vendor/pikaday.scss b/app/assets/stylesheets/vendor/pikaday.scss index a3f3101b756..74a1f3776b7 100644 --- a/app/assets/stylesheets/vendor/pikaday.scss +++ b/app/assets/stylesheets/vendor/pikaday.scss @@ -28,7 +28,7 @@ $pd-day-disabled-color: var(--primary) !default; $pd-week-color: var(--primary) !default; // Font -$pd-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !default; +$pd-font-family: Arial, sans-serif !default; .pika-single { diff --git a/app/assets/stylesheets/wizard.scss b/app/assets/stylesheets/wizard.scss index d1549ad1ea1..c2ba5c08142 100644 --- a/app/assets/stylesheets/wizard.scss +++ b/app/assets/stylesheets/wizard.scss @@ -714,7 +714,7 @@ body.wizard { line-height: $line-height-large; font-size: 15px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, - Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; + Oxygen-Sans, Ubuntu, Cantarell, Arial, sans-serif; #wizard-main { display: flex; diff --git a/app/views/email/default_template.html b/app/views/email/default_template.html index 99b2e94995c..53e99ab184c 100644 --- a/app/views/email/default_template.html +++ b/app/views/email/default_template.html @@ -1,26 +1,49 @@ - + + + + + + + - - - - - - + + - + %{email_content} - - -%{email_content} - - -
                                    -                        
- - + +
+                     +                     +                     +
+ diff --git a/app/views/offline/offline.html.erb b/app/views/offline/offline.html.erb index 3c6d870fb97..e7696a26016 100644 --- a/app/views/offline/offline.html.erb +++ b/app/views/offline/offline.html.erb @@ -6,7 +6,7 @@ <%= SiteSetting.title %> -
+

<%= t 'offline.title' %>

<%= t 'offline.offline_page_message' %> diff --git a/app/views/user_notifications/digest.html.erb b/app/views/user_notifications/digest.html.erb index 3ff453bb1a3..9a267c3cf0f 100644 --- a/app/views/user_notifications/digest.html.erb +++ b/app/views/user_notifications/digest.html.erb @@ -15,7 +15,7 @@ <%- else %> -
+ <%- if logo_url.blank? %> @@ -30,7 +30,7 @@
<%- end %> - +
@@ -43,7 +43,7 @@

- + @@ -219,11 +219,11 @@ <% if @popular_posts.present? %> -
+
<%=t 'user_notifications.digest.popular_posts' %>
-
+
  @@ -297,9 +297,9 @@ <%= digest_custom_html("above_popular_topics") %> <% if @other_new_for_you.present? %> -
<%=t 'user_notifications.digest.more_new' %>
+
<%=t 'user_notifications.digest.more_new' %>
- +
  diff --git a/config/site_settings.yml b/config/site_settings.yml index 6834aed5bb8..aa4c21dd6a9 100644 --- a/config/site_settings.yml +++ b/config/site_settings.yml @@ -333,11 +333,11 @@ basic: default: "" hidden: true base_font: - default: "helvetica" + default: "arial" enum: "BaseFontSetting" refresh: true heading_font: - default: "helvetica" + default: "arial" enum: "BaseFontSetting" refresh: true diff --git a/lib/email/styles.rb b/lib/email/styles.rb index 9e014eef888..2dba8966c42 100644 --- a/lib/email/styles.rb +++ b/lib/email/styles.rb @@ -203,7 +203,7 @@ module Email style('code', 'background-color: #f1f1ff; padding: 2px 5px;') style('pre code', 'display: block; background-color: #f1f1ff; padding: 5px;') style('.featured-topic a', "text-decoration: none; font-weight: bold; color: #{SiteSetting.email_link_color}; line-height:1.5em;") - style('.summary-email', "-moz-box-sizing:border-box;-ms-text-size-adjust:100%;-webkit-box-sizing:border-box;-webkit-text-size-adjust:100%;box-sizing:border-box;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;line-height:1.3;margin:0;min-width:100%;padding:0;width:100%") + style('.summary-email', "-moz-box-sizing:border-box;-ms-text-size-adjust:100%;-webkit-box-sizing:border-box;-webkit-text-size-adjust:100%;box-sizing:border-box;color:#0a0a0a;font-family:Arial,sans-serif;font-size:14px;font-weight:400;line-height:1.3;margin:0;min-width:100%;padding:0;width:100%") style('.previous-discussion', 'font-size: 17px; color: #444; margin-bottom:10px;') style('.notification-date', "text-align:right;color:#999999;padding-right:5px;font-family:'lucida grande',tahoma,verdana,arial,sans-serif;font-size:11px") diff --git a/plugins/lazy-yt/assets/stylesheets/lazyYT.css b/plugins/lazy-yt/assets/stylesheets/lazyYT.css index 233c342c745..9a8e14e029b 100644 --- a/plugins/lazy-yt/assets/stylesheets/lazyYT.css +++ b/plugins/lazy-yt/assets/stylesheets/lazyYT.css @@ -38,7 +38,7 @@ width: 100%; height: 30px; overflow: hidden; - font-family: Arial, Helvetica, sans-serif; + font-family: Arial, sans-serif; font-size: 12px; color: #fff; background-color: rgba(0, 0, 0, 0.8); diff --git a/spec/components/stylesheet/importer_spec.rb b/spec/components/stylesheet/importer_spec.rb index acb66072c27..5787ae188f4 100644 --- a/spec/components/stylesheet/importer_spec.rb +++ b/spec/components/stylesheet/importer_spec.rb @@ -37,7 +37,7 @@ describe Stylesheet::Importer do it "includes font variable" do expect(compile_css("desktop")) - .to include(":root{--font-family: Helvetica, Arial, sans-serif}") + .to include(":root{--font-family: Arial, sans-serif}") end it "includes separate body and heading font declarations" do