diff --git a/site/src/_scripts.js b/site/src/_scripts.js
index cdb0951..9cc5020 100755
--- a/site/src/_scripts.js
+++ b/site/src/_scripts.js
@@ -73,6 +73,7 @@ const fontWeights = document.querySelectorAll('.font-weights span');
 const systemFont = document.querySelectorAll('.font-stack span');
 const systemFontWeight = document.querySelectorAll('.font-stack var');
 const fontCard = document.querySelectorAll('.font-card');
+const copyButton = document.querySelectorAll('.btn.copy');
 
 const changeSize = (newVal) => {
   fonts.style.fontSize = `${newVal}em`;
@@ -172,6 +173,55 @@ Array.from(systemFont).forEach((el) => {
   });
 });
 
+// copy to clipboard button
+const displayCopySuccess = (el) => {
+  var innerHtmlToRestore = el.innerHTML;
+  el.innerHTML = '✓';
+  el.classList.add('success');
+  setTimeout(() => {
+    el.innerHTML = innerHtmlToRestore;
+    el.classList.remove('success');
+  }, 500);
+};
+Array.from(copyButton).forEach((el) => {
+  el.addEventListener('click', (event) => {
+    const codeEl = event.target.parentNode.querySelector('code');
+    try {
+      // try to use the Clipboard API;...
+      window.navigator.clipboard.writeText(codeEl.innerText)
+        .then(() => displayCopySuccess(event.target));
+    } catch (error) {
+      console.warn('Failed to copy CSS to clipboard using Clipboard API! '+
+                   '...trying "execCommand". '+
+                   `Original error:\n\t ${error}`);
+      try {
+        // ... otherwise, try to use document.execCommand as a fallback
+        const selectionRangesToRestore = [];
+        let selection = window.getSelection();
+        for (let i = 0; i < selection.rangeCount; ++i) {
+            selectionRangesToRestore.push(selection.getRangeAt(i));
+        }
+        selection.removeAllRanges();
+        const tempRange = document.createRange();
+        tempRange.setStart(codeEl, 0);
+        tempRange.setEnd(codeEl.nextSibling, 0);
+        selection.addRange(tempRange);
+        document.execCommand('copy');
+        selection.removeAllRanges();
+        selectionRangesToRestore.forEach((range) => selection.addRange(range));
+        displayCopySuccess(event.target);
+      } catch (error) {
+        console.error('Failed to copy CSS to clipboard using "execCommand"! '+
+                      '...disabling copy buttons. '+
+                      `Original error:\n\t ${error}`);
+        Array.from(copyButton).forEach((el) => {
+            el.setAttribute("disabled", "");
+            el.title = "Failed to copy CSS!";
+        });
+      }
+    }
+  });
+});
 
 // ----- PREVIEW ----- //
 const preview = document.querySelector('#preview');
