Qwilr helps your brand to remain consistent across all your documents.
Account administrators can set up brand colors and fonts in one location and have them applied consistently across all Qwilr Pages produced in the account. The same is true of setting domains. Set once and forget.
Of course, sometimes you might want to make exceptions to your brand rules. That's why we created Custom Styles. So you can modify the style of individual blocks or set styles for just one Qwilr Page.
Colors are selected at the account level and apply to all projects within your account. You can select a "Primary Color" and a "Complementary Color".
To select these colors, head to the Settings menu and choose Set up Brand.
On the page that loads click on either "Primary Color" or "Complementary Color".
You can select colors from our pre-populated palette or enter a hex color code.
Here are some useful tools for finding hex color codes:
- http://paletton.com/ (good for finding complimentary color codes)
- http://html-color-codes.info/colors-from-image/ (good for confirming the hex color code on your company logo)
The primary 'Brand' color is used for the following elements:
- Heading 1 (H1)
- Background colors
The secondary 'Complementary' color is used for the following elements:
- Heading 2 (H2)
- Background colors
If you have (or wish to use) only 1 brand color, then you can either:
- Set both your Brand Color and Complementary Color to the same color code; or
- Set your Complementary Color to a neutral black or grey.
Fonts are selected at the account level, and apply to all projects within your account. Different fonts can be selected for Heading (H1), Subheading (H2) and Body text.
To select these fonts, head to Settings > Setup Brand then select Fonts.
You can then adjust fonts for Heading, Subheading and Body text. Once you click on either of these categories, you'll have three options:
- Select a Google font (one of 700+ fonts).
- Select a Typekit font (once you've added your Typekit Font-Kit ID).
- Select a custom font (one you've uploaded).
How do I start using a Google font?
Head to Settings > Fonts in your account. Select one of the text classes (Heading, Subheading, or Body text); select "Google Fonts"; select your favorite font.
Note that you can search through, and filter, the (very long!) list of Google fonts.
How do I use a Typekit font?
First things first, you'll need a Typekit account. Once that's taken care of:
Step 1. Sign in to your Adobe Fonts account.
Step 2. At the top of the page head to the Typekit link
Step 3. From there go to the My Web Projects link.
Step 4. On that page you'll see the fonts in your collection and also your Project ID.
Step 5. With your Typekit ID copied, head to Settings → Setup Brand → Fonts in your account.
Step 6. Select one of the classes (Heading, Subheading, or Body text) and then select "Typekit"
Step 7. Enter your Project ID in the field
Using Custom Fonts
Once you have your .ttf file ready, head to Settings > Fonts in your account. Select one of the text classes (Heading, Subheading, or Body text); select "Custom" and upload your .ttf file there.