diff --git a/README.md b/README.md
index e100c9e..6267e53 100644
--- a/README.md
+++ b/README.md
@@ -135,6 +135,7 @@ css below will work for every instance of the element, but if you wish to hide o
 **styles must be added to the top of the `user.css` file, so that nothing (other than comments) is above them @import statement**
 
 ```css
+@import url('https://fonts.googleapis.com/css2?family=Fira+Code&family=Oxygen&family=Roboto+Slab:wght@300&display=swap');
 .notion-app-inner {
   font-family: 'Oxygen', sans-serif !important;
 }
diff --git a/docs/index.html b/docs/index.html
index 8cfecc1..f37a7c6 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -163,7 +163,8 @@ changes will be applied instantly on notion reload
               <a href="#custom-fonts">custom fonts</a>
             </h4>
         <p><strong>styles must be added to the top of the <code>user.css</code> file, so that nothing (other than comments) is above them @import statement</strong></p>
-<pre><code class="lang-css"><span class="hljs-selector-class">.notion-app-inner</span> {
+<pre><code class="lang-css"><span class="hljs-keyword">@import</span> url(<span class="hljs-string">'https://fonts.googleapis.com/css2?family=Fira+Code&amp;family=Oxygen&amp;family=Roboto+Slab:wght@300&amp;display=swap'</span>);
+<span class="hljs-selector-class">.notion-app-inner</span> {
   <span class="hljs-attribute">font-family</span>: <span class="hljs-string">'Oxygen'</span>, sans-serif <span class="hljs-meta">!important</span>;
 }
 <span class="hljs-selector-attr">[style*=<span class="hljs-string">'monospace;'</span>]</span> {