diff --git a/src/patterns/01-core/font-face/DroidSerif-Bold-webfont.woff b/src/patterns/01-core/font-face/DroidSerif-Bold-webfont.woff
deleted file mode 100644
index 34e60c600c7fb139794737c0b516e11ed04345cb..0000000000000000000000000000000000000000
Binary files a/src/patterns/01-core/font-face/DroidSerif-Bold-webfont.woff and /dev/null differ
diff --git a/src/patterns/01-core/font-face/DroidSerif-Regular-webfont.woff b/src/patterns/01-core/font-face/DroidSerif-Regular-webfont.woff
deleted file mode 100644
index 4c17b4da011d321174346a0cccded93c223e905a..0000000000000000000000000000000000000000
Binary files a/src/patterns/01-core/font-face/DroidSerif-Regular-webfont.woff and /dev/null differ
diff --git a/src/patterns/01-core/font-face/_index.scss b/src/patterns/01-core/font-face/_index.scss
index 1927e3f7f0491df22809437f81b7c71bddd25b6c..2b20dbde12667962600c71d1afc3124146ccd55d 100644
--- a/src/patterns/01-core/font-face/_index.scss
+++ b/src/patterns/01-core/font-face/_index.scss
@@ -1,20 +1,527 @@
-// @file
-// Styles for Font face.
+@font-face {
+  font-family: 'BureauGrotCond Book';
+  font-style: normal;
+  font-weight: normal;
+  src: url('fonts/Bureau_Grot-Condensed_Book.eot'), url('fonts/Bureau_Grot-Condensed_Book.eot?#iefix') format('embedded-opentype'), url('fonts/Bureau_Grot-Condensed_Book.woff2') format('woff2'), url('fonts/Bureau_Grot-Condensed_Book.woff') format('woff'), url('fonts/Bureau_Grot-Condensed_Book.ttf') format('truetype'), url('fonts/Bureau_Grot-Condensed_Book.svg#Bureau_Grot-Condensed_Book') format('svg');
+}
+
+@font-face {
+  font-family: 'BureauGrotWide';
+  font-style: normal;
+  font-weight: 300;
+  src: url('fonts/Bureau_Grot-Wide_Light.eot'), url('fonts/Bureau_Grot-Wide_Light.eot?#iefix') format('embedded-opentype'), url('fonts/Bureau_Grot-Wide_Light.woff2') format('woff2'), url('fonts/Bureau_Grot-Wide_Light.woff') format('woff'), url('fonts/Bureau_Grot-Wide_Light.ttf') format('truetype'), url('fonts/Bureau_Grot-Wide_Light.svg#Bureau_Grot-Wide_Light') format('svg');
+}
+
+@font-face {
+  font-family: 'BureauGrot Book';
+  font-style: normal;
+  font-weight: normal;
+  src: url('fonts/Bureau_Grot-Book.eot'), url('fonts/Bureau_Grot-Book.eot?#iefix') format('embedded-opentype'), url('fonts/Bureau_Grot-Book.woff2') format('woff2'), url('fonts/Bureau_Grot-Book.woff') format('woff'), url('fonts/Bureau_Grot-Book.ttf') format('truetype'), url('fonts/Bureau_Grot-Book.svg#Bureau_Grot-Book') format('svg');
+}
+
+@font-face {
+  font-family: 'BureauGrotCond';
+  font-style: normal;
+  font-weight: bold;
+  src: url('fonts/Bureau_Grot-Condensed_Bold.eot'), url('fonts/Bureau_Grot-Condensed_Bold.eot?#iefix') format('embedded-opentype'), url('fonts/Bureau_Grot-Condensed_Bold.woff2') format('woff2'), url('fonts/Bureau_Grot-Condensed_Bold.woff') format('woff'), url('fonts/Bureau_Grot-Condensed_Bold.ttf') format('truetype'), url('fonts/Bureau_Grot-Condensed_Bold.svg#Bureau_Grot-Condensed_Bold') format('svg');
+}
+
+@font-face {
+  font-family: 'BureauGrot';
+  font-style: normal;
+  font-weight: 300;
+  src: url('fonts/Bureau_Grot-Light.eot'), url('fonts/Bureau_Grot-Light.eot?#iefix') format('embedded-opentype'), url('fonts/Bureau_Grot-Light.woff2') format('woff2'), url('fonts/Bureau_Grot-Light.woff') format('woff'), url('fonts/Bureau_Grot-Light.ttf') format('truetype'), url('fonts/Bureau_Grot-Light.svg#Bureau_Grot-Light') format('svg');
+}
+
+@font-face {
+  font-family: 'BureauGrotWide Book';
+  font-style: normal;
+  font-weight: normal;
+  src: url('fonts/Bureau_Grot-Wide_Book.eot'), url('fonts/Bureau_Grot-Wide_Book.eot?#iefix') format('embedded-opentype'), url('fonts/Bureau_Grot-Wide_Book.woff2') format('woff2'), url('fonts/Bureau_Grot-Wide_Book.woff') format('woff'), url('fonts/Bureau_Grot-Wide_Book.ttf') format('truetype'), url('fonts/Bureau_Grot-Wide_Book.svg#Bureau_Grot-Wide_Book') format('svg');
+}
+
+@font-face {
+  font-family: 'iconic';
+  font-style: normal;
+  font-weight: normal;
+  src: url("fonts/iconic.eot");
+  src: url("fonts/iconic.eot?#iefix") format("embedded-opentype"), url("..fonts/iconic.svg#iconic") format("svg"), url("fonts/iconic.woff") format("woff"), url("fonts/iconic.ttf") format("truetype");
+}
+
+/* Complete 1451 */
+
+@font-face {
+  font-family: "Typ1451-Regularalternate";
+  font-style: normal;
+  font-weight: normal;
+  src: url("fonts/lineto-typ1451-regularalternate.eot"), url("fonts/lineto-typ1451-regularalternate.eot?#iefix") format("embedded-opentype"), url("fonts/lineto-typ1451-regularalternate.woff2") format("woff2"), url("fonts/lineto-typ1451-regularalternate.woff") format("woff");
+}
+
+@font-face {
+  font-family: "Typ1451-Mediumalternate";
+  font-style: normal;
+  font-weight: normal;
+  src: url("fonts/lineto-typ1451-mediumalternate.eot"), url("fonts/lineto-typ1451-mediumalternate.eot?#iefix") format("embedded-opentype"), url("fonts/lineto-typ1451-mediumalternate.woff2") format("woff2"), url("fonts/lineto-typ1451-mediumalternate.woff") format("woff");
+}
+
+@font-face {
+  font-family: "Typ1451-Regular";
+  font-style: normal;
+  font-weight: normal;
+  src: url("fonts/lineto-typ1451-regular.eot"), url("fonts/lineto-typ1451-regular.eot?#iefix") format("embedded-opentype"), url("fonts/lineto-typ1451-regular.woff2") format("woff2"), url("fonts/lineto-typ1451-regular.woff") format("woff");
+}
+
+@font-face {
+  font-family: "Typ1451-Boldalternate";
+  font-style: normal;
+  font-weight: normal;
+  src: url("fonts/lineto-typ1451-boldalternate.eot"), url("fonts/lineto-typ1451-boldalternate.eot?#iefix") format("embedded-opentype"), url("fonts/lineto-typ1451-boldalternate.woff2") format("woff2"), url("fonts/lineto-typ1451-boldalternate.woff") format("woff");
+}
 
