Designer and UX leader, passionate about shaping the systems that build great products.
- Duplicate this template to your Notion workspace. Ensure that ‘share to the web’ is on in Notion.
- Create a site in Super, using your duplicated template as the Notion URL.
- Set up your fonts and add the code to Super and configure your options:
There are two themes for fonts. You’ll need to choose which theme you want and add the fonts and weights listed below to a new web project in your Adobe Typekit account. Once you’ve done that you can paste the Unique ID into the code. Editorial PS Fournier: Light Reason New: Regular and Medium Rational Neue Haas Unica: Light, Regular, Regular Italic
If you don’t have a Typekit account you can rely on the chosen Google Webfonts as a fallback instead. They’re a pretty good match, here’s the difference:
Editorial theme
Rational theme
If you want to change the fonts you’ll need to add custom overrides in the CSS editor.
:root {
--font-family-primary: [your-font-goes-here], serif !important;
--font-family-secondary: [your-font-goes-here], sans-serif !important;
}
1. Go to Code > Global site code 2. Paste the following code into Head
<!-- /// Hosted styles /// -->
<!-- Using the hosted stylesheet will ensure you automatically get future updates and fixes. Any custom overrides should be done in the CSS area of your Super settings. -->
<link rel="stylesheet" href="https://iamsamsmall.github.io/cy/style.css">
<!-- /// Hosted fonts /// -->
<!-- Fonts for "editorial" theme -->
<!-- Google fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;600&family=Nanum+Myeongjo&display=swap" rel="stylesheet">
<!-- Typekit -->
<link rel="stylesheet" href="https://use.typekit.net/gnx8fcu.css">
<!-- Fonts for "rational" theme-->
<!-- Google fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;1,400&display=swap" rel="stylesheet">
<!-- Typekit -->
<link rel="stylesheet" href="https://use.typekit.net/mrh3xxw.css">
<!-- /// Theme options /// -->
<!-- Colour theme: change the name of the file to pick your colour
Options: [cotton], [charcoal], [coppice]
-->
<link rel="stylesheet" href="https://iamsamsmall.github.io/cy/colour/[option].css">
<!-- Font theme: change the name of the file to pick your fonts (requires set up with Typekit or Google Fonts, see above)
Options: [editorial], [rational]
-->
<link rel="stylesheet" href="https://iamsamsmall.github.io/cy/fonts/[option].css">
3. Paste the following code into Body
<!-- 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>
A handy grid to see the 6 possible theme options:
4. Make sure you’ve done these things before you go live
projects/
and writing/
, you can amend these if you want but you’ll need to add CSS overrides.