LayoutHub
  • What is LayoutHub?
  • User guides
    • Support
    • Installation
    • Uninstallation
    • Upgrade/Downgrade
    • FAQs
      • How to remove instagram section from Layouthub
      • What is "Pages limit"?
      • When can I "Edit code"?
      • What about "Save section"?
      • What is " Auto save draft"?
      • What is "Integration Services"?
      • How to set the same font between Shopify and LayoutHub?
      • How to custom font and color on LayoutHub?
      • How to set "Page handle or human url"?
      • Connective Button
      • How to save page without publish it
      • How to change the meta SEO for LayoutHub's page
    • Common Issues
    • Layout Management
      • Create Layouts
      • Design Blocks
      • Export & Import
      • Edit Section Code
      • Edit a Layout
      • Assign a Layout
      • Duplicate a Layout
      • Delete a Layout
    • Section builder
    • LayoutHub pages/templates
      • Home Page
        • Create additional Home Page
        • Make an existing page as home page
        • Restore to default Home Page
        • Customize Shopify Home Page
      • Sub-page
        • Contact Form
      • Product Template
        • Product Detail
        • Related Product
      • Collection Template
      • Blog Templates
      • Article Templates
      • Insert section
    • Pricing Plans
    • Settings
      • General
      • Theme Settings
      • Quickview Settings
      • Swatch color settings
      • Third party Apps
        • Product Review
        • Product Wishlist
    • Trash
    • Sale Tools
    • Referrals
    • Integration
      • Add/Edit Profile
      • Add New Contact
      • Export Contact
      • Mailchimp
      • Hubspot
      • ActiveCampaign
      • GetResponse
      • SendGrid
      • Gmail SMTP
      • Google Sheets
      • Omnisend
      • Klaviyo
      • ConvertKit
    • Tracking & Analytics
    • Layouthub & Shopify
    • Translate Apps
    • Recommend apps
      • Avada SEO Optimization
      • Ali Reviews ‑ Product Reviews
      • Ryviu: Product Reviews App UGC
      • Quick View by Secomapp
      • LAI AliExpress Reviews
      • Judge.me Product Reviews
      • Growave - Loyalty, Wishlist, Reviews UGC
      • Opinew Product Reviews
    • Refund Policy
    • Instagram token
  • Development
    • Getting started
    • Tools
      • LayoutHub Kit (for LayoutHub developers only)
      • LayoutHub Kit Extension for Visual Studio Code
    • Layout Structure
    • Reference
      • Engine syntax
        • Deprecated: March 2020
        • Chuẩn template má»›i - LayoutHub Editor V4
      • Create a section
      • Components
      • Liquid in section
      • Javascript in section
      • Register vendors
      • Settings.js
        • Call-to-action
        • Text
        • Textarea
        • Text Editor
        • Dropdown
        • Checkbox list
        • Checkbox radio
        • Toggle
        • Number slider
        • Number
        • Single image
        • Image library
        • Color picker
        • Icon picker
        • Font picker
        • Background
        • Picker
        • Group fields
Powered by GitBook
On this page
  • 1 - Using font from Google
  • 2 - Using font file upload
  • 3 - Primary color

Was this helpful?

  1. User guides
  2. FAQs

How to custom font and color on LayoutHub?

PreviousHow to set the same font between Shopify and LayoutHub?NextHow to set "Page handle or human url"?

Last updated 4 years ago

Was this helpful?

Custom fonts are a great way to add a unique look to your site that is as much part of its visual identity as a logo, color or pattern. This built-in feature helps you embed custom fonts easily into your Layout - no coding required. You can customize the font used for all headings and body text font (the content areas).

Supported files for uploading: woff2, woff, ttf

Fonts are set in pairs, one for headings and the other for the body font.

  • Head-Title: Choose a font to use for all of the headings on your blog. Common examples of heading text includes section titles, post and page titles, widget titles, comment headers, and headlines inside posts and pages.

  • Font-family: Choose a font to use for the main body text product description, blog content, pricing...

Each time you change a font, the live preview refreshes so you can see how that font will look on your layout. You can change them as many times as you want.

1 - Using font from Google

Taking font from Google and automatic setting.

Result:

2 - Using font file upload

Result:

3 - Primary color

Primary color set for all hover on all the pages (home, product, blog, collection, etc)

If you love LayoutHub, could you consider posting an review? That would be awesome and really help us to grow our business, here is the.

link