-// Droid Serif Regular.
 @font-face {
-  font-family: 'droid';
+  font-family: "Typ1451-Medium";
   font-style: normal;
-  font-weight: 400;
-  font-display: fallback;
-  src: url('../fonts/DroidSerif-Regular-webfont.woff') format('woff');
+  font-weight: normal;
+  src: url("fonts/lineto-typ1451-medium.eot"), url("fonts/lineto-typ1451-medium.eot?#iefix") format("embedded-opentype"), url("fonts/lineto-typ1451-medium.woff2") format("woff2"), url("fonts/lineto-typ1451-medium.woff") format("woff");
 }
 
-// Droid Serif Bold.
 @font-face {
-  font-family: 'droid';
+  font-family: "Typ1451-Bold";
   font-style: normal;
-  font-weight: 700;
-  font-display: fallback;
-  src: url('../fonts/DroidSerif-Bold-webfont.woff') format('woff');
+  font-weight: normal;
+  src: url("fonts/lineto-typ1451-bold.eot"), url("fonts/lineto-typ1451-bold.eot?#iefix") format("embedded-opentype"), url("fonts/lineto-typ1451-bold.woff2") format("woff2"), url("fonts/lineto-typ1451-bold.woff") format("woff");
+}
+
+@font-face {
+  font-family: "Typ1451-Light";
+  font-style: normal;
+  font-weight: normal;
+  src: url("fonts/lineto-typ1451-light.eot"), url("fonts/lineto-typ1451-light.eot?#iefix") format("embedded-opentype"), url("fonts/lineto-typ1451-light.woff2") format("woff2"), url("fonts/lineto-typ1451-light.woff") format("woff");
+}
+
+@font-face {
+  font-family: "Typ1451-Lightalternate";
+  font-style: normal;
+  font-weight: normal;
+  src: url("fonts/lineto-typ1451-lightalternate.eot"), url("fonts/lineto-typ1451-lightalternate.eot?#iefix") format("embedded-opentype"), url("fonts/lineto-typ1451-lightalternate.woff2") format("woff2"), url("fonts/lineto-typ1451-lightalternate.woff") format("woff");
+}
+
+@font-face {
+  font-family: "fdsu-rwd";
+  font-style: normal;
+  font-weight: normal;
+  src: url("fonts/fdsu-rwd.eot"), url("fonts/fdsu-rwd.eot?#iefix") format("embedded-opentype"), url("fonts/fdsu-rwd.ttf") format("truetype"), url("fonts/fdsu-rwd.woff") format("woff"), url("fonts/fdsu-rwd.svg?#fdsu-rwd") format("svg");
+}
+
+$fdsu-vimeo: "\e901";
+$fdsu-vimeo-box: "\e900";
+$fdsu-add-to-calendar: "\2605";
+$fdsu-envelope: "\e0eb";
+$fdsu-bubble: "\e15f";
+$fdsu-binoculars: "\e1b5";
+$fdsu-search: "\e1b6";
+$fdsu-search-2: "\e1b7";
+$fdsu-search-shade: "\e1bb";
+$fdsu-arrow-right: "\e3b5";
+$fdsu-googleplus-box: "\e495";
+$fdsu-github: "\e4ba";
+$fdsu-github-box: "\e4bb";
+$fdsu-yahoo: "\e4c4";
+$fdsu-tux: "\e4c5";
+$fdsu-apple: "\e4c6";
+$fdsu-finder: "\e4c7";
+$fdsu-android: "\e4c8";
+$fdsu-windows: "\e4c9";
+$fdsu-windows8: "\e4ca";
+$fdsu-skype: "\e4cd";
+$fdsu-html5: "\e4eb";
+$fdsu-css3: "\e4ec";
+$fdsu-chrome: "\e4ed";
+$fdsu-firefox: "\e4ee";
+$fdsu-ie: "\e4ef";
+$fdsu-opera: "\e4f0";
+$fdsu-safari: "\e4f1";
+$fdsu-close: "\e902";
+$fdsu-si-comm: "\e903";
+$fdsu-info: "\e904";
+$fdsu-info-2: "\e905";
+$fdsu-chevron: "\e906";
+$fdsu-ical: "\e907";
+$fdsu-arrow: "\e908";
+$fdsu-comment: "\e909";
+$fdsu-share: "\e90a";
+$fdsu-facebook: "\e90b";
+$fdsu-facebook-box: "\e90c";
+$fdsu-instagram-box: "\e90d";
+$fdsu-instagram: "\e90e";
+$fdsu-linkedin: "\e90f";
+$fdsu-linkedin-box: "\e910";
+$fdsu-twitter: "\e911";
+$fdsu-twitter-box: "\e912";
+$fdsu-youtube-box: "\e913";
+$fdsu-youtube: "\e914";
+$fdsu-calendar: "\e915";
+$fdsu-cloud: "\e916";
+$fdsu-rss-box: "\e917";
+$fdsu-snapchat: "\e918";
+$fdsu-si-comp: "\e921";
+$fdsu-si-infrastructure: "\e927";
+$fdsu-si-professionals: "\e928";
+$fdsu-si-security: "\e929";
+$fdsu-si-teach: "\e92a";
+$fdsu-clock2: "\e94f";
+$fdsu-spoon-knife: "\e9a3";
+$fdsu-location: "\e930";
+
+.fdsu-vimeo {
+  &::before{
+    content: $fdsu-vimeo;
+  }
+}
+
+.fdsu-vimeo-box {
+  &::before{
+    content: $fdsu-vimeo-box;
+  }
+}
+
+.fdsu-add-to-calendar {
+  &::before{
+    content: $fdsu-add-to-calendar;
+  }
+}
+
+.fdsu-envelope {
+  &::before{
+    content: $fdsu-envelope;
+  }
+}
+
+.fdsu-bubble {
+  &::before{
+    content: $fdsu-bubble;
+  }
+}
+.fdsu-binoculars {
+  &::before{
+    content: $fdsu-binoculars;
+  }
+}
+
+.fdsu-search {
+  &::before{
+    content: $fdsu-search;
+  }
+}
+
+.fdsu-search-2 {
+  &::before{
+    content: $fdsu-search-2;
+  }
+}
+
+.fdsu-search-shade {
+  &::before{
+    content: $fdsu-search-shade;
+  }
+}
+
+.fdsu-arrow-right {
+  &::before{
+    content: $fdsu-arrow-right;
+  }
+}
+
+.fdsu-googleplus-box {
+  &::before{
+    content: $fdsu-googleplus-box;
+  }
+}
+
+.fdsu-github {
+  &::before{
+    content: $fdsu-github;
+  }
+}
+
+.fdsu-github-box {
+  &::before{
+    content: $fdsu-github-box;
+  }
+}
+
+.fdsu-yahoo {
+  &::before{
+    content: $fdsu-yahoo;
+  }
+}
+
+.fdsu-tux {
+  &::before{
+    content: $fdsu-tux;
+  }
+}
+
+.fdsu-apple {
+  &::before{
+    content: $fdsu-apple;
+  }
+}
+
+.fdsu-finder {
+  &::before{
+    content: $fdsu-finder;
+  }
+}
+
+.fdsu-android {
+  &::before{
+    content: $fdsu-android;
+  }
+}
+
+.fdsu-windows {
+  &::before{
+    content: $fdsu-windows;
+  }
+}
+
+.fdsu-windows8 {
+  &::before{
+    content: $fdsu-windows8;
+  }
+}
+
+.fdsu-skype {
+  &::before{
+    content: $fdsu-skype;
+  }
+}
+
+.fdsu-html5 {
+  &::before{
+    content: $fdsu-html5;
+  }
+}
+
+.fdsu-css3 {
+  &::before{
+    content: $fdsu-css3;
+  }
+}
+
+.fdsu-chrome {
+  &::before{
+    content: $fdsu-chrome;
+  }
+}
+
+.fdsu-firefox {
+  &::before{
+    content: $fdsu-firefox;
+  }
+}
+
+.fdsu-ie {
+  &::before{
+    content: $fdsu-ie;
+  }
+}
+
+.fdsu-opera {
+  &::before{
+    content: $fdsu-opera;
+  }
+}
+
+.fdsu-safari {
+  &::before{
+    content: $fdsu-safari;
+  }
+}
+
+.fdsu-close {
+  &::before{
+    content: $fdsu-close;
+  }
+}
+
+.fdsu-si-comm {
+  &::before{
+    content: $fdsu-si-comm;
+  }
+}
+
+.fdsu-info {
+  &::before{
+    content: $fdsu-info;
+  }
+}
+
+.fdsu-info-2 {
+  &::before{
+    content: $fdsu-info-2;
+  }
+}
+
+.fdsu-chevron {
+  &::before{
+    content: $fdsu-chevron;
+  }
+}
+
+.fdsu-ical {
+  &::before{
+    content: $fdsu-ical;
+  }
+}
+
+.fdsu-arrow {
+  &::before{
+    content: $fdsu-arrow;
+  }
+}
+
+.fdsu-comment {
+  &::before{
+    content: $fdsu-comment;
+  }
+}
+
+.fdsu-share {
+  &::before{
+    content: $fdsu-share;
+  }
+}
+
+.fdsu-facebook {
+  &::before{
+    content: $fdsu-facebook;
+  }
+}
+
+.fdsu-facebook-box {
+  &::before{
+    content: $fdsu-facebook-box;
+  }
+}
+
+.fdsu-instagram-box {
+  &::before{
+    content: $fdsu-instagram-box;
+  }
+}
+
+.fdsu-instagram {
+  &::before{
+    content: $fdsu-instagram;
+  }
+}
+
+.fdsu-linkedin {
+  &::before{
+    content: $fdsu-linkedin;
+  }
+}
+
+.fdsu-linkedin-box {
+  &::before{
+    content: $fdsu-linkedin-box;
+  }
+}
+
+.fdsu-twitter {
+  &::before{
+    content: $fdsu-twitter;
+  }
+}
+
+.fdsu-twitter-box {
+  &::before{
+    content: $fdsu-twitter-box;
+  }
+}
+
+.fdsu-youtube-box {
+  &::before{
+    content: $fdsu-youtube-box;
+  }
+}
+
+.fdsu-youtube {
+  &::before{
+    content: $fdsu-youtube;
+  }
+}
+
+.fdsu-calendar {
+  &::before{
+    content: $fdsu-calendar;
+  }
+}
+
+.fdsu-cloud {
+  &::before{
+    content: $fdsu-cloud;
+  }
+}
+
+.fdsu-rss-box {
+  &::before{
+    content: $fdsu-rss-box;
+  }
+}
+
+.fdsu-snapchat {
+  &::before{
+    content: $fdsu-snapchat;
+  }
+}
+
+.fdsu-si-comp {
+  &::before{
+    content: $fdsu-si-comp;
+  }
+}
+
+.fdsu-si-infrastructure {
+  &::before{
+    content: $fdsu-si-infrastructure;
+  }
+}
+
+.fdsu-si-professionals {
+  &::before{
+    content: $fdsu-si-professionals;
+  }
+}
+
+.fdsu-si-security {
+  &::before{
+    content: $fdsu-si-security;
+  }
+}
+
+.fdsu-si-teach {
+  &::before{
+    content: $fdsu-si-teach;
+  }
+}
+
+.fdsu-clock2 {
+  &::before{
+    content: $fdsu-clock2;
+  }
+}
+
+.fdsu-spoon-knife {
+  &::before{
+    content: $fdsu-spoon-knife;
+  }
+}
+
+.fdsu-location {
+  &::before{
+    content: $fdsu-location;
+  }
 }
