Instructions

Steps:

1. Install the app.
2. The FontPicker app is disabled by default. Click "Enable" to enable it.
3. In the app settings, to create a new one, click "Add new".

4. There have two options:

   • Use Google font: choose from over 1000+ Google Fonts and font variants.

   • Upload Custom font: upload your own font files, .ttf, .otf, .woff, and .woff2 font file types are accepted.

5. Click on a font to open its settings.

6. Assign the font to your elements. There are two types of element:

   • Basic elements: body, h1, h2, h3, h4, h5, h6, p, blockquote, li, a, strong, b, em

   • Custom element: define your own elements and the FontPicker will build up the typography.

7. To set up the font style, click "Style" tab.

   • Font Color: Customize the font color of any element.

   • Font Size: Customize the font size of any element.

   • Line Height: Improve readability by tweaking your line heights.

   • Letter Spacing: Fine-tune the space between letters to perfect your typography.

   • Text Transform: Transform headings and text with a click, options included: UPPERCASE, lowercase, and Capitalize

   • Text Decoration: Set the appearance of decorative lines on text, options included: underline, line-through, and overline

   • Text Align: Set the horizontal alignment of a block element or table-cell box, options included: left, right, center, and justify

   • Drop Cap: Show large initial letter

   • Text Shadow: Give the text a shadow whether to enhance, highlight, or increase the visual appeal of specific text by giving the text depth.

8. Via the "Advanced" tab, you can also customize the margin, padding, background, border, border-radius, border-shadow, position and width properties.