Add font family examples and remove WIP banner

adamwathan · adamwathan · commit f593535c7c89 · 2018-02-01T08:33:18.000-05:00
diff --git a/docs/source/_layouts/master.blade.php b/docs/source/_layouts/master.blade.php
@@ -18,7 +18,7 @@
   <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
   @stack('headScripts')
 </head>
-<body data-sidebar-visible="true" class="font-sans font-normal text-black leading-normal">
+<body data-sidebar-visible="true" class="font-aktiv font-normal text-black leading-normal">
 
 @yield('body')
 
diff --git a/docs/source/docs/fonts.blade.md b/docs/source/docs/fonts.blade.md
@@ -9,8 +9,6 @@ features:
   focus: false
 ---
 
-@include('_partials.work-in-progress')
-
 @include('_partials.class-table', [
   'rows' => [
     [
@@ -31,9 +29,39 @@ features:
   ]
 ])
 
+### Sans-serif
+
+Use `.font-sans` to apply a web safe sans-serif font family:
+
+@component('_partials.code-sample')
+<p class="font-sans text-lg text-grey-darkest text-center">
+  I'm a sans-serif paragraph.
+</p>
+@endcomponent
+
+### Serif
+
+Use `.font-serif` to apply a web safe serif font family:
+
+@component('_partials.code-sample')
+<p class="font-serif text-lg text-grey-darkest text-center">
+  I'm a serif paragraph.
+</p>
+@endcomponent
+
+### Monospaced
+
+Use `.font-mono` to apply a web safe monospaced font family:
+
+@component('_partials.code-sample')
+<p class="font-mono text-lg text-grey-darkest text-center">
+  I'm a monospaced paragraph.
+</p>
+@endcomponent
+
 ## Customizing
 
-By default Tailwind provides three font family utilities: a cross-browser sans-serif stack, a cross-browser serif stack, and a cross-browser monospace stack. You can change, add, or remove these by editing the `fonts` section of your Tailwind config.
+By default Tailwind provides three font family utilities: a cross-browser sans-serif stack, a cross-browser serif stack, and a cross-browser monospaced stack. You can change, add, or remove these by editing the `fonts` section of your Tailwind config.
 
 @component('_partials.customized-config', ['key' => 'fonts'])
 - 'sans': ['system-ui', 'BlinkMacSystemFont', ...],
diff --git a/docs/tailwind.js b/docs/tailwind.js
@@ -6,11 +6,9 @@ config.colors = Object.assign(config.colors, {
   'tailwind-teal-dark': '#2f8696',
 })
 
-config.fonts = {
-  'sans': 'aktiv-grotesk, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue',
-  'serif': 'Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif',
-  'mono': 'Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
-}
+config.fonts = Object.assign(config.fonts, {
+  'aktiv': 'aktiv-grotesk, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue',
+})
 
 config.textSizes = {
   'xs': '.75rem',     // 12px
