Custom Type

  1. Home
  2. Knowledge Base
  3. Widget Docs
  4. Custom Type

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.

 

Tutorial Video

 

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 in the bottom of the widget panel to typekit.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 “Add to Kit” button.
  • On the following page, you may add the font to an existing kit, or create a new kit. Perform one of these actions.
  • Adobe will create a pop-up showing your kit. Confirm that the font is in your kit, and note the name of the font exactly as it appears in the kit.
  • Click the “Publish” button.
  • Click the “Kit Settings” link in the upper right corner of the pop-up.
  • Enter the name of your domain in the Domains box.
  • Click the “Colophon Settings” tab.
  • Copy the string of characters seen at the end of the link provided. This is your Kit ID.
  • Return to the Custom Type widget in the Architect editor.
  • In the “Kit ID” field, enter the Kit ID you’ve copied.
  • Enter the name of the font between the two single quotations in the “Font Family” field.
  • 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 kit. Always use the name found in your kit. 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.

 

Was this article helpful?

Related Articles

Join Now