Font Family Preferences for Distilled Pages

This CL adds backend support for Font Family preferences
within DistilledPagePrefs. The font families supported are
sans-serif (default), serif, and monospace. Serif and
monospace fonts are set by the browser, while sans-serif is
defined as Open Sans, and then the browser default sans-serif
font. 

BUG=383630

Review URL: https://codereview.chromium.org/430473007

Cr-Commit-Position: refs/heads/master@{#289801}
git-svn-id: svn://svn.chromium.org/chrome/trunk/src@289801 0039d316-1c4b-4281-b951-d872f2087c98

15 files changed, 333 insertions, 32 deletions

diff --git a/components/dom_distiller.gypi b/components/dom_distiller.gypi
index b18bee7..865ef51 100644
--- a/components/dom_distiller.gypi
+++ b/components/dom_distiller.gypi
@@ -83,6 +83,7 @@
             'dom_distiller/core/dom_distiller_store.h',
             'dom_distiller/core/feedback_reporter.cc',
             'dom_distiller/core/feedback_reporter.h',
+            'dom_distiller/core/font_family_list.h',
             'dom_distiller/core/task_tracker.cc',
             'dom_distiller/core/task_tracker.h',
             'dom_distiller/core/theme_list.h',
@@ -176,6 +177,7 @@
               'target_name': 'dom_distiller_core_java',
               'type': 'none',
               'dependencies': [
+                'dom_distiller_core_font_family_java',
                 'dom_distiller_core_theme_java',
                 '../base/base.gyp:base',
               ],
@@ -185,6 +187,18 @@
               'includes': [ '../build/java.gypi' ],
             },
             {
+              'target_name': 'dom_distiller_core_font_family_java',
+              'type': 'none',
+              'sources': [
+                'dom_distiller/android/java/src/org/chromium/components/dom_distiller/core/FontFamily.template',
+              ],
+              'variables': {
+                'package_name': 'org/chromium/components/dom_distiller/core',
+                'template_deps': ['dom_distiller/core/font_family_list.h'],
+              },
+              'includes': [ '../build/android/java_cpp_template.gypi' ],
+            },
+            {
               'target_name': 'dom_distiller_core_jni_headers',
               'type': 'none',
               'sources': [
diff --git a/components/dom_distiller/android/java/src/org/chromium/components/dom_distiller/core/DistilledPagePrefs.java b/components/dom_distiller/android/java/src/org/chromium/components/dom_distiller/core/DistilledPagePrefs.java
index 3ba9f7e..2f249d0 100644
--- a/components/dom_distiller/android/java/src/org/chromium/components/dom_distiller/core/DistilledPagePrefs.java
+++ b/components/dom_distiller/android/java/src/org/chromium/components/dom_distiller/core/DistilledPagePrefs.java
@@ -24,6 +24,7 @@ public final class DistilledPagePrefs {
      * Observer interface for observing DistilledPagePrefs changes.
      */
     public interface Observer {
+        void onChangeFontFamily(FontFamily font);
         void onChangeTheme(Theme theme);
     }
 
@@ -40,6 +41,12 @@ public final class DistilledPagePrefs {
         }
 
         @CalledByNative("DistilledPagePrefsObserverWrapper")
+        private void onChangeFontFamily(int fontFamily) {
+            mDistilledPagePrefsObserver.onChangeFontFamily(
+                    FontFamily.getFontFamilyForValue(fontFamily));
+        }
+
+        @CalledByNative("DistilledPagePrefsObserverWrapper")
         private void onChangeTheme(int theme) {
             mDistilledPagePrefsObserver.onChangeTheme(Theme.getThemeForValue(theme));
         }
@@ -90,6 +97,14 @@ public final class DistilledPagePrefs {
         return true;
     }
 
+    public void setFontFamily(FontFamily fontFamily) {
+        nativeSetFontFamily(mDistilledPagePrefsAndroid, fontFamily.asNativeEnum());
+    }
+
+    public FontFamily getFontFamily() {
+        return FontFamily.getFontFamilyForValue(nativeGetFontFamily(mDistilledPagePrefsAndroid));
+    }
+
     public void setTheme(Theme theme) {
         nativeSetTheme(mDistilledPagePrefsAndroid, theme.asNativeEnum());
     }
@@ -100,6 +115,10 @@ public final class DistilledPagePrefs {
 
     private native long nativeInit(long distilledPagePrefPtr);
 
+    private native void nativeSetFontFamily(long nativeDistilledPagePrefsAndroid, int fontFamily);
+
+    private native int nativeGetFontFamily(long nativeDistilledPagePrefsAndroid);
+
     private native void nativeSetTheme(long nativeDistilledPagePrefsAndroid, int theme);
 
     private native int nativeGetTheme(long nativeDistilledPagePrefsAndroid);
diff --git a/components/dom_distiller/android/java/src/org/chromium/components/dom_distiller/core/FontFamily.template b/components/dom_distiller/android/java/src/org/chromium/components/dom_distiller/core/FontFamily.template
new file mode 100644
index 0000000..2511549
--- /dev/null
+++ b/components/dom_distiller/android/java/src/org/chromium/components/dom_distiller/core/FontFamily.template
@@ -0,0 +1,37 @@
+// Copyright 2014 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+package org.chromium.components.dom_distiller.core;
+
+// An auto-generated enum for Font Family preferences as used by
+// org.chromium.components.dom_distiller.core.DistilledPagePrefs and
+// the corresponding native class
+// dom_distiller::android::DistilledPagePrefsAndroid
+public enum FontFamily {
+
+#define DEFINE_FONT_FAMILY(name, value) name(value),
+#include "components/dom_distiller/core/font_family_list.h"
+#undef DEFINE_FONT_FAMILY
+;
+
+private final int mFontFamily;
+
+private FontFamily(int value) {
+  mFontFamily = value;
+}
+
+int asNativeEnum() {
+  return mFontFamily;
+}
+
+static FontFamily getFontFamilyForValue(int value) {
+  for (FontFamily fontFamily: FontFamily.values()) {
+    if (fontFamily.mFontFamily == value) {
+      return fontFamily;
+    }
+  }
+  return null;
+}
+
+}
diff --git a/components/dom_distiller/content/dom_distiller_viewer_source.cc b/components/dom_distiller/content/dom_distiller_viewer_source.cc
index 39f76bd..3d26eb8 100644
--- a/components/dom_distiller/content/dom_distiller_viewer_source.cc
+++ b/components/dom_distiller/content/dom_distiller_viewer_source.cc
@@ -73,6 +73,8 @@ class DomDistillerViewerSource::RequestViewerHandle
   void Cancel();
 
   // DistilledPagePrefs::Observer implementation:
+  virtual void OnChangeFontFamily(
+      DistilledPagePrefs::FontFamily new_font_family) OVERRIDE;
   virtual void OnChangeTheme(DistilledPagePrefs::Theme new_theme) OVERRIDE;
 
   // The handle to the view request towards the DomDistillerService. It
@@ -187,8 +189,11 @@ void DomDistillerViewerSource::RequestViewerHandle::OnArticleReady(
     const DistilledArticleProto* article_proto) {
   if (page_count_ == 0) {
     // This is a single-page article.
-    std::string unsafe_page_html = viewer::GetUnsafeArticleHtml(
-        article_proto, distilled_page_prefs_->GetTheme());
+    std::string unsafe_page_html =
+        viewer::GetUnsafeArticleHtml(
+            article_proto,
+            distilled_page_prefs_->GetTheme(),
+            distilled_page_prefs_->GetFontFamily());
     callback_.Run(base::RefCountedString::TakeString(&unsafe_page_html));
   } else if (page_count_ == article_proto->pages_size()) {
     // We may still be showing the "Loading" indicator.
@@ -217,7 +222,9 @@ void DomDistillerViewerSource::RequestViewerHandle::OnArticleUpdated(
     if (page_count_ == 0) {
       // This is the first page, so send Viewer page scaffolding too.
       std::string unsafe_page_html = viewer::GetUnsafePartialArticleHtml(
-          &page, distilled_page_prefs_->GetTheme());
+          &page,
+          distilled_page_prefs_->GetTheme(),
+          distilled_page_prefs_->GetFontFamily());
       callback_.Run(base::RefCountedString::TakeString(&unsafe_page_html));
     } else {
       SendJavaScript(
@@ -236,6 +243,11 @@ void DomDistillerViewerSource::RequestViewerHandle::OnChangeTheme(
   SendJavaScript(viewer::GetDistilledPageThemeJs(new_theme));
 }
 
+void DomDistillerViewerSource::RequestViewerHandle::OnChangeFontFamily(
+    DistilledPagePrefs::FontFamily new_font) {
+  SendJavaScript(viewer::GetDistilledPageFontFamilyJs(new_font));
+}
+
 DomDistillerViewerSource::DomDistillerViewerSource(
     DomDistillerServiceInterface* dom_distiller_service,
     const std::string& scheme)
@@ -300,7 +312,8 @@ void DomDistillerViewerSource::StartDataRequest(
     delete request_viewer_handle;
 
     std::string error_page_html = viewer::GetErrorPageHtml(
-        dom_distiller_service_->GetDistilledPagePrefs()->GetTheme());
+        dom_distiller_service_->GetDistilledPagePrefs()->GetTheme(),
+        dom_distiller_service_->GetDistilledPagePrefs()->GetFontFamily());
     callback.Run(base::RefCountedString::TakeString(&error_page_html));
   }
 };
diff --git a/components/dom_distiller/content/resources/dom_distiller_viewer.js b/components/dom_distiller/content/resources/dom_distiller_viewer.js
index ea1c565..3a7d0a0 100644
--- a/components/dom_distiller/content/resources/dom_distiller_viewer.js
+++ b/components/dom_distiller/content/resources/dom_distiller_viewer.js
@@ -14,6 +14,23 @@ function showLoadingIndicator(isLastPage) {
   updateLoadingIndicator(isLastPage);
 }
 
+// Maps JS Font Family to CSS class and then changes body class name.
+// CSS classes must agree with distilledpage.css.
+function useFontFamily(fontFamily) {
+  var cssClass;
+  if (fontFamily == "serif") {
+    cssClass = "serif";
+  } else if (fontFamily == "monospace") {
+    cssClass = "monospace";
+  } else {
+    cssClass = "sans-serif";
+  }
+  // Relies on the classname order of the body being Theme class, then Font
+  // Family class.
+  var themeClass = document.body.className.split(" ")[0];
+  document.body.className = themeClass + " " + cssClass;
+}
+
 // Maps JS theme to CSS class and then changes body class name.
 // CSS classes must agree with distilledpage.css.
 function useTheme(theme) {
@@ -25,7 +42,10 @@ function useTheme(theme) {
   } else {
     cssClass = "light";
   }
-  document.body.className = cssClass;
+  // Relies on the classname order of the body being Theme class, then Font
+  // Family class.
+  var fontFamilyClass = document.body.className.split(" ")[1];
+  document.body.className = cssClass + " " + fontFamilyClass;
 }
 
 var updateLoadingIndicator = function() {
diff --git a/components/dom_distiller/core/css/distilledpage.css b/components/dom_distiller/core/css/distilledpage.css
index 2043b04..4c09a0d 100644
--- a/components/dom_distiller/core/css/distilledpage.css
+++ b/components/dom_distiller/core/css/distilledpage.css
@@ -75,7 +75,6 @@ th {
 
 body,
 html {
-  font-family: 'Open Sans', sans-serif;
   font-size: 14px;
   line-height: 1.4;
   text-rendering: optimizeLegibility;
@@ -101,6 +100,18 @@ html {
   background-color: rgb(203, 173, 141);
 }
 
+.serif {
+  font-family: serif;
+}
+
+.sans-serif {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.monospace {
+  font-family: monospace;
+}
+
 /* Define vertical rhythm (baseline grid of 4px). */
 
 blockquote,
diff --git a/components/dom_distiller/core/distilled_page_prefs.cc b/components/dom_distiller/core/distilled_page_prefs.cc
index 5c23fb4..01d1a07 100644
--- a/components/dom_distiller/core/distilled_page_prefs.cc
+++ b/components/dom_distiller/core/distilled_page_prefs.cc
@@ -14,6 +14,8 @@
 namespace {
 
 // Path to the integer corresponding to user's preference theme.
+const char kFontPref[] = "dom_distiller.font_family";
+// Path to the integer corresponding to user's preference font family.
 const char kThemePref[] = "dom_distiller.theme";
 }
 
@@ -33,6 +35,31 @@ void DistilledPagePrefs::RegisterProfilePrefs(
       kThemePref,
       DistilledPagePrefs::LIGHT,
       user_prefs::PrefRegistrySyncable::SYNCABLE_PREF);
+  registry->RegisterIntegerPref(
+      kFontPref,
+      DistilledPagePrefs::SANS_SERIF,
+      user_prefs::PrefRegistrySyncable::SYNCABLE_PREF);
+}
+
+void DistilledPagePrefs::SetFontFamily(
+    DistilledPagePrefs::FontFamily new_font_family) {
+  pref_service_->SetInteger(kFontPref, new_font_family);
+  base::MessageLoop::current()->PostTask(
+      FROM_HERE,
+      base::Bind(&DistilledPagePrefs::NotifyOnChangeFontFamily,
+                 weak_ptr_factory_.GetWeakPtr(),
+                 new_font_family));
+}
+
+DistilledPagePrefs::FontFamily DistilledPagePrefs::GetFontFamily() {
+  int font_family = pref_service_->GetInteger(kFontPref);
+  if (font_family < 0 || font_family >= DistilledPagePrefs::FONT_FAMILY_COUNT) {
+    // Persisted data was incorrect, trying to clean it up by storing the
+    // default.
+    SetFontFamily(DistilledPagePrefs::SANS_SERIF);
+    return DistilledPagePrefs::SANS_SERIF;
+  }
+  return static_cast<FontFamily>(font_family);
 }
 
 void DistilledPagePrefs::SetTheme(DistilledPagePrefs::Theme new_theme) {
@@ -52,7 +79,7 @@ DistilledPagePrefs::Theme DistilledPagePrefs::GetTheme() {
     SetTheme(DistilledPagePrefs::LIGHT);
     return DistilledPagePrefs::LIGHT;
   }
-  return (Theme) theme;
+  return static_cast<Theme>(theme);
 }
 
 void DistilledPagePrefs::AddObserver(Observer* obs) {
@@ -63,6 +90,11 @@ void DistilledPagePrefs::RemoveObserver(Observer* obs) {
   observers_.RemoveObserver(obs);
 }
 
+void DistilledPagePrefs::NotifyOnChangeFontFamily(
+    DistilledPagePrefs::FontFamily new_font_family) {
+  FOR_EACH_OBSERVER(Observer, observers_, OnChangeFontFamily(new_font_family));
+}
+
 void DistilledPagePrefs::NotifyOnChangeTheme(
     DistilledPagePrefs::Theme new_theme) {
   FOR_EACH_OBSERVER(Observer, observers_, OnChangeTheme(new_theme));
diff --git a/components/dom_distiller/core/distilled_page_prefs.h b/components/dom_distiller/core/distilled_page_prefs.h
index 7a40b27..eeec8a9 100644
--- a/components/dom_distiller/core/distilled_page_prefs.h
+++ b/components/dom_distiller/core/distilled_page_prefs.h
@@ -20,6 +20,13 @@ namespace dom_distiller {
 // Interface for preferences used for distilled page.
 class DistilledPagePrefs {
  public:
+  // Possible font families for distilled page.
+  enum FontFamily {
+#define DEFINE_FONT_FAMILY(name, value) name = value,
+#include "components/dom_distiller/core/font_family_list.h"
+#undef DEFINE_FONT_FAMILY
+  };
+
   // Possible themes for distilled page.
   enum Theme {
 #define DEFINE_THEME(name, value) name = value,
@@ -29,6 +36,7 @@ class DistilledPagePrefs {
 
   class Observer {
    public:
+    virtual void OnChangeFontFamily(FontFamily font) = 0;
     virtual void OnChangeTheme(Theme theme) = 0;
   };
 
@@ -37,6 +45,11 @@ class DistilledPagePrefs {
 
   static void RegisterProfilePrefs(user_prefs::PrefRegistrySyncable* registry);
 
+  // Sets the user's preference for the font family of distilled pages.
+  void SetFontFamily(FontFamily new_font);
+  // Returns the user's preference for the font family of distilled pages.
+  FontFamily GetFontFamily();
+
   // Sets the user's preference for the theme of distilled pages.
   void SetTheme(Theme new_theme);
   // Returns the user's preference for the theme of distilled pages.
@@ -46,6 +59,8 @@ class DistilledPagePrefs {
   void RemoveObserver(Observer* obs);
 
  private:
+  // Notifies all Observers of new font family.
+  void NotifyOnChangeFontFamily(FontFamily font_family);
   // Notifies all Observers of new theme.
   void NotifyOnChangeTheme(Theme theme);
 
diff --git a/components/dom_distiller/core/distilled_page_prefs_android.cc b/components/dom_distiller/core/distilled_page_prefs_android.cc
index e6fb247..051d821c 100644
--- a/components/dom_distiller/core/distilled_page_prefs_android.cc
+++ b/components/dom_distiller/core/distilled_page_prefs_android.cc
@@ -22,12 +22,24 @@ DistilledPagePrefsAndroid::DistilledPagePrefsAndroid(
 DistilledPagePrefsAndroid::~DistilledPagePrefsAndroid() {
 }
 
+void DistilledPagePrefsAndroid::SetFontFamily(JNIEnv* env,
+                                              jobject obj,
+                                              jint font_family) {
+  distilled_page_prefs_->SetFontFamily(
+      static_cast<DistilledPagePrefs::FontFamily>(font_family));
+}
+
+jint DistilledPagePrefsAndroid::GetFontFamily(JNIEnv* env, jobject obj) {
+  return (int) distilled_page_prefs_->GetFontFamily();
+}
+
 void DistilledPagePrefsAndroid::SetTheme(JNIEnv* env, jobject obj, jint theme) {
-  distilled_page_prefs_->SetTheme((DistilledPagePrefs::Theme)theme);
+  distilled_page_prefs_->SetTheme(
+      static_cast<DistilledPagePrefs::Theme>(theme));
 }
 
 jint DistilledPagePrefsAndroid::GetTheme(JNIEnv* env, jobject obj) {
-  return (int)distilled_page_prefs_->GetTheme();
+  return (int) distilled_page_prefs_->GetTheme();
 }
 
 jlong Init(JNIEnv* env, jobject obj, jlong distilled_page_prefs_ptr) {
@@ -71,6 +83,13 @@ void DistilledPagePrefsObserverAndroid::DestroyObserverAndroid(JNIEnv* env,
   delete this;
 }
 
+void DistilledPagePrefsObserverAndroid::OnChangeFontFamily(
+    DistilledPagePrefs::FontFamily new_font_family) {
+  JNIEnv* env = base::android::AttachCurrentThread();
+  Java_DistilledPagePrefsObserverWrapper_onChangeFontFamily(
+      env, java_ref_.obj(), (int)new_font_family);
+}
+
 void DistilledPagePrefsObserverAndroid::OnChangeTheme(
     DistilledPagePrefs::Theme new_theme) {
   JNIEnv* env = base::android::AttachCurrentThread();
diff --git a/components/dom_distiller/core/distilled_page_prefs_android.h b/components/dom_distiller/core/distilled_page_prefs_android.h
index 6f0b1c8..cc7f921 100644
--- a/components/dom_distiller/core/distilled_page_prefs_android.h
+++ b/components/dom_distiller/core/distilled_page_prefs_android.h
@@ -20,8 +20,11 @@ class DistilledPagePrefsAndroid {
                             DistilledPagePrefs* distilled_page_prefs_ptr);
   virtual ~DistilledPagePrefsAndroid();
   static bool Register(JNIEnv* env);
+  void SetFontFamily(JNIEnv* env, jobject obj, jint font_family);
+  jint GetFontFamily(JNIEnv* env, jobject obj);
   void SetTheme(JNIEnv* env, jobject obj, jint theme);
   jint GetTheme(JNIEnv* env, jobject obj);
+
   void AddObserver(JNIEnv* env, jobject obj, jlong obs);
   void RemoveObserver(JNIEnv* env, jobject obj, jlong obs);
 
@@ -37,6 +40,8 @@ class DistilledPagePrefsObserverAndroid : public DistilledPagePrefs::Observer {
   virtual ~DistilledPagePrefsObserverAndroid();
 
   // DistilledPagePrefs::Observer implementation.
+  virtual void OnChangeFontFamily(
+      DistilledPagePrefs::FontFamily new_font_family) OVERRIDE;
   virtual void OnChangeTheme(DistilledPagePrefs::Theme new_theme) OVERRIDE;
 
   virtual void DestroyObserverAndroid(JNIEnv* env, jobject obj);
diff --git a/components/dom_distiller/core/distilled_page_prefs_unittests.cc b/components/dom_distiller/core/distilled_page_prefs_unittests.cc
index 700a9fc..fe9df73 100644
--- a/components/dom_distiller/core/distilled_page_prefs_unittests.cc
+++ b/components/dom_distiller/core/distilled_page_prefs_unittests.cc
@@ -15,7 +15,16 @@ namespace {
 
 class TestingObserver : public DistilledPagePrefs::Observer {
  public:
-  TestingObserver() : theme_(DistilledPagePrefs::LIGHT) {}
+  TestingObserver()
+      : font_(DistilledPagePrefs::SANS_SERIF),
+        theme_(DistilledPagePrefs::LIGHT) {}
+
+  virtual void OnChangeFontFamily(
+      DistilledPagePrefs::FontFamily new_font) OVERRIDE {
+    font_ = new_font;
+  }
+
+  DistilledPagePrefs::FontFamily GetFontFamily() { return font_; }
 
   virtual void OnChangeTheme(DistilledPagePrefs::Theme new_theme) OVERRIDE {
     theme_ = new_theme;
@@ -24,6 +33,7 @@ class TestingObserver : public DistilledPagePrefs::Observer {
   DistilledPagePrefs::Theme GetTheme() { return theme_; }
 
  private:
+  DistilledPagePrefs::FontFamily font_;
   DistilledPagePrefs::Theme theme_;
 };
 
@@ -44,6 +54,36 @@ class DistilledPagePrefsTest : public testing::Test {
   base::MessageLoop message_loop_;
 };
 
+TEST_F(DistilledPagePrefsTest, TestingOnChangeFontIsBeingCalled) {
+  TestingObserver obs;
+  distilled_page_prefs_->AddObserver(&obs);
+  distilled_page_prefs_->SetFontFamily(DistilledPagePrefs::MONOSPACE);
+  EXPECT_EQ(DistilledPagePrefs::SANS_SERIF, obs.GetFontFamily());
+  base::RunLoop().RunUntilIdle();
+  EXPECT_EQ(DistilledPagePrefs::MONOSPACE, obs.GetFontFamily());
+  distilled_page_prefs_->SetFontFamily(DistilledPagePrefs::SERIF);
+  base::RunLoop().RunUntilIdle();
+  EXPECT_EQ(DistilledPagePrefs::SERIF, obs.GetFontFamily());
+  distilled_page_prefs_->RemoveObserver(&obs);
+}
+
+TEST_F(DistilledPagePrefsTest, TestingMultipleObserversFont) {
+  TestingObserver obs;
+  distilled_page_prefs_->AddObserver(&obs);
+  TestingObserver obs2;
+  distilled_page_prefs_->AddObserver(&obs2);
+  distilled_page_prefs_->SetFontFamily(DistilledPagePrefs::SERIF);
+  base::RunLoop().RunUntilIdle();
+  EXPECT_EQ(DistilledPagePrefs::SERIF, obs.GetFontFamily());
+  EXPECT_EQ(DistilledPagePrefs::SERIF, obs2.GetFontFamily());
+  distilled_page_prefs_->RemoveObserver(&obs);
+  distilled_page_prefs_->SetFontFamily(DistilledPagePrefs::MONOSPACE);
+  base::RunLoop().RunUntilIdle();
+  EXPECT_EQ(DistilledPagePrefs::SERIF, obs.GetFontFamily());
+  EXPECT_EQ(DistilledPagePrefs::MONOSPACE, obs2.GetFontFamily());
+  distilled_page_prefs_->RemoveObserver(&obs2);
+}
+
 TEST_F(DistilledPagePrefsTest, TestingOnChangeThemeIsBeingCalled) {
   TestingObserver obs;
   distilled_page_prefs_->AddObserver(&obs);
@@ -57,7 +97,7 @@ TEST_F(DistilledPagePrefsTest, TestingOnChangeThemeIsBeingCalled) {
   distilled_page_prefs_->RemoveObserver(&obs);
 }
 
-TEST_F(DistilledPagePrefsTest, TestingMultipleObservers) {
+TEST_F(DistilledPagePrefsTest, TestingMultipleObserversTheme) {
   TestingObserver obs;
   distilled_page_prefs_->AddObserver(&obs);
   TestingObserver obs2;
diff --git a/components/dom_distiller/core/font_family_list.h b/components/dom_distiller/core/font_family_list.h
new file mode 100644
index 0000000..9800741
--- /dev/null
+++ b/components/dom_distiller/core/font_family_list.h
@@ -0,0 +1,17 @@
+// Copyright 2014 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// This file intentionally does not have header guards, it's included
+// inside a macro to generate enum values.
+
+#ifndef DEFINE_FONT_FAMILY
+#error "DEFINE_FONT_FAMILY should be defined before including this file"
+#endif
+
+// First argument represents the enum name, second argument represents enum
+// value. FONT_FAMILY_COUNT used only by native enum.
+DEFINE_FONT_FAMILY(SANS_SERIF, 0)
+DEFINE_FONT_FAMILY(SERIF, 1)
+DEFINE_FONT_FAMILY(MONOSPACE, 2)
+DEFINE_FONT_FAMILY(FONT_FAMILY_COUNT, 3)
diff --git a/components/dom_distiller/core/viewer.cc b/components/dom_distiller/core/viewer.cc
index 7e0eb28..57d5473 100644
--- a/components/dom_distiller/core/viewer.cc
+++ b/components/dom_distiller/core/viewer.cc
@@ -34,11 +34,21 @@ const char kDarkJsTheme[] = "dark";
 const char kLightJsTheme[] = "light";
 const char kSepiaJsTheme[] = "sepia";
 
-// CSS classes.  Must agree with classes in distilledpage.css.
+// CSS Theme classes.  Must agree with classes in distilledpage.css.
 const char kDarkCssClass[] = "dark";
 const char kLightCssClass[] = "light";
 const char kSepiaCssClass[] = "sepia";
 
+// JS FontFamilies. Must agree with useFontFamily() in dom_distiller_viewer.js.
+const char kSerifJsFontFamily[] = "serif";
+const char kSansSerifJsFontFamily[] = "sans-serif";
+const char kMonospaceJsFontFamily[] = "monospace";
+
+// CSS FontFamily classes.  Must agree with classes in distilledpage.css.
+const char kSerifCssClass[] = "serif";
+const char kSansSerifCssClass[] = "sans-serif";
+const char kMonospaceCssClass[] = "monospace";
+
 // Maps themes to JS themes.
 const std::string GetJsTheme(DistilledPagePrefs::Theme theme) {
   if (theme == DistilledPagePrefs::DARK) {
@@ -50,7 +60,7 @@ const std::string GetJsTheme(DistilledPagePrefs::Theme theme) {
 }
 
 // Maps themes to CSS classes.
-const std::string GetCssClass(DistilledPagePrefs::Theme theme) {
+const std::string GetThemeCssClass(DistilledPagePrefs::Theme theme) {
   if (theme == DistilledPagePrefs::DARK) {
     return kDarkCssClass;
   } else if (theme == DistilledPagePrefs::SEPIA) {
@@ -59,12 +69,33 @@ const std::string GetCssClass(DistilledPagePrefs::Theme theme) {
   return kLightCssClass;
 }
 
+// Maps font families to JS font families.
+const std::string GetJsFontFamily(DistilledPagePrefs::FontFamily font_family) {
+  if (font_family == DistilledPagePrefs::SERIF) {
+    return kSerifJsFontFamily;
+  } else if (font_family == DistilledPagePrefs::MONOSPACE) {
+    return kMonospaceJsFontFamily;
+  }
+  return kSansSerifJsFontFamily;
+}
+
+// Maps fontFamilies to CSS fontFamily classes.
+const std::string GetFontCssClass(DistilledPagePrefs::FontFamily font_family) {
+  if (font_family == DistilledPagePrefs::SERIF) {
+    return kSerifCssClass;
+  } else if (font_family == DistilledPagePrefs::MONOSPACE) {
+    return kMonospaceCssClass;
+  }
+  return kSansSerifCssClass;
+}
+
 std::string ReplaceHtmlTemplateValues(
     const std::string& title,
     const std::string& content,
     const std::string& loading_indicator_class,
     const std::string& original_url,
-    const DistilledPagePrefs::Theme theme) {
+    const DistilledPagePrefs::Theme theme,
+    const DistilledPagePrefs::FontFamily font_family) {
   base::StringPiece html_template =
       ResourceBundle::GetSharedInstance().GetRawDataResource(
           IDR_DOM_DISTILLER_VIEWER_HTML);
@@ -72,7 +103,8 @@ std::string ReplaceHtmlTemplateValues(
   substitutions.push_back(title);                                         // $1
   substitutions.push_back(kViewerCssPath);                                // $2
   substitutions.push_back(kViewerJsPath);                                 // $3
-  substitutions.push_back(GetCssClass(theme));                            // $4
+  substitutions.push_back(GetThemeCssClass(theme) + " " +
+                          GetFontCssClass(font_family));                  // $4
   substitutions.push_back(content);                                       // $5
   substitutions.push_back(loading_indicator_class);                       // $6
   substitutions.push_back(original_url);                                  // $7
@@ -107,23 +139,22 @@ const std::string GetToggleLoadingIndicatorJs(const bool is_last_page) {
 
 const std::string GetUnsafePartialArticleHtml(
     const DistilledPageProto* page_proto,
-    const DistilledPagePrefs::Theme theme) {
+    const DistilledPagePrefs::Theme theme,
+    const DistilledPagePrefs::FontFamily font_family) {
   DCHECK(page_proto);
   std::string title = net::EscapeForHTML(page_proto->title());
   std::ostringstream unsafe_output_stream;
   unsafe_output_stream << page_proto->html();
   std::string unsafe_article_html = unsafe_output_stream.str();
   std::string original_url = page_proto->url();
-  return ReplaceHtmlTemplateValues(title,
-                                   unsafe_article_html,
-                                   "visible",
-                                   original_url,
-                                   theme);
+  return ReplaceHtmlTemplateValues(
+      title, unsafe_article_html, "visible", original_url, theme, font_family);
 }
 
 const std::string GetUnsafeArticleHtml(
     const DistilledArticleProto* article_proto,
-    const DistilledPagePrefs::Theme theme) {
+    const DistilledPagePrefs::Theme theme,
+    const DistilledPagePrefs::FontFamily font_family) {
   DCHECK(article_proto);
   std::string title;
   std::string unsafe_article_html;
@@ -146,19 +177,19 @@ const std::string GetUnsafeArticleHtml(
     original_url = article_proto->pages(0).url();
   }
 
-  return ReplaceHtmlTemplateValues(title,
-                                   unsafe_article_html,
-                                   "hidden",
-                                   original_url,
-                                   theme);
+  return ReplaceHtmlTemplateValues(
+      title, unsafe_article_html, "hidden", original_url, theme, font_family);
 }
 
-const std::string GetErrorPageHtml(const DistilledPagePrefs::Theme theme) {
+const std::string GetErrorPageHtml(
+    const DistilledPagePrefs::Theme theme,
+    const DistilledPagePrefs::FontFamily font_family) {
   std::string title = l10n_util::GetStringUTF8(
       IDS_DOM_DISTILLER_VIEWER_FAILED_TO_FIND_ARTICLE_TITLE);
   std::string content = l10n_util::GetStringUTF8(
       IDS_DOM_DISTILLER_VIEWER_FAILED_TO_FIND_ARTICLE_CONTENT);
-  return ReplaceHtmlTemplateValues(title, content, "hidden", "", theme);
+  return ReplaceHtmlTemplateValues(
+      title, content, "hidden", "", theme, font_family);
 }
 
 const std::string GetCss() {
@@ -213,6 +244,11 @@ const std::string GetDistilledPageThemeJs(DistilledPagePrefs::Theme theme) {
   return "useTheme('" + GetJsTheme(theme) + "');";
 }
 
+const std::string GetDistilledPageFontFamilyJs(
+    DistilledPagePrefs::FontFamily font_family) {
+  return "useFontFamily('" + GetJsFontFamily(font_family) + "');";
+}
+
 }  // namespace viewer
 
 }  // namespace dom_distiller
diff --git a/components/dom_distiller/core/viewer.h b/components/dom_distiller/core/viewer.h
index 5812f8c..45b7e95 100644
--- a/components/dom_distiller/core/viewer.h
+++ b/components/dom_distiller/core/viewer.h
@@ -29,7 +29,8 @@ namespace viewer {
 // unsafe, so callers must ensure rendering it does not compromise Chrome.
 const std::string GetUnsafeArticleHtml(
     const DistilledArticleProto* article_proto,
-    const DistilledPagePrefs::Theme theme);
+    const DistilledPagePrefs::Theme theme,
+    const DistilledPagePrefs::FontFamily font_family);
 
 // Returns the base Viewer HTML page based on the given |page_proto|. This is
 // supposed to be displayed to the end user. The returned HTML should be
@@ -39,7 +40,8 @@ const std::string GetUnsafeArticleHtml(
 // article.
 const std::string GetUnsafePartialArticleHtml(
     const DistilledPageProto* page_proto,
-    const DistilledPagePrefs::Theme theme);
+    const DistilledPagePrefs::Theme theme,
+    const DistilledPagePrefs::FontFamily font_family);
 
 // Returns a JavaScript blob for updating a partial view request with additional
 // distilled content. Meant for use when viewing a slow or long multi-page
@@ -55,7 +57,9 @@ const std::string GetUnsafeIncrementalDistilledPageJs(
 const std::string GetToggleLoadingIndicatorJs(const bool is_last_page);
 
 // Returns a full HTML page which displays a generic error.
-const std::string GetErrorPageHtml(const DistilledPagePrefs::Theme theme);
+const std::string GetErrorPageHtml(
+    const DistilledPagePrefs::Theme theme,
+    const DistilledPagePrefs::FontFamily font_family);
 
 // Returns the default CSS to be used for a viewer.
 const std::string GetCss();
@@ -71,6 +75,10 @@ scoped_ptr<ViewerHandle> CreateViewRequest(
     ViewRequestDelegate* view_request_delegate,
     const gfx::Size& render_view_size);
 
+// Returns JavaScript coresponding to setting the font family.
+const std::string GetDistilledPageFontFamilyJs(
+    DistilledPagePrefs::FontFamily font);
+
 // Returns JavaScript corresponding to setting a specific theme.
 const std::string GetDistilledPageThemeJs(DistilledPagePrefs::Theme theme);
 
diff --git a/components/dom_distiller/core/viewer_unittest.cc b/components/dom_distiller/core/viewer_unittest.cc
index 02ac6f5..15c839d 100644
--- a/components/dom_distiller/core/viewer_unittest.cc
+++ b/components/dom_distiller/core/viewer_unittest.cc
@@ -153,4 +153,19 @@ TEST_F(DomDistillerViewerTest, TestGetDistilledPageThemeJsOutput) {
             0);
 }
 
+TEST_F(DomDistillerViewerTest, TestGetDistilledPageFontFamilyJsOutput) {
+  std::string kSerifJsFontFamily = "useFontFamily('serif');";
+  std::string kMonospaceJsFontFamily = "useFontFamily('monospace');";
+  std::string kSansSerifJsFontFamily = "useFontFamily('sans-serif');";
+  EXPECT_EQ(kSerifJsFontFamily.compare(viewer::GetDistilledPageFontFamilyJs(
+                DistilledPagePrefs::SERIF)),
+            0);
+  EXPECT_EQ(kMonospaceJsFontFamily.compare(viewer::GetDistilledPageFontFamilyJs(
+                DistilledPagePrefs::MONOSPACE)),
+            0);
+  EXPECT_EQ(kSansSerifJsFontFamily.compare(viewer::GetDistilledPageFontFamilyJs(
+                DistilledPagePrefs::SANS_SERIF)),
+            0);
+}
+
 }  // namespace dom_distiller