Squarespace Type Kit
Font CSS Builder
Add a font file or an Adobe Fonts project, style each level of type, preview it live, and copy clean CSS for Custom CSS.
01
Font library
Every font added here becomes available to the styles below.
Your library0 fonts
Hosted libraryBrowse fonts.deannaburks.com
Add a font filePaste a Squarespace file URL
Adobe FontsRead a web project
Add a family by hand
Use the CSS name from your web project in Adobe Fonts, for example proxima-nova.
Import existing CSSPull fonts from CSS you have
02
Type styles
Choose a level, set its font and spacing, then style the words you mark with the italic and bold buttons.
Live preview
03
Fixes and refinements
Small rules that make custom fonts behave on Squarespace.
04
Your code
Updates as you work. Copy it straight into Squarespace.
Font sizes
Fonts in CSS
Adobe Fonts load from
Paste into Custom CSS

    


    

      

        
01

        
Upload the files

        
In Custom CSS, use Custom Files to upload each font. Click a file to get its URL, then paste that URL into the font above.

      

      

        
02

        
Paste the CSS

        
Paste the code into Custom CSS and save. If it starts with an @import line, keep that line at the very top.

      

      

        
03

        
Adobe Fonts

        
Copy the embed code from your web project in Adobe Fonts. Choose Code Injection above to load it in the site header instead.