Custom Type Widget

This powerful text widget allows for integration of Google Fonts and Adobe’s Typekit fonts. In addition to these massive libraries, you will find other advanced features such as a full text editor, and alignment and font size control for text on individual devices. This widget offers more power and customization than the standard Text widget. While the standard text widget is ideal for most body text, use the Custom Type widget for headlines, logo text, or whenever you have a need for a special font or alignment.

Demo: https://demo.wocode.com/custom-type

Update Log:
  • Updated the widget to match the new terminology used on the TypeKit site at fonts.adobe.com (12/8/2021)

Setup

BASIC SETTINGS

  • Place the widget onto your page.
  • Open the widget option panel.
  • Enter a Unique ID. This is an ID that you create, and can be anything you like. The reason for this is so that multiple Custom Type widgets can be used with individual settings. If a Unique ID is not used in each Custom Type widget, style settings made in one widget will apply to all widgets on a page. We have found that if you are using multiple Custom Type widgets on the same page, it is a good idea to change the Unique ID from the default “fonts-1” on the first Custom Type widget you place on the page. This way, as you place additional Custom Type widgets, their style settings will not interfere with other widgets if you don’t immediately change the default Unique ID.
  • Content: Enter your text content here. Note that this is a full text editor, which allows for things like bullet points, text color, and the ability to style individual words or phrases.
  • Font Source: Select from Google Fonts or Typekit.

GOOGLE FONT SETUP

  • Select Google Fonts as your Font Source.
  • Follow the link in the bottom of the widget panel to fonts.google.com
  • Select a font at fonts.google.com
  • Copy the font name.
  • Paste the font name in the Font to Embed field, as well as the Font Family field (between the two single quotes only).
  • Your Google font should be seen instantly once you click elsewhere in the widget panel.

TYPEKIT FONT SETUP

  • Select Typekit as your Font Source.
  • Follow the link at the bottom of the widget panel to fonts.adobe.com.
  • Log in if you already have an account with Adobe Typekit. If you don’t have an account yet, you will need to register.
  • Select a font.

  • Click the “Activate font” toggle to enable the font.

  • Click the </> icon. In the new window, using the dropdown arrow click “+ Create new project”, and then name your project. Alternatively, you may use a pre-existing project from the dropdown if one exists.

  • Click "Create", then click "Edit Project".

  • From the project page, you will find the "Project ID" on the top of the page. Copy that ID and paste it into the widgets Project ID field. 

  • You will also find the “font-family” field. For this font, copy the font-family and past it into the Font Family field within the widget.

  • While you may see the font update instantly, you may need to publish your site in order for the fonts to sync properly.
  • Note: it is important to use the correct font name. Many times, the font name seen in the browser is a general name for the font, though the actual font name is different. For example, when browsing through the font browser, you will see the font “Cantoni”. The actual name for this font is “Cantoni Pro”, as you will see in your project. Always use the name found in your project. Lastly, when entering the font name into the Font Family field in the Custom Type widget options, replace any spaces with hyphens. So the correct usage of the Cantoni font in the Font Family field would be ‘Cantoni-Pro’, sans-serif.

TEXT STYLING (GLOBAL)

The following section in the widget options contains all of the text styling options. These options are self explanatory: Font Size, Text Align, Line Height, Letter Spacing and Text Transform. These settings apply to all device layouts.

DEVICE-SPECIFIC STYLING

These settings are specific to the chosen device. You may use use unique font size and text alignment for specific device layouts.

  • Choose Desktop, Mobile, or Tablet in the Device-Specific Styling dropdown.
  • The Enable _____  Styles toggle will update with the device name set in the Device-Specific Dropdown. Toggle this to enable.
  • Set the Font Size and Text Alignment as you like for the selected device.
  • You may repeat this process to set alignment for each device layout.
  • Use the device preview function at the top of the editor to see the text changes on other layouts.

DESIGN SECTION & TEXT COLOR

  • Open the Design section by clicking the Design Tab.
  • Use the Color Picker to apply a color to all text in the content box.
  • To apply color to individual words or phrases, use the text color tool within the content box near the top of the widget panel in the Content section.