diff --git a/packages/my-joy-beta/src/components/__tests__/__snapshots__/cns.spec.js.snap b/packages/my-joy-beta/src/components/__tests__/__snapshots__/cns.spec.js.snap
index 0cfeb43f..1ea533ca 100644
--- a/packages/my-joy-beta/src/components/__tests__/__snapshots__/cns.spec.js.snap
+++ b/packages/my-joy-beta/src/components/__tests__/__snapshots__/cns.spec.js.snap
@@ -695,7 +695,7 @@ exports[`renders <Hostname values /> without throwing 1`] = `
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
-  font-family: "Roboto Mono";
+  font-family: "Roboto Mono",monospace;
   width: 100%;
   font-size: 0.9375rem;
   line-height: normal !important;
diff --git a/packages/my-joy-beta/src/components/__tests__/__snapshots__/key-value.spec.js.snap b/packages/my-joy-beta/src/components/__tests__/__snapshots__/key-value.spec.js.snap
index 6ac70953..ac6b996e 100644
--- a/packages/my-joy-beta/src/components/__tests__/__snapshots__/key-value.spec.js.snap
+++ b/packages/my-joy-beta/src/components/__tests__/__snapshots__/key-value.spec.js.snap
@@ -2971,7 +2971,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  font-family: "Roboto Mono";
+  font-family: "Roboto Mono",monospace;
   width: 100%;
   text-overflow: ellipsis;
   resize: vertical;
diff --git a/packages/my-joy-beta/src/components/__tests__/__snapshots__/network.spec.js.snap b/packages/my-joy-beta/src/components/__tests__/__snapshots__/network.spec.js.snap
index ac73ae43..61155af3 100644
--- a/packages/my-joy-beta/src/components/__tests__/__snapshots__/network.spec.js.snap
+++ b/packages/my-joy-beta/src/components/__tests__/__snapshots__/network.spec.js.snap
@@ -4167,62 +4167,6 @@ exports[`renders <Network {...network} fabric /> without throwing 1`] = `
                 </div>
               </div>
             </div>
-            <div
-              className="c23"
-            >
-              <div
-                className="c24"
-                disabled={false}
-                name="card"
-              >
-                <div
-                  className="c25"
-                  disabled={false}
-                  name="card-header"
-                  onClick={undefined}
-                >
-                  <div
-                    className="c26"
-                    disabled={false}
-                    name="card-header-meta"
-                  >
-                    <div
-                      className="c27"
-                    >
-                      <p
-                        className="c17"
-                      >
-                        Instances on network
-                      </p>
-                    </div>
-                  </div>
-                  <div
-                    className="c5"
-                    disabled={false}
-                    name="card-header-box"
-                  >
-                    <svg
-                      className=""
-                      height="6"
-                      innerRef={undefined}
-                      style={
-                        Object {
-                          "transform": "rotate(0deg)",
-                        }
-                      }
-                      viewBox="0 0 9.6 6"
-                      width="9.6"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
-                        fill="rgba(73, 73, 73, 1)"
-                      />
-                    </svg>
-                  </div>
-                </div>
-              </div>
-            </div>
           </div>
         </div>
       </div>
@@ -5045,136 +4989,6 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
   margin-bottom: 0.4375rem;
 }
 
