sans-serif
Clover Grotesk
by Alwin Johnson
$45
Meet Clover Grotesk, a comprehensive and highly versatile typeface family featuring an impressive 09 weights, ranging from Thin all the way to Black. This extensive collection, which includes extended letters and a handy slashed zero, is perfect for nearly any creative endeavor. Clover Grotesk is an amazing choice for branding and logo design, powerful marketing materials, and striking posters and signage. It’s equally well-suited for detailed editorial design and professional corporate identities. Designed for total flexibility, the pack includes OTF, TTF, and full Web Fonts (WOFF), along with multi-language support and free future updates. Choose Clover Grotesk to bring structure, clarity, and typographic strength to all your web, print, and graphic design projects.
Available on multiple marketplaces
Font Previews









Tags & Use Cases
How to Install Fonts
Installing on Mac
- Download and unzip the font files
- Double-click the font file (.otf, .ttf, or .ttc) to open it in Font Book
- Click the "Install Font" button in the preview window
- The font will be installed and available in all your applications
Tip: You can also drag font files directly into Font Book or copy them to ~/Library/Fonts/
Installing on Windows
- Download and extract the font files
- Right-click on the font file (.otf or .ttf) and select "Install" or "Install for all users"
- Alternatively, open Settings → Personalization → Fonts and drag the font files into the window
- Restart any open applications to see the newly installed fonts
Tip: For older Windows versions, copy font files to C:\Windows\Fonts
Using Fonts on the Web
To use this font on your website, you'll need a web font license. Follow these steps:
- Purchase a web font license from Typenotion
- Upload the web font files (.woff, .woff2) to your server
- Add the @font-face declaration to your CSS:
@font-face { font-family: 'Clover Grotesk'; src: url('/fonts/clover-grotesk-sans-serif-font.woff2') format('woff2'), url('/fonts/clover-grotesk-sans-serif-font.woff') format('woff'); font-weight: normal; font-style: normal; } - Use the font in your CSS:
body { font-family: 'Clover Grotesk', sans-serif; }
Note: Web font licenses have specific usage terms. Check your license for pageview limits and allowed domains.
Need help? Contact our support team