diff --git a/site/src/_styles.css b/site/src/_styles.css
index 7c4d37c..f78f67f 100755
--- a/site/src/_styles.css
+++ b/site/src/_styles.css
@@ -461,7 +461,7 @@ section > h2 {
 
 .font-stack {
   display: flex;
-  justify-content: start;
+  justify-content: space-between;
   align-items: center;
   min-height: 5rem;
   text-align: left;
@@ -540,6 +540,20 @@ section > h2 {
   text-decoration-color: #26599799;
 }
 
+.btn.copy {
+  font-size: 1.5rem;
+  font-family: initial;
+  max-width: 48px;
+  min-width: 48px;
+  max-height: 48px;
+  min-height: 48px;
+  justify-self: end;
+  align-self: end;
+}
+.btn.copy.success {
+  color: #2A2;
+  border-color: #2A2;
+}
 
 /* === SECTION : PREVIEW : ARTICLE VIEW === */
 
diff --git a/site/src/index.html b/site/src/index.html
index abeb3ed..d58c19e 100755
--- a/site/src/index.html
+++ b/site/src/index.html
@@ -133,6 +133,7 @@ <h3>
             <span>sans-serif</span>;
             <strong>font-weight: <var>normal</var>;</strong>
           </code>
+          <button class="btn copy" title="Click to copy CSS">⮺</button>
         </div>
       </div>
       
@@ -170,6 +171,7 @@ <h3>
             <span>serif</span>;
             <strong>font-weight: <var>normal</var>;</strong>
           </code>
+          <button class="btn copy" title="Click to copy CSS">⮺</button>
         </div>
       </div>
       
@@ -207,6 +209,7 @@ <h3>
             <span>serif</span>;
             <strong>font-weight: <var>normal</var>;</strong>
           </code>
+          <button class="btn copy" title="Click to copy CSS">⮺</button>
         </div>
       </div>
       
@@ -246,6 +249,7 @@ <h3>
             <span>sans-serif</span>;
             <strong>font-weight: <var>normal</var>;</strong>
           </code>
+          <button class="btn copy" title="Click to copy CSS">⮺</button>
         </div>
       </div>
       
@@ -284,6 +288,7 @@ <h3>
             <span>sans-serif</span>;
             <strong>font-weight: <var>normal</var>;</strong>
           </code>
+          <button class="btn copy" title="Click to copy CSS">⮺</button>
         </div>
       </div>
       
@@ -321,6 +326,7 @@ <h3>
             <span>sans-serif</span>;
             <strong>font-weight: <var>normal</var>;</strong>
           </code>
+          <button class="btn copy" title="Click to copy CSS">⮺</button>
         </div>
       </div>
       
@@ -360,6 +366,7 @@ <h3>
             <span>sans-serif</span>;
             <strong>font-weight: <var>normal</var>;</strong>
           </code>
+          <button class="btn copy" title="Click to copy CSS">⮺</button>
         </div>
       </div>
       
@@ -395,6 +402,7 @@ <h3>
             <span>monospace</span>;
             <strong>font-weight: <var>normal</var>;</strong>
           </code>
+          <button class="btn copy" title="Click to copy CSS">⮺</button>
         </div>
       </div>
       
@@ -434,6 +442,7 @@ <h3>
             <span>monospace</span>;
             <strong>font-weight: <var>normal</var>;</strong>
           </code>
+          <button class="btn copy" title="Click to copy CSS">⮺</button>
         </div>
       </div>
       
@@ -473,6 +482,7 @@ <h3>
             <span>sans-serif</span>;
             <strong>font-weight: <var>normal</var>;</strong>
           </code>
+          <button class="btn copy" title="Click to copy CSS">⮺</button>
         </div>
       </div>
       
@@ -516,6 +526,7 @@ <h3>
             <span>sans-serif</span>;
             <strong>font-weight: <var>normal</var>;</strong>
           </code>
+          <button class="btn copy" title="Click to copy CSS">⮺</button>
         </div>
       </div>
       
@@ -555,6 +566,7 @@ <h3>
             <span>serif</span>;
             <strong>font-weight: <var>normal</var>;</strong>
           </code>
+          <button class="btn copy" title="Click to copy CSS">⮺</button>
         </div>
       </div>
       
@@ -595,6 +607,7 @@ <h3>
             <span>serif</span>;
             <strong>font-weight: <var>normal</var>;</strong>
           </code>
+          <button class="btn copy" title="Click to copy CSS">⮺</button>
         </div>
       </div>
       
@@ -635,6 +648,7 @@ <h3>
             <span>serif</span>;
             <strong>font-weight: <var>normal</var>;</strong>
           </code>
+          <button class="btn copy" title="Click to copy CSS">⮺</button>
         </div>
       </div>
       
@@ -674,6 +688,7 @@ <h3>
             <span>cursive</span>;
             <strong>font-weight: <var>normal</var>;</strong>
           </code>
+          <button class="btn copy" title="Click to copy CSS">⮺</button>
         </div>
       </div>