-.c30 {
-  box-sizing: content-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  position: relative;
-  border-width: 0.0625rem;
-  border-style: solid;
-  -webkit-transition: all 300ms ease;
-  transition: all 300ms ease;
-  color: rgba(73,73,73,1);
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-  cursor: pointer;
-  min-height: auto;
-  height: 2.875rem;
-  -webkit-flex: 0 0 2.875rem;
-  -ms-flex: 0 0 2.875rem;
-  flex: 0 0 2.875rem;
-}
-
-.c31 {
-  box-sizing: content-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  position: relative;
-  border-width: 0.0625rem;
-  border-style: solid;
-  -webkit-transition: all 300ms ease;
-  transition: all 300ms ease;
-  color: rgba(73,73,73,1);
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-  cursor: pointer;
-  min-height: auto;
-  height: 2.875rem;
-  -webkit-flex: 0 0 2.875rem;
-  -ms-flex: 0 0 2.875rem;
-  flex: 0 0 2.875rem;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  z-index: 1;
-  line-height: 1.5rem;
-  height: auto;
-  max-width: 100%;
-  margin: -0.0625rem -0.0625rem 0 -0.0625rem;
-  margin: -0.0625rem;
-  box-shadow: none;
-}
-
-.c31 button {
-  margin-bottom: 0;
-  margin-top: 0;
-}
-
-.c32 {
-  box-sizing: content-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  position: relative;
-  border-width: 0.0625rem;
-  border-style: solid;
-  -webkit-transition: all 300ms ease;
-  transition: all 300ms ease;
-  color: rgba(73,73,73,1);
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-  cursor: pointer;
-  min-height: auto;
-  height: 2.875rem;
-  -webkit-flex: 0 0 2.875rem;
-  -ms-flex: 0 0 2.875rem;
-  flex: 0 0 2.875rem;
-  box-sizing: border-box;
-  min-height: 2.9375rem;
-  max-width: 100%;
-  width: auto;
-  height: auto;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  -webkit-align-content: stretch;
-  -ms-flex-line-pack: stretch;
-  align-content: stretch;
-  overflow: hidden;
-  background-color: transparent;
-  border-width: 0;
-  box-shadow: none;
-  color: inherit;
-}
-
 .c24 {
   box-sizing: content-box;
   display: -webkit-box;
@@ -5285,7 +5099,7 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
   width: 22.1875rem;
-  font-family: "Roboto Mono";
+  font-family: "Roboto Mono",monospace;
   max-width: 22.1875rem;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -5827,62 +5641,6 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
                 </div>
               </div>
             </div>
-            <div
-              className="c23"
-            >
-              <div
-                className="c30"
-                disabled={false}
-                name="card"
-              >
-                <div
-                  className="c31"
-                  disabled={false}
-                  name="card-header"
-                  onClick={undefined}
-                >
-                  <div
-                    className="c32"
-                    disabled={false}
-                    name="card-header-meta"
-                  >
-                    <div
-                      className="c25"
-                    >
-                      <p
-                        className="c17"
-                      >
-                        Instances on network
-                      </p>
-                    </div>
-                  </div>
-                  <div
-                    className="c5"
-                    disabled={false}
-                    name="card-header-box"
-                  >
-                    <svg
-                      className=""
-                      height="6"
-                      innerRef={undefined}
-                      style={
-                        Object {
-                          "transform": "rotate(0deg)",
-                        }
-                      }
-                      viewBox="0 0 9.6 6"
-                      width="9.6"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
-                        fill="rgba(73, 73, 73, 1)"
-                      />
-                    </svg>
-                  </div>
-                </div>
-              </div>
-            </div>
           </div>
         </div>
       </div>
diff --git a/packages/my-joy-beta/src/components/__tests__/firewall.spec.js b/packages/my-joy-beta/src/components/__tests__/firewall.spec.js
index 1b808291..aaa6e451 100644
--- a/packages/my-joy-beta/src/components/__tests__/firewall.spec.js
+++ b/packages/my-joy-beta/src/components/__tests__/firewall.spec.js
@@ -2,7 +2,13 @@ import React, { Fragment } from 'react';
 import renderer from 'react-test-renderer';
 import 'jest-styled-components';
 
-import Firewall, { Rules, TagRules, DefaultRules, ToggleFirewallForm, ToggleInactiveForm } from '../firewall';
+import Firewall, {
+  Rules,
+  TagRules,
+  DefaultRules,
+  ToggleFirewallForm,
+  ToggleInactiveForm
+} from '../firewall';
 import Theme from '@mocks/theme';
 
 const rules = [
diff --git a/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/metadata.spec.js.snap b/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/metadata.spec.js.snap
index f33ff414..83235f6c 100644
--- a/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/metadata.spec.js.snap
+++ b/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/metadata.spec.js.snap
@@ -730,7 +730,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  font-family: "Roboto Mono";
+  font-family: "Roboto Mono",monospace;
   width: 100%;
   text-overflow: ellipsis;
   resize: vertical;
@@ -1786,7 +1786,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  font-family: "Roboto Mono";
+  font-family: "Roboto Mono",monospace;
   width: 100%;
   text-overflow: ellipsis;
   resize: vertical;
diff --git a/packages/my-joy-beta/src/components/network.js b/packages/my-joy-beta/src/components/network.js
index 50a40b41..0ba7dbbd 100644
--- a/packages/my-joy-beta/src/components/network.js
+++ b/packages/my-joy-beta/src/components/network.js
@@ -270,42 +270,44 @@ export const Expanded = ({
                       ) : null}
                     </Card>
                   </Margin>
-                  <Margin top={3}>
-                    <Card
-                      collapsed={!machinesExpanded}
-                      actionable={!machinesExpanded}
-                    >
-                      <CardHeader
-                        secondary={false}
-                        transparent={false}
-                        onClick={onMachinesClick}
+                  {machines.length ? (
+                    <Margin top={3}>
+                      <Card
+                        collapsed={!machinesExpanded}
+                        actionable={!machinesExpanded}
                       >
-                        <CardHeaderMeta>
-                          <Padding left={3} right={3}>
-                            <P>Instances on network</P>
-                          </Padding>
-                        </CardHeaderMeta>
-                        <CardHeaderBox>
-                          <ArrowIcon
-                            direction={machinesExpanded ? 'up' : 'down'}
-                          />
-                        </CardHeaderBox>
-                      </CardHeader>
-                      {machinesExpanded ? (
-                        <CardOutlet>
-                          <Padding all={3}>
-                            <Flex column>
-                              {machines.map(({ name }) => (
-                                <FlexItem>
-                                  <P>{name}</P>
-                                </FlexItem>
-                              ))}
-                            </Flex>
-                          </Padding>
-                        </CardOutlet>
-                      ) : null}
-                    </Card>
-                  </Margin>
+                        <CardHeader
+                          secondary={false}
+                          transparent={false}
+                          onClick={onMachinesClick}
+                        >
+                          <CardHeaderMeta>
+                            <Padding left={3} right={3}>
+                              <P>Instances on network</P>
+                            </Padding>
+                          </CardHeaderMeta>
+                          <CardHeaderBox>
+                            <ArrowIcon
+                              direction={machinesExpanded ? 'up' : 'down'}
+                            />
+                          </CardHeaderBox>
+                        </CardHeader>
+                        {machinesExpanded ? (
+                          <CardOutlet>
+                            <Padding top={2} bottom={2} left={3} right={3}>
+                              <Flex column>
+                                {machines.map(({ name }) => (
+                                  <FlexItem>
+                                    <P monospace>{name}</P>
+                                  </FlexItem>
+                                ))}
+                              </Flex>
+                            </Padding>
+                          </CardOutlet>
+                        ) : null}
+                      </Card>
+                    </Margin>
+                  ) : null}
                 </Fragment>
               ) : null}
             </Padding>
