Articles on: 3. Building Your Website

3.2.1. Setting up: Colors, Fonts, Buttons

1. In order to access the Global Options, simply go to Dashboard > Appearance > Customizer > Colors and Fonts. These settings allows you to visually modify your site’s appearance.



2. Colors


  • Here you will see color palette that helps maintain visual consistency across your site
  • Use the color picker or enter a hex code to apply your brand colors
  • Keep in mind to edit Content Link Color as well since it will apply a global color to all links on the site



3. Buttons 


Here you can customize:

  • Font style
  • Text color
  • Button background color
  • Hover colors
  • Border radius (rounded corners)
  • Padding (button size)



4. Fonts


  • Body Font: controls the default typeface for regular text (all paragraphs). Should be legible and easy to read.
  • Headings (H1- H6): provide structure and visual hierarchy. H1 is for titles; H2–H6 organize sub-content.
  • Choose your preferred font from the dropdown menu.
  • You can adjust font size, font weight, font style, and line height depending on your branding guidelines.



There are two different ways to control font sizes, and each serves a different purpose.


4.1. Font Size in the Customizer (Global Settings)


The font size option in the Customizer sets the default (global) font sizes for your site. These values act as the baseline typography used across all pages and posts.

  • Can be found in Dashboard > Appearance > Customize > Colors & Fonts > Typography
  • Applies site-wide
  • Controls default sizes for headings, body text, and other text elements
  • Best for maintaining consistent typography throughout your website


Think of this as the starting point for your design.



Font Size in the Customizer




4.2. Font Size in the Block Settings (Local Overrides)


The font size option directly in a block allows you to override the global font size for that specific block only.

  • Can be found directly in the Block Settings
  • Applies only to the selected block
  • Does not affect other content or global settings
  • Useful for emphasis, design variations, or special layouts


This gives you fine-grained control when you need a specific piece of content to stand out.



Font Size in the Block Settings




4.3. How They Work Together

  • If a block does not have a font size set, it uses the Customizer’s global font size.
  • If a block does have a font size set, the block’s value overrides the global setting.


In short:

  • Customizer = global defaults
  • Block settings = individual overrides



Updated on: 16/12/2025