Adding new font for Close modal button

public/index.html

@@ -40,6 +40,14 @@
           font-style: normal;
       }
 
+      @font-face {
+          font-family: 'sofiapro';
+          src: url('https://assets-sharetribecom.sharetribe.com/webfonts/sofiapro/sofiapro-bold-webfont.woff2') format('woff2'),
+               url('https://assets-sharetribecom.sharetribe.com/webfonts/sofiapro/sofiapro-bold-webfont.woff') format('woff');
+          font-weight: 700;
+          font-style: normal;
+      }
+
     </style>
 
     <link rel="stylesheet" href="%PUBLIC_URL%/static/reactDates.css" />

src/containers/StyleguidePage/Typography.example.js

@@ -67,6 +67,12 @@ const Fonts = () => {
   line-height: 18px;
   padding: 2px 0 4px 0;`;
 
+  const tinyBoldFontStyling = `Styles affecting size:
+  font-weight: 700;
+  font-size: 13px;
+  line-height: 18px;
+  padding: 2px 0 4px 0;`;
+
   const fontsContainerClasses = classNames(css.fontsContainer, css.baselines);
 
   return (
@@ -132,6 +138,15 @@ const Fonts = () => {
           description="Very small print."
           styling={tinyFontStyling}
         />
+        <Font
+          component={() => (
+            <p className={mpStyle.tinyBoldFont}>
+              Tiny bold mobile text (.tinyBoldFont): CLOSE
+            </p>
+          )}
+          description="Very small bold print used next to close icon."
+          styling={tinyBoldFontStyling}
+        />
       </div>
     </div>
   );

src/marketplace.css

@@ -159,6 +159,15 @@ pre,
   /* TODO Desktop styles needs to be extracted */
 }
 
+.tinyBoldFont {
+  font-family: "sofiapro", Helvetica, Arial, sans-serif;
+  font-weight: 700;
+  font-size: 13px;
+  line-height: 18px;
+  padding: 2px 0 4px 0; /* 2px + 4px = 6px */
+  letter-spacing: 1.5px;
+}
+
 /* This font is specific to Avatar component only */
 .smallAvatarFont {
   font-family: "sofiapro", Helvetica, Arial, sans-serif;