diff --git a/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/metadata.spec.js.snap b/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/metadata.spec.js.snap
index 8f235d94..8dcd3fde 100644
--- a/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/metadata.spec.js.snap
+++ b/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/metadata.spec.js.snap
@@ -1136,7 +1136,7 @@ Array [
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  font-family: "Roboto Mono";
+  font-family: "Roboto Mono",monospace;
   width: 100%;
   text-overflow: ellipsis;
   resize: vertical;
@@ -3032,7 +3032,7 @@ Array [
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  font-family: "Roboto Mono";
+  font-family: "Roboto Mono",monospace;
   width: 100%;
   text-overflow: ellipsis;
   resize: vertical;
@@ -4132,7 +4132,7 @@ Array [
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  font-family: "Roboto Mono";
+  font-family: "Roboto Mono",monospace;
   width: 100%;
   text-overflow: ellipsis;
   resize: vertical;
@@ -5486,7 +5486,7 @@ Array [
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  font-family: "Roboto Mono";
+  font-family: "Roboto Mono",monospace;
   width: 100%;
   text-overflow: ellipsis;
   resize: vertical;
@@ -6586,7 +6586,7 @@ Array [
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  font-family: "Roboto Mono";
+  font-family: "Roboto Mono",monospace;
   width: 100%;
   text-overflow: ellipsis;
   resize: vertical;
diff --git a/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/networks.spec.js.snap b/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/networks.spec.js.snap
index f0d8d3b4..e2495451 100644
--- a/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/networks.spec.js.snap
+++ b/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/networks.spec.js.snap
@@ -2441,62 +2441,6 @@ Array [
                                     </div>
                                 </div>
                             </div>
-                            <div
-                                className="c23"
-                            >
-                                <div
-                                    className="c24"
-                                    disabled={false}
-                                    name="card"
-                                >
-                                    <div
-                                        className="c25"
-                                        disabled={false}
-                                        name="card-header"
-                                        onClick={[Function]}
-                                    >
-                                        <div
-                                            className="c26"
-                                            disabled={false}
-                                            name="card-header-meta"
-                                        >
-                                            <div
-                                                className="c27"
-                                            >
-                                                <p
-                                                    className="c17"
-                                                >
-                                                    Instances on network
-                                                </p>
-                                            </div>
-                                        </div>
-                                        <div
-                                            className="c5"
-                                            disabled={false}
-                                            name="card-header-box"
-                                        >
-                                            <svg
-                                                className=""
-                                                height="6"
-                                                innerRef={undefined}
-                                                style={
-                                                    Object {
-                                                        "transform": "rotate(0deg)",
-                                                      }
-                                                }
-                                                viewBox="0 0 9.6 6"
-                                                width="9.6"
-                                                xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                                <path
-                                                    d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
-                                                    fill="rgba(73, 73, 73, 1)"
-                                                />
-                                            </svg>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
                         </div>
                     </div>
                 </div>
diff --git a/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/user-script.spec.js.snap b/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/user-script.spec.js.snap
index 5f12370f..fa4aef62 100644
--- a/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/user-script.spec.js.snap
+++ b/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/user-script.spec.js.snap
@@ -812,7 +812,7 @@ Array [
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  font-family: "Roboto Mono";
+  font-family: "Roboto Mono",monospace;
   width: 100%;
   text-overflow: ellipsis;
   resize: vertical;
@@ -2016,7 +2016,7 @@ Array [
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  font-family: "Roboto Mono";
+  font-family: "Roboto Mono",monospace;
   width: 100%;
   text-overflow: ellipsis;
   resize: vertical;
@@ -3893,7 +3893,7 @@ Array [
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  font-family: "Roboto Mono";
+  font-family: "Roboto Mono",monospace;
   width: 100%;
   text-overflow: ellipsis;
   resize: vertical;
@@ -5096,7 +5096,7 @@ Array [
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  font-family: "Roboto Mono";
+  font-family: "Roboto Mono",monospace;
   width: 100%;
   text-overflow: ellipsis;
   resize: vertical;
@@ -6451,7 +6451,7 @@ Array [
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  font-family: "Roboto Mono";
+  font-family: "Roboto Mono",monospace;
   width: 100%;
   text-overflow: ellipsis;
   resize: vertical;
@@ -7727,7 +7727,7 @@ Array [
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  font-family: "Roboto Mono";
+  font-family: "Roboto Mono",monospace;
   width: 100%;
   text-overflow: ellipsis;
   resize: vertical;
diff --git a/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/cns.spec.js.snap b/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/cns.spec.js.snap
index f4fe0d5c..416907b0 100644
--- a/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/cns.spec.js.snap
+++ b/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/cns.spec.js.snap
@@ -1483,7 +1483,7 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
-  font-family: "Roboto Mono";
+  font-family: "Roboto Mono",monospace;
   width: 100%;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -3561,7 +3561,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
-  font-family: "Roboto Mono";
+  font-family: "Roboto Mono",monospace;
   width: 100%;
   font-size: 0.9375rem;
   line-height: normal !important;
diff --git a/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap b/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap
index cc6d9982..2d78c110 100644
--- a/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap
+++ b/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap
@@ -1517,7 +1517,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  font-family: "Roboto Mono";
+  font-family: "Roboto Mono",monospace;
   width: 100%;
   text-overflow: ellipsis;
   resize: vertical;
@@ -4423,7 +4423,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  font-family: "Roboto Mono";
+  font-family: "Roboto Mono",monospace;
   width: 100%;
   text-overflow: ellipsis;
   resize: vertical;
diff --git a/packages/ui-toolkit/src/base/global.js b/packages/ui-toolkit/src/base/global.js
index 0ee0097a..623dbab5 100644
--- a/packages/ui-toolkit/src/base/global.js
+++ b/packages/ui-toolkit/src/base/global.js
@@ -3,7 +3,7 @@ import remcalc from 'remcalc';
 
 export default ({ theme }) => css`
   @import url('${theme.font.href()}');
-  @import url('${theme.monoSpaceFont.href()}');
+  @import url('${theme.monoFont.href()}');
 
   [hidden] {
     display: none;
diff --git a/packages/ui-toolkit/src/form/base/input.js b/packages/ui-toolkit/src/form/base/input.js
index a1925697..609d0f4e 100644
--- a/packages/ui-toolkit/src/form/base/input.js
+++ b/packages/ui-toolkit/src/form/base/input.js
@@ -99,7 +99,7 @@ const style = css`
   `};
 
   ${is('monospace')`
-    font-family: ${props => props.theme.monoSpaceFont.family};
+    font-family: ${props => props.theme.monoFont.families};
 
       &:disabled {
         color: ${props => props.theme.text};
diff --git a/packages/ui-toolkit/src/text/p.js b/packages/ui-toolkit/src/text/p.js
index df767afe..b2779127 100644
--- a/packages/ui-toolkit/src/text/p.js
+++ b/packages/ui-toolkit/src/text/p.js
@@ -15,6 +15,10 @@ export default styled.p`
     color: ${props => props.theme.white}
   `};
 
+  ${is('monospace')`
+    font-family: ${props => props.theme.monoFont.families};
+  `};
+
   + p,
   + small,
   + h1,
diff --git a/packages/ui-toolkit/src/theme/index.js b/packages/ui-toolkit/src/theme/index.js
index 22695b8d..9f094cbe 100644
--- a/packages/ui-toolkit/src/theme/index.js
+++ b/packages/ui-toolkit/src/theme/index.js
@@ -86,12 +86,8 @@ export const font = {
   abbrBorderColor: base.secondary,
   textMuted: base.secondary,
   family: '"Libre Franklin"',
-  families:
-    '"Libre Franklin", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica, sans-serif',
-  href: () =>
-    `${document.location.protocol}//${
-      document.location.host
-    }/fonts/css?family=Libre+Franklin:400,500,600`,
+  families: '"Libre Franklin", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica, sans-serif',
+  href: () => `${document.location.protocol}//${document.location.host}/fonts/css?family=Libre+Franklin:400,500,600`,
   weight: {
     semibold: 600,
     medium: 500,
@@ -99,13 +95,14 @@ export const font = {
   }
 };
 
-export const monoSpaceFont = {
+export const monoFont = {
   semibold: base.secondary,
   regular: base.text,
   abbrBorderColor: base.secondary,
   textMuted: base.secondary,
   family: '"Roboto Mono"',
-  href: () => 'https://fonts.googleapis.com/css?family=Roboto+Mono:400,700',
+  families: '"Roboto Mono", monospace',
+  href: () => `${document.location.protocol}//${document.location.host}/fonts/css?family=Roboto+Mono:700,400`,
   weight: {
     bold: 700,
     normal: 400
@@ -154,7 +151,7 @@ export const shadows = {
 export default {
   ...base,
   font,
-  monoSpaceFont,
+  monoFont,
   inactive,
   notifications,
   inputError,