# How to Change Colors and Fonts on Your MakeOurs Website Canonical page: https://makeours.com/blog/change-colors-fonts-makeours-website Published: 2026-06-14 The AI picked a color scheme and font pairing for your site — but are they right for your brand? Here's how to change colors and fonts on your MakeOurs website so it looks exactly the way your business should. --- The AI generated your site and the structure is good. The sections are right, the copy is close, and the layout makes sense. But the colors feel off — too corporate when your business is meant to be warm, or too playful when you need to project authority. The font does not look like what you had in mind. The site is mostly there, but it does not feel like _your_ brand yet. Changing the colors and fonts on your MakeOurs website takes under five minutes and affects the entire site at once — no section-by-section adjustments, no hunting through settings for each individual button. This guide walks you through where to find the controls and how to use them to make your site look the way your brand actually looks. --- ## 1. Why Colors and Fonts Are Not Just Aesthetic Colors and typography do two things at once. They shape how visitors perceive your business before they read a single word, and they reinforce your brand across every touchpoint — your site, your cards, your packaging, your social media. A catering business in Jaipur with warm oranges and a clean serif font projects something different than the same business with cool blues and a geometric sans-serif. Neither is wrong. But one will feel more like _that specific business_ depending on what that business actually is. Before you open the color picker, have your brand colors ready — ideally as hex codes (e.g., `#FF6B35`) or at minimum as a reference image you can color-pick from. If you do not have brand colors yet, this guide includes tips on choosing colors that work for your category. --- ## 2. Where to Find the Color and Font Controls To change colors and fonts on your MakeOurs website, open your site in the builder. In the **left sidebar**, click the **Design tab** (the second tab, next to Content). All global style controls are here. Inside the Design tab you will find: **Color fields:** - **Primary** — your brand's main color, used for buttons, links, and accent elements - **Secondary** — a supporting color for secondary buttons and accents - **Accent** — a highlight color for standout elements - **Background** — the overall page background (usually white or a very light tone) - **Surface** — card and panel backgrounds within sections - **Alternate** — used for alternating row or section backgrounds - **Text** — the main body text color - **Muted** — secondary and placeholder text - **Border** — dividers and outline colors - Plus status colors: Success, Error, Warning, Info Each color shows a swatch. Click the swatch to open the color picker, or type a hex code directly (e.g. `#FF6B35`). A reset button next to each color restores it to the default. **Font and spacing controls** are also in the Design tab — covered in Section 5. Changes apply site-wide immediately in the preview. You will see every button, heading, and accent update in real time as you adjust. Per-section background and color overrides are available inside each section's editor panel in the Content tab. --- ## 3. How to Choose Your Primary Color Your primary color is the most visible color on your site. It shows up on buttons, hover states, links, and highlighted elements. Visitors will associate it with your brand. **General guidance by business type:** - **Healthcare, finance, legal:** Blues and greens project trust and calm. Dark navy, teal, forest green. - **Food, hospitality, retail:** Warm tones perform well — burnt orange, terracotta, warm red, golden yellow. - **Creative, design, fashion:** Black, charcoal, or a carefully chosen brand color. Let your work do the talking. - **Education, coaching:** Warm neutrals, soft blues, or the colors your institution already uses. - **Technology, SaaS, startups:** Electric blue, deep purple, or clean black. If you already have a logo, pull your primary color directly from it. Hex codes from your logo file ensure perfect consistency. Your designer should be able to give you these. --- ## 4. Setting Your Secondary Color Your secondary color pairs with your primary. It is used for subtler elements — section backgrounds, border accents, icon fills, and secondary buttons. A few safe pairing approaches: **Monochromatic:** A lighter or darker tint of your primary color. If your primary is `#1A5276` (dark navy), a secondary of `#AED6F1` (light blue) creates a clean, cohesive look. **Complementary neutral:** A warm off-white or light grey as secondary works with almost any primary color. `#F5F5F0` or `#FAFAF8` are safe defaults. **Complementary accent:** A contrasting color that sits opposite your primary on the color wheel. Use sparingly — as a secondary, it can feel busy. Better used as an accent on specific CTAs. When in doubt, set your secondary to a very light version of your primary and add contrast through typography and spacing instead. --- ## 5. How to Choose Fonts That Fit Your Brand MakeOurs includes five font options, all Google Fonts — freely licensed, fast to load, and optimised for screens. You do not need to upload custom fonts or paste embed codes. The available fonts are: **Inter, Poppins, Lora, Playfair Display, and Roboto**. To change the font: in the sidebar Design tab, find the **Font Family** dropdown. Select one font — it applies to both headings and body text across the entire site. Additional typography controls include: - **Base font size:** 14px, 16px, or 18px - **Heading weight:** Normal, Medium, Semibold, Bold, or Extra Bold - **Body weight:** Light, Normal, or Medium ### Which font works for your brand **Serif fonts** (Playfair Display, Lora): Established, trustworthy, classical. Great for legal, financial, luxury, editorial, and premium service brands. Lora is slightly warmer and more approachable; Playfair Display is bolder and more formal. **Sans-serif fonts** (Inter, Poppins, Roboto): Clean, modern, versatile. Works for tech, SaaS, health, education, coaching, and most service businesses. - **Inter** — neutral, highly readable, excellent for data-heavy or professional contexts - **Poppins** — geometric and friendly, good for coaching, creative services, and modern brands - **Roboto** — clean, corporate, slightly more formal than Poppins ### Choosing a body-friendly font Readability is the top priority for body text. All five available fonts are legible at body size. For long paragraphs, Inter and Roboto tend to be easiest to read quickly. Poppins works well for shorter, punchy service descriptions. Lora reads beautifully for editorial and story-driven copy. Playfair Display is best reserved for headings — it is a display font first. ![Side-by-side comparison of two MakeOurs site previews showing different font pairings — a serif heading with neutral body font versus a sans-serif combination](https://makeours.com/images/blog/makeours-font-pairing-comparison.jpg) _Font choice changes the entire personality of a site. A serif heading makes a law firm feel established; the same site with a clean sans-serif reads as modern and accessible._ --- ## 6. Font Pairings Using MakeOurs Fonts Since MakeOurs uses a single Font Family setting (one font for the whole site, weight-controlled separately), the "pairing" is really about choosing the font that fits your brand and using heading weight to create contrast: | Font | Best for | Heading weight | Body weight | | :------------------- | :------------------------------------------- | :----------------- | :-------------- | | **Playfair Display** | Law, finance, luxury, editorial | Bold or Extra Bold | Normal | | **Lora** | Wellness, coaching, boutique services | Semibold | Normal | | **Poppins** | Startups, coaching, creative, education | Bold | Light or Normal | | **Inter** | Tech, SaaS, healthcare, B2B | Semibold | Normal | | **Roboto** | Corporate services, retail, general business | Bold | Normal | The visual "pairing" effect comes from the contrast between heading weight (Bold/Extra Bold) and body weight (Normal/Light). Playfair Display at Extra Bold for headings with a Normal body weight creates the same classical serif contrast you would get from a two-font pairing. --- ## 7. Applying Your Colors Consistently Across the Site Once you set your primary and secondary colors, check how they look across every section type on your site — not just the hero. Scroll through the full editor preview after changing colors and look for: - **Buttons** — does the primary color provide enough contrast against white button text? - **Section backgrounds** — does your secondary color make text legible on top of it? - **Links** — are they distinguishable from regular text? - **The header** — does your logo color clash with the header background? If any of these have contrast issues, adjust the shade rather than abandoning the color entirely. A small shift toward a darker or lighter value often fixes contrast without changing the overall feel. --- ## 8. Frequently Asked Questions ### Q1: How do I change colors on my MakeOurs website? Open your site in the builder. In the left sidebar, click the **Design tab**. Click any color swatch to open the color picker, or type a hex code. To change the color of just one section (not site-wide), click that section in the Content tab, then look for a Background or color field in its editor panel. ### Q2: What fonts are available on MakeOurs? The five available fonts are: **Inter, Poppins, Lora, Playfair Display, and Roboto**. You select one font in the Design tab's Font Family dropdown — it applies across the site. Heading and body weight are adjustable separately. Custom font upload is not available. ### Q3: Do I need to know the hex code of my brand color? Knowing your hex code gives the most accurate result. If you do not have it, use the color picker in the style panel to match your color visually against a reference image. For precise brand matching, ask your designer for the hex code or find it in your logo file. ### Q4: Will changing colors affect my published site immediately? No. Color changes in the editor only go live when you hit Publish. You can experiment with colors freely in the editor without affecting what visitors see on your live site. ### Q5: I changed my font but some sections still show the old font — why? Some sections may use hardcoded font weights or inline styles. Try clicking into the specific section and checking whether it has a local font override. Most sections should update automatically when you change the global font in the style panel. --- ## 9. Conclusion: Make Your Site Look Like Your Brand Your brand colors and fonts are not cosmetic decisions — they are the fastest way to communicate what kind of business you are before a visitor reads anything. A few minutes in the MakeOurs style panel can take your site from "AI-generated default" to "this clearly belongs to this specific business." Know your primary color before you open the panel. Keep your secondary color as a supporting neutral or lighter tint. Choose the one font that matches your brand personality — all five options are legible at body size, so readability is not a concern with any of them. Use heading weight to create contrast. Check the result across every section. Then publish. When you change colors on your MakeOurs website with intention, the result stops looking generated and starts looking designed. **Get your brand colors on your site today — open the style panel and make it yours.** [Edit Your MakeOurs Site](https://makeours.com/user/new-site) --- ### External References & Further Reading: - [Google Fonts: Browse and preview font pairings](https://fonts.google.com) - [Web.dev: Color contrast and accessibility guidelines](https://web.dev/color-and-contrast-accessibility/) - [Smashing Magazine: The Principles of Design — Color Theory for Designers](https://www.smashingmagazine.com) _For more guides on customizing your MakeOurs website, visit our [Blog section](https://makeours.com/blog)._