Customize Fonts and Colors in Showit
Perhaps you purchased a Showit website template because you love the layout, but you are looking to update the colors and fonts to fit your brand aesthetic. Simple!
Let’s start with colors. If you worked with a brand designer on your color palette, you most likely have Pantone colors, but you will need to convert those colors to HEX codes to load into Showit. Unlike Pantone colors, hex colors are web safe. This means they’ll render the same no matter what browser or device you’re using.
To assign your brand colors to the Design Settings Color Palette click on the Site tab in the upper section of the left panel of Showit and then select Design Settings. This will drop down a window with 2 tabs: Site Settings and Fonts.
You can now set 8 colors for repeated and easy access use inside of the designer. The 8 colors you set will be available inside of the Properties Panel as you are customizing elements including text, shapes and icons within your site.
To change a color click on the corresponding box on the Color Palette and set the desired color by either using the color picker (your mouse will transform into a color picker when hovered over the color box) or entering in a specific hexadecimal code.
Resources:
Showit provides a library of Google Fonts to use in your template and we have installed the fonts for your to freely use in the template you purchased, however if you have custom fonts that are not Google, you will need to create a WOFF file and upload them yourself.
If you have a custom font you would like to use, you can use a service like the suggested below to create a .woff font file that you can upload to Showit and use for your design.
Resources:
WOFF font files: or https://onlinefontconverter.com
Showit Resources:
Some Best Practices:
I encourage you to resist the urge to make everything too big. Our templates are all set to where everything is appropriately sized for common website standards. Sometimes when you change out your fonts, your new one might appear different within the size settings so definitely adjust some if needed.
You will also want to be conscious of your colors. If your background is dark, make sure your font is legible on both the desktop and mobile version.