diff --git a/src/patterns/01-core/font-face/fonts.twig b/src/patterns/01-core/font-face/fonts.twig
new file mode 100644
index 0000000000000000000000000000000000000000..3673cbe388917e6fc3e4a8e039adcd8402da5b71
--- /dev/null
+++ b/src/patterns/01-core/font-face/fonts.twig
@@ -0,0 +1,6 @@
+{% for font in fonts %}
+  <h3>{{ font }}</h3>
+  <div style="font-family: '{{ font }}'">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu augue ut lectus arcu bibendum at varius vel pharetra. Gravida dictum fusce ut placerat. Tincidunt dui ut ornare lectus sit. Justo nec ultrices dui sapien. Nunc aliquet bibendum enim facilisis gravida neque convallis a cras. Mattis nunc sed blandit libero volutpat. Ut sem nulla pharetra diam sit amet nisl suscipit adipiscing. In mollis nunc sed id semper risus in hendrerit. Id nibh tortor id aliquet lectus proin. Ultricies leo integer malesuada nunc. Amet nisl suscipit adipiscing bibendum est ultricies.
+  </div>
+{% endfor %}
diff --git a/src/patterns/01-core/font-face/fonts.yml b/src/patterns/01-core/font-face/fonts.yml
new file mode 100644
index 0000000000000000000000000000000000000000..602922a81bed3849fc89bd57a1a429535af067ed
--- /dev/null
+++ b/src/patterns/01-core/font-face/fonts.yml
@@ -0,0 +1,18 @@
+fonts:
+  - 'BureauGrotCond Book'
+  - 'BureauGrotWide'
+  - 'BureauGrot Book'
+  - 'BureauGrotCond'
+  - 'BureauGrot'
+  - 'BureauGrotWide Book'
+  - 'iconic'
+  - 'Typ1451-Regularalternate'
+  - 'Typ1451-Mediumalternate'
+  - 'Typ1451-Regular'
+  - 'Typ1451-Boldalternate'
+  - 'Typ1451-Medium'
+  - 'Typ1451-Bold'
+  - 'Typ1451-Light'
+  - 'Typ1451-Lightalternate'
+  - 'fdsu-rwd'
+  -