[NTP] Font Family on WinOS should fallback to Segoe

Change Font Family to Segoe UI for custom link when
using Windows and make it bolder for fallback icon letter.

Before:
https://screenshot.googleplex.com/pRPVmEC3yc8.png
After:
https://screenshot.googleplex.com/m16uEv78QBp.png

Bug: 867778
Change-Id: I1f16dbf044cad7504617868f131b7517985cd2c2
Reviewed-on: https://chromium-review.googlesource.com/1178469
Commit-Queue: Weilun Shi <sweilun@chromium.org>
Reviewed-by: Kristi Park <kristipark@chromium.org>
Cr-Commit-Position: refs/heads/master@{#586357}

chrome/app/resources/locale_settings_chromiumos.grd

@@ -137,6 +137,11 @@
         Arimo
       </message>
 
+      <!-- The default value for |WebPreference::ntp_font_family| -->
+      <message name="IDS_NTP_FONT_FAMILY" use_name_for_id="true">
+        Roboto
+      </message>
+
       <!-- The default value for |WebPreference::cursive_font_family| -->
       <message name="IDS_CURSIVE_FONT_FAMILY" use_name_for_id="true">
         Comic Sans MS

chrome/app/resources/locale_settings_google_chromeos.grd

@@ -137,6 +137,11 @@
         Arimo
       </message>
 
+      <!-- The default value for |WebPreference::ntp_font_family| -->
+      <message name="IDS_NTP_FONT_FAMILY" use_name_for_id="true">
+        Roboto
+      </message>
+
       <!-- The default value for |WebPreference::cursive_font_family| -->
       <message name="IDS_CURSIVE_FONT_FAMILY" use_name_for_id="true">
         Comic Sans MS

chrome/app/resources/locale_settings_linux.grd

@@ -137,6 +137,11 @@
         Arial
       </message>
 
+      <!-- The default value for |WebPreference::ntp_font_family| -->
+      <message name="IDS_NTP_FONT_FAMILY" use_name_for_id="true">
+        Roboto
+      </message>
+
       <!-- The default value for |WebPreference::cursive_font_family| -->
       <message name="IDS_CURSIVE_FONT_FAMILY" use_name_for_id="true">
         Comic Sans MS

chrome/app/resources/locale_settings_mac.grd

@@ -132,6 +132,11 @@
         Times
       </message>
 
+      <!-- The default value for |WebPreference::ntp_font_family| -->
+      <message name="IDS_NTP_FONT_FAMILY" use_name_for_id="true">
+        Roboto
+      </message>
+
       <!-- The default value for |WebPreference::sans_serif_font_family| -->
       <message name="IDS_SANS_SERIF_FONT_FAMILY" use_name_for_id="true">
         Helvetica

chrome/app/resources/locale_settings_win.grd

@@ -142,6 +142,11 @@
         Arial
       </message>
 
+      <!-- The default value for |WebPreference::ntp_font_family| -->
+      <message name="IDS_NTP_FONT_FAMILY" use_name_for_id="true">
+        Segoe UI
+      </message>
+
       <!-- The default value for |WebPreference::cursive_font_family| -->
       <message name="IDS_CURSIVE_FONT_FAMILY" use_name_for_id="true">
         Comic Sans MS

chrome/browser/resources/local_ntp/most_visited_single.css

@@ -465,7 +465,7 @@ body.dark-theme .md-tile-container:active + .md-menu::after {
 
 .md-fallback-letter {
   color: white;
-  font-family: sans-serif;
+  font-family: 'Segoe UI', 'Roboto', arial, sans-serif;
   font-size: var(--md-fallback-letter-size);
   height: var(--md-fallback-letter-size);
   line-height: var(--md-fallback-letter-size);
@@ -485,7 +485,7 @@ body.dark-theme .md-tile-container:active + .md-menu::after {
 
 .md-title {
   color: rgba(33, 32, 36, 0.86);
-  font-family: 'Roboto', arial, sans-serif;
+  font-family: 'Segoe UI', 'Roboto', arial, sans-serif;
   font-size: var(--md-title-font-size);
   font-weight: 500;
   height: var(--md-title-height);

chrome/browser/resources/local_ntp/most_visited_single.js

@@ -764,6 +764,9 @@ function renderMaterialDesignTile(data) {
       let fallbackLetter = document.createElement('div');
       fallbackLetter.className = CLASSES.MD_FALLBACK_LETTER;
       fallbackLetter.innerText = data.title.charAt(0).toUpperCase();
+      if (navigator.userAgent.indexOf('Windows') > -1) {
+        fallbackLetter.style.fontWeight = 600;
+      }
       mdFavicon.classList.add(CLASSES.FAILED_FAVICON);
 
       fallbackBackground.appendChild(fallbackLetter);

chrome/browser/search/ntp_icon_source.cc

@@ -12,6 +12,7 @@
 #include "base/memory/ref_counted_memory.h"
 #include "base/sha1.h"
 #include "base/strings/string_number_conversions.h"
+#include "build/build_config.h"
 #include "cc/paint/skia_paint_canvas.h"
 #include "chrome/browser/favicon/favicon_service_factory.h"
 #include "chrome/browser/history/top_sites_factory.h"
@@ -148,12 +149,18 @@ void DrawFallbackIconLetter(const GURL& icon_url,
   if (font_size <= 0)
     return;
 
+  gfx::Font::Weight font_weight = gfx::Font::Weight::NORMAL;
+
+#if defined(OS_WIN)
+  font_weight = gfx::Font::Weight::SEMIBOLD;
+#endif
+
   // TODO(crbug.com/853780): Adjust the text color according to the background
   // color.
   canvas->DrawStringRectWithFlags(
       icon_text,
-      gfx::FontList({l10n_util::GetStringUTF8(IDS_SANS_SERIF_FONT_FAMILY)},
-                    gfx::Font::NORMAL, font_size, gfx::Font::Weight::NORMAL),
+      gfx::FontList({l10n_util::GetStringUTF8(IDS_NTP_FONT_FAMILY)},
+                    gfx::Font::NORMAL, font_size, font_weight),
       SK_ColorWHITE, gfx::Rect(0, 0, size, size),
       gfx::Canvas::TEXT_ALIGN_CENTER);
 }