- Duplicate this template to your Notion workspace
- Create a site using Super, using your newly created page as the Notion URL.
- Add the snippet code and fonts:
The fonts used in the template are: PS Fournier: Light Reason New: Regular and Medium You’ll need to add these fonts to a new web project in your Adobe Typekit account and paste the unique ID into the code below.
If you want to use your own fonts you’ll need to add custom overrides beneath the CSS in the code below. You can see the original CSS at the following link: https://iamsamsmall.github.io/cy/style.css
/* Here are the names of the font families in the code. Search for them so you know which lines to override in your customisations. */ psfournier-std reason-new
Paste the code below into the Snippet Injection field in your Super settings.
<!-- Typekit: Update the link below with your Typekit ID --> <link rel="stylesheet" href="https://use.typekit.net/gnx8fcu.css"> <!-- Add your analytics script here --> <!-- I use Fathom, it’s a great alternative to Google Analytics with a minimal dashboard and a focus on privacy. Please consider using my referral link when creating an account: https://usefathom.com/ref/CSKBJR --> <!-- Favicon: Having a custom nav breaks the Favicon that you can upload in the Super settings. To change it, update the link here --> <link rel="icon" href="https://s3.amazonaws.com/super-notion/images/8a28f49c-9631-4450-89f2-b87a3a60099e.png"> <!-- Meta Description: Having a custom nav breaks the site description that you can edit in the Super settings. To change it, update the text here --> <meta property="og:description" content="Cy, a minimal portfolio template built on Notion and powered by Super."> <!-- Share image: Having a custom nav breaks the site share image that you can edit in the Super settings. To change it, update the url and the alt description below --> <meta property="og:image" content="https://s3.amazonaws.com/super-notion/images/ca38c918-dbcb-4cdf-ae61-35a0f6415764.jpg"> <meta property="og:image:alt" content="Screenshot of the Cy demo site"> <!--- Cy template styles --> <link rel="stylesheet" href="https://iamsamsmall.github.io/cy/style.css"> <!-- Add your own custom overrides here --> <style> </style> <!-- End of custom overrides --> <!-- Navigation --> <nav class="nav"> <div class="left"> <a class="nav-link" href="/">Cy</a> </div> <div class="right"> <a class="nav-link" href="/projects">Projects</a> <a class="nav-link" href="/about">About</a> <a class="nav-link" href="/writing">Writing</a> </div> </nav>
4. Make sure you’ve done these things before you go live
writing/, you can amend these if you want but you’ll need to add CSS overrides.