📁
Template Documentation
  • Introduction
  • Getting Started
    • Installation
    • Updating
    • Uninstallation
    • Changelog
    • Joomla 4
  • Template Options
    • Overview
    • Basic
      • Logo
      • Toolbar
      • Header
      • Mobile
      • Page Title
      • Dialog
      • Body
      • Footer
      • Contact Info
      • Social Icons
  • Presets
  • Layout
  • Menu
  • Typography
  • Blog
  • Custom Code
  • Advanced
    • Coming Soon
    • Error Page
    • Cookie Banner
    • Compression
    • Scss
    • Font settings
    • Image
    • Import & Export Layout
    • Analytics
  • Developers
    • File Structure
    • Module Positions
    • Customization
    • Add Custom Fonts
    • Changing the Name of a Theme
  • Tutorials
    • Overview
  • Troubleshooting
    • Layout Issue
    • File Permission Issues
Powered by GitBook
On this page

Was this helpful?

Typography

Customize the typography of your website.

PreviousMenuNextBlog

Last updated 3 years ago

Was this helpful?

Define the typography quickly for Body, Navigation and Headings. The following settings can be found in the Template Options → Typography panel.

Common Options:

  1. Font – Choose your font family

  2. Weight – Choose the weight of the font

  3. Size – Choose a size for your font (px, em, etc.)

  4. Color - Choose a color for your font

  5. Subset – Option for Google Fonts only. Choose subset used for language native letters for the font, like Latin, Latin Ext, Cyrillic, Vietnamese and Greek. Not all Google Fonts support your native language, so you may not see all extra diacritical marks. In that case, you have to choose a different font.

  6. Line-Height – Set your line-height, the distance between lines of text.

  7. Letter Spacing – Set horizontal spacing between text characters. Positive values of letter-spacing cause characters to spread farther apart, while negative values of letter-spacing bring characters closer together.

  8. Alignment - Set the horizontal alignment of the content.

Notice! Not all fonts fully support your native language diacritical marks (signs). Check it on Google Fonts Website for more info.

Body and Headings

Option

Description

Body

Define the typography for the main body text and regular text paragraphs.

Heading 1 -> Heading 6

Define the typography for headings (h1, h2, h3, h4, h5, h6).

Custom

Choose a special font from Google Font list and then using css selectors to specify the elements that you wish to use the custom font face.

Tip! To change the font size used for Tablet and Mobile devices.

The device preview buttons can be found at the top of the Toolbar. Use the device icons to check how your site looks on different device sizes.

GDPR/EU-DSGVO/Privacy Policy and Google Fonts

Google Privacy Policy

When using any Google Service (Google Fonts), you agree to the Google Privacy Policy. It explains in detail what data is collected, why it is collected, and what happens with it.

In general, Google claims GDPR compliance. But if you feel that Google's explanations are not enough for law regulation in your country - anytime you can decide to:

  1. Not use Google Fonts on your site, disable them from Typography settings, and use default system font (tip below).

  2. Replace Google Fonts, loads the fonts from your own server, and no requests are sent to Google Fonts server. Use Fontsquirrel or google-webfonts-helper service which makes it easy to self-host any font from Google Fonts. If you embed them from your own server, everything in a legal way would be OK again. Check the Add Custom Fonts section for more info.

Default System Font

The default system font will be used depending on the user’s operating system: San Francisco on macOS and iOS, Segoe UI on Windows, Roboto on Android, Helvetica Neue on older macOS and Arial on any other system.

Typography Options
Custom typography