Documentation
HomeForumHelp
  • About Cwicly
  • Beginner's Guide
    • Install Cwicly
    • Getting Started
      • Overview
      • Settings
    • Edit and Manage your Site
    • The WordPress Dashboard
    • The Dashboard Menu
    • Site Editor
    • Create your Front Page
      • Front Page
      • Header
        • Header Template Part
        • Structure
      • Footer
        • Footer Template Part
        • Structure
  • ⚡Cwicly
    • Block ID
    • Breakpoints
    • Class
      • Global/Block Classes
    • Cloud Design Library
      • Create an Account
      • Overview of the Cloud Dashboard
      • Editor: Cloud Library
        • Access from the Editor
        • Add a Library
        • Switch between Libraries
        • Default Library
        • Download Library
        • Remove Library
        • Categories
          • All
          • Popular
          • Button
          • Composition
          • Decorative
          • Interactive
          • Layout
          • Media
          • Menu
          • Social
      • Design Blocks: Cloud Library
        • Search for a Design Block
        • Refresh
        • Add Design Block
        • Save Design to Library
        • Remove Design Block
      • Library Globals
        • Library: Global Styles
          • Library: Add Styles
          • Installation: Add Styles
          • Library: Style Settings
        • Library: Global Classes
          • Library: Add Classes
          • Installation: Add Classes
          • Library: Class Settings
        • Library: Global Stylesheets
          • Library: Add Stylesheet
          • Installation: Add Stylesheet
          • Library: Stylesheet Settings
        • Library: External Classes
          • Library: Add External Classes
          • Installation: Add External Classes
          • Library: External Classes Settings
      • Community Library
        • Save to Community Library
        • Download from Community Library
        • Remove from Community Library
        • Set Community as default
    • Colour Picker
      • Gradient Builder
    • Components
      • Components Library
      • Components Folders
      • Settings
      • Component Properties Modal
      • Properties (Add)
        • Text Property
        • Rich Text Property
        • List Property
        • Link Property
        • Image Property
        • Gallery Property
        • Video Property
        • Icon Property
        • Colour Property
        • Toggle Property
        • Number Property
        • Class Property
        • ID Property
        • Options Property
        • Conditions Property
        • Visibility Property
        • CSS Text Property
    • Copy/Paste
      • Block Styles
      • Classes & IDs
      • Dynamic Preview
      • Global Styles
      • Global Classes & Stylesheets
      • Blocks
    • CSS Grid
    • Dynamic Inserter
    • Font Manager
    • Navigator
    • Quick Inserter
    • Scaling
    • Smart Inserter
    • Span
    • Tag
  • ⛵Tailwind
    • Getting Started
      • About
      • Activate
      • Copy/Paste
      • Enable editing mode
      • Apply a Class
      • Pseudo state Management
      • Automatically Sync
        • Breakpoints
        • Colours
      • Shells
      • Custom Tailwind Configuration
      • Import Tailwind Plugins
  • 🖌️Themer
    • Themer
      • Templates
      • Parts
      • Fragments
    • Role Editor
      • User Role
      • Gutenberg Editor
      • Global Block Behaviour
      • Block Toolbar
      • Miscellaneous
      • Components
      • Code Block
      • Blocks
      • Post Types
      • Force iFrame
      • Client Canvas View
      • Help
      • User
  • 🌐Global Styles
    • Global Styles
      • Global Colours
        • Folders
        • Colour tab
        • Palette tab
        • Modifiers tab
          • Opacity
          • Lighten
          • Darken
          • Saturate
          • Desaturate
          • Spin
      • Dark Mode
      • Global Gradients
      • Global Typography
      • Global Block Typography
      • Theme Elements
      • Global Settings
        • Defaults
        • Backend
      • Remove Gutenberg Global Styles
    • Global Classes & Stylesheets
      • Global Classes
      • Global Stylesheets
      • External Classes
  • 🎨Design
    • Background
      • Background Colors
      • Background Source
      • Sizing & Positioning
      • Styling
    • Typography
      • Typography
      • Rem conversion
      • Global Typography
      • Text Align
      • Font Family
      • Font Size
      • Font Weight
      • Spacing
      • Line Height
      • Style
      • Decoration
      • Transform
      • White Space
      • Overflow Wrap
      • Word Break
      • Word Spacing
      • Axes
      • Text Colour
      • Link Colour
    • Fluid Values
    • Layout
      • Display
      • Visual
      • Position
    • Sizing
      • Height
      • Width
    • Margin & Padding
    • Borders
      • Border
      • Shadows
      • Outline
    • Effects
      • General
      • Transitions
      • Animations
      • Filters
      • Text Shadow
      • Tilter
      • Separators
    • Transforms
    • Pseudo Classes/Elements
    • Relative Styling
  • 🎓Advanced
    • Custom CSS
    • Quick Code
    • Scrolling
      • Animate On Scroll
      • Scroll Direction
    • Attributes
    • Tooltip
      • Source
      • Theme
        • Custom Theme
  • 👆Interactions
    • Visibility Conditions
      • Blocks
      • Themer
    • Link
      • Link Source
      • Link Action
    • Interactions
      • Trigger
      • Actions
    • Hover Animation
    • Dynamic Slider
      • Settings Tab
  • 🖥️Editor
    • Inserter Panel
    • Quick Insert
    • Block Inspector
    • Primary Tab
    • Design Tab
    • Advanced Tab
    • Responsive Selector
  • 🔧Blocks
    • Accordions
    • Accordion
      • Basics
      • Settings
      • Colours
      • Layout
      • Typography
      • Margin and Padding
    • Button
      • Add
      • Icon
    • Code
      • Enable/Disable
      • Add
      • Languages
      • Settings
    • Columns
      • Basics
      • Add
      • Settings
      • Grid Editor
        • Auto Grid
        • Auto Template
    • Column
    • Container
    • Div
    • Filter
      • Basics
      • Filter Editor
      • Create a Filter
      • Style a Filter (example)
    • Fragment
    • Gallery
      • Filter
      • Source
      • Settings
      • Text
      • Image Style
    • Heading
    • Hook
    • Icon
    • Image
      • Source
      • Size
      • Settings
      • Hover Animation
    • Input
      • Input Settings
    • List
      • List Types
      • Settings
      • Icon
    • Maps
      • Settings
      • Size
      • Style
      • Overlay Layout
      • Colours
    • Menu
      • Settings
      • Main Menu
      • Sub Menu
      • Items
    • Modal
      • Modal Style
      • Settings
      • Trigger
      • Animation
    • Nav
      • Nav Block Settings and Styles
      • Nav Items Block
      • Nav Dropdown Block
      • Nav Link
      • Custom Dropdown Block
      • Nav Menu
    • Post Content
    • Paragraph
    • Popover
    • Query
      • Query Settings
      • Query Editor
        • Posts
        • Terms
        • Users
        • Comments
    • Query Template
      • Layout
      • Grid editor
    • Repeater
      • Nested Repeater
    • Section
    • Slider
      • Settings
      • Navigation
      • Dots
    • Slide
    • Styler
    • SVG Block
    • Tab List
      • Tab
    • Tab Contents
      • Tab Content
    • Taxonomy Terms
    • Video
      • Source
      • Settings
      • Div Overlay
  • ⚙️Settings
    • Settings
    • License
    • Icon Collections
    • Font Sets
    • Google Maps API
    • Advanced Settings
    • Regeneration
    • WooCommerce
  • 🛒WooCommerce
    • Archive Page
    • Attributes
      • Colour Type
      • Image Type
    • Cart
    • Product Variations
    • Create a Product Type
      • Simple
      • Variable
        • Create Attributes
      • Grouped
      • External
    • Build a Single Product Page
    • Dynamic Content
    • Link
  • 🗃️Miscellaneous
    • Blocks Specifics
    • Icon Selector
    • Trailing Slash
    • Units
      • Default Units
    • Code Snippets
    • Shortcuts
    • Actions
    • Filters
    • Browser Console
  • 🔗Resources
    • Changelog
    • Roadmap
    • Forum
Powered by GitBook
On this page
  • Open Font Manager
  • Font Cards
  • Active
  • Font Name
  • Font variations
  • Return
  • Google Font
  • Styles
  • Font Category
  • Favourites
  • Search Bar
  • Clear Search
  • Variable Fonts
  • Remove Font
  • Active
  • Installed
  • Google
  • Custom
  • Add
  • Input Custom Value
  • Activate
  • Return
  • Favourites
  • Inactive

Was this helpful?

  1. Cwicly

Font Manager

Last updated 1 year ago

Was this helpful?

The Cwicly Font Manager makes it easier for users to visually select, preview, and manage fonts within their websites. Users can now browse and download fonts instantly from the vast library of Google Fonts without ever leaving the editor. In addition, users can upload their own custom fonts to the Font Manager with just one click.

With increasing concerns over privacy, one of the main advantages of the Cwicly Font Manager is that it is designed to prioritise user privacy and security.

The Font Manager uses a locally hosted font library and the font files are stored on your own server. This ensures that they are transmitted securely and without the risk of them being intercepted by third parties.

Variable fonts are natively supported. They allow for a greater range of design possibilities by enabling you to customise the font weight, style, and other attributes within a single font file. This can help to improve website performance by reducing the number of font files that need to be loaded and can also make it easier for you to achieve a more customised and professional look.

And, to save your website from unnecessary load times, the fonts are only loaded conditionally if they are in use on the page. Global fonts, on the other hand, are always loaded.

Finally, complete your Cwicly font experience with visual fallback fonts customisation and custom axe properties.

Open Font Manager

  • Select a block.

  • Open the Typography tab.

  • Click the logo to open the Font Manager.

This opens the Font Manager modal.

Font Cards

You will find a visual representation of the fonts currently installed on your website, set out as Font Cards.

These contain a lot of useful information such as whether the Font is active, the Font name, a visual representation of the Font style, whether the font is a Google font or not, the number of styles, the Font category and whether the Font is variable or not.

Active

The dot to the left of the Font name will tell you whether the Font is active or not, that is whether it is available on your local installation.

  • A green dot means the Font is active.

  • A red dot means the Font is inactive and therefore not available locally.

Font Name

The Font Name identifies which font is concerned in the Font card.

Font variations

  • Click Font Name to display the available Font variations.

Return

Click Return arrow to go back to Font Manager.

Google Font

If the Font is a Google Font, you will find the Google logo here.

If the Font is not a Google Font, there will be no logo.

Styles

This will tell you the style types available in the dropdown and how many there are.

Font Category

This tells you what Font Category the Font belongs to such as Serif, Sans Serif, Handwriting, Display, Monospace.

Favourites

The Favourite Icon allows you to add a Font to your Favourites so that it is readily accessible.

A red heart signifies that the Font has been added to your Favourites.

Search Bar

The Font Search Bar allows you to search for the required Font.

  • Input required Font name.

Clear Search

The "Clear" button allows you to clear a search.

  • Click Clear button to remove current search.

Variable Fonts

The Variable Font Icon lets you know that the Font on the Font card is a variable Font.

A variable font allows for multiple variations of a typeface to be included in a single file. These variations can include changes in weight, width, slant, and other design features.

Variable fonts allows for more flexibility and control over typography, as you can adjust various aspects of the font to fit the needs of a particular project or layout.

Remove Font

The Bin Icon allows you to remove a Font from your local installation.

  • Click the Bin icon to remove the chosen Font.

To the left, you will find several tabs, including Active, Installed, Google, Custom, Favourites, Inactive.

Active

The Active tab visually shows you the Fonts that are available on your local installation and are Active.

The number count shows you the number of active Fonts you have installed on your local installation.

Installed

The Installed tab visually shows you all the Fonts installed on your local installation.

The number count shows you the total number of Fonts installed on your local installation.

Google

The Google tabs gives you a visual representation of all the Google fonts available for download and their characteristics.

The number count tells you the total number of Google fonts available for download.

Custom

Custom Fonts include fonts you purchase or specially branded fonts you use.

Add

  • To add a new Custom font to the Font Mamager, click the "+ Add" button.

  • Input the Custom Font name.

  • Click "Create" to open the Custom Font Upload panel.

  • Click the " + Upload font variation" button.

  • Select the required Custom Font.

  • Click "Open" button to open the Custom Font in the Font Manager.

  • The required Custom Font is now visible in the Font Manager.

  • Click "+" to add additional Custom values.

Input Custom Value

You can imput a Custom Value by selecting the Custom option in the Font weight dropdown.

  • Open the Font weight dropdown and select Custom.

  • Choose the limits of the required weights. Leave an empty space between the Font range.

  • Click "Modify".

  • The Custom values will be shown on the Font card.

Activate

  • Activate by clicking the ring next to the Custom Font name.

Return

  • Click Return arrow to go back to the Font Manager menu.

The newly added Custom Font is now available in the Custom tab of the Font Manager.

Favourites

The Favourites tab displays your Favourite Fonts.

This allows you ready access to the Fonts you use most.

Inactive

The Inactive tab displays the Fonts you have available in your local installation but that are inactive.

.

⚡