Custom Fonts

You can use a variety of fonts within your Skuid themes, including Google fonts, Adobe Typekit fonts, or even fonts stored in zip files.

Note

Working within a Lockerservice-enabled Salesforce Lightning org? You’ll need to upload your custom fonts as static resources.

Using Custom Fonts

Once custom fonts have been added to a theme, they will be available under the Web Fonts header wherever fonts can be set in the Theme Composer.

If a Skuid page’s theme contains any custom fonts, those fonts will also be accessible within the Rich Text component in the Composer.

Web Fonts

Web fonts are added within the Theme Composer’s Web Fonts tab. Selecting this tab from the Theme Composer’s sidebar will open the Web Fonts pane, which contains sections for Google Fonts and Adobe Typekit.

Add a Google Font [[]]

Note

You must add Google Fonts one at a time. If you select more than one font when generating the Google Fonts snippet code, Skuid will only see the first selected font.

  1. In another tab, navigate to Google Fonts.

  2. Browse or search for a font to include.

  3. Once you’ve found a font, click Select this font.

  4. Click the Family Selected box.

  5. Choose the styles to include under the Customize tab.

    Skuid recommends selecting at least the Normal/Regular 400 and Bold 700 styles. While text may still be bolded without the Bold 700 style, it may not render as well.

    Note

    Pay attention to the Load Time indicator. Try not to select too many styles.

  6. Copy the code snippet listed in the Embed tab under Embed Font.

    For example, the embed code for Ubuntu with light, normal, and bold stylings would look like this:

    <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,700" rel="stylesheet">
    
  7. Return to the Theme Composer and paste the embed code within the Snippet field in the Google Fonts section. This will automatically generate the Font Name.

To add more fonts, click Add More. Return to Google Fonts and repeat the above steps for each font.

Add an Adobe Typekit [[]]

If you have an Adobe account, you can add a kit from Typekit.

  1. To add a Typekit kit, navigate to your Adobe account in another browser tab.

  2. Create and publish a kit following Adobe’s documentation.

    Note

    Make sure to enable the proper domains within the kit. This would include your Skuid site domain or Salesforce domain depending on your platform of choice.

  3. Copy the 7-digit Kit ID from the embed code popup.

  4. Return to the Theme Composer and paste the kit ID within the Kit ID field in the Typekit section. If the kit is set up correct, this will automatically generate the Font Name.

Custom Fonts from Zip Files

It is also possible to use custom fonts from your local machine within your Skuid themes, but doing so requires some extra work.

You’ll need to do the following:

  1. Gather all font files—the different weights and stylings for a typeface—in one folder.

  2. Write a specifically formatted CSS file, which Skuid will use to reference them.

    Note

    How you format this CSS file depends on whether you use Skuid NLX or Skuid SFX.

  3. Compress these files into a zip file.

  4. Upload the zip file to your platform of choice.

  5. Add the font to the theme.

Format types

One major concern when using custom fonts is browser compatibility. Different font formats work in different browsers. Because of this, consider having your font in multiple formats if you wish to achieve cross browser compatibility. Also of note, the font file’s format will determine how your CSS is written.

This list covers the most common formats for the purposes of this documentation. For more information see MDN’s article on the @font-face CSS rule and browser compatibility.

  • Format: woff2 (WOFF 2.0)
    • CSS format value: woff2
    • Browser compatibility: Supported by most modern browsers, but may see issues on IE11 and Safari for older macOS systems.
  • Format: woff (WOFF 1.0)
    • CSS format value: woff
    • Browser compatibility: Widely compatible with most modern browsers. May have issues with pre-IE11 versions of Internet explorer.
  • Format: eot (Embedded OpenType)
    • CSS format value: embedded-opentype
    • Browser compatibility: Supported in Internet Explorer but otherwise unsupported.
  • Format: ttf (TrueType)
    • CSS format value: truetype
    • Browser compatibility:
  • Format: svg (SVG fonts)
    • CSS format value: svg
    • Browser compatibility: Supported in Safari and iOS but otherwise widely deprecated.

To utilize custom font files within Skuid SFX, upload them as a static resource in the appropriate Salesforce org.

Note

Before you begin, it’s best to decide on a static resource name for the font’s zip file. The name of the static resource determines several URLs below.

Gather files

First, ensure that all font files for the custom font you’ll be using are the in the same directory. There will likely be different font files for different font weights and styles.

For for a font named Example Font, you may have a folder with the following files:

  • examplefont-normal.woff
  • examplefont-bold.woff
  • examplefont-italic.woff

For maximum browser compatibility, you may also have copies of each font file in a different format. Perhaps in eot and ttf formats. In that case, you would have 9 files total:

  • examplefont-normal.woff
  • examplefont-bold.woff
  • examplefont-italic.woff
  • examplefont-normal.eot
  • examplefont-bold.eot
  • examplefont-italic.eot
  • examplefont-normal.ttf
  • examplefont-bold.ttf
  • examplefont-italic.ttf

Write the CSS

With all font files in the same directory, create a new CSS file in that same directory. This CSS file will tell Skuid which font file represent which weight and style. Because of this, you must write a font-face rule for each font weight or style you’ll be uploading.

You must also write the resources URLs based on the name of the static resource containing the font files. This means each resource URL will begin with /resource/name-of-static-resource/.

To illustrate, here’s the basic format required for these font-face rules:

@font-face {
  font-family: 'Example Font';
  src: url('/resource/name-of-static-resource/name-of-font.ext') format("format");
  font-weight: normal; /* Set to normal, light, bold, or the numerical font weight */
  font-style: normal; /* Set to normal, italic, or oblique */
}

However if you have multiple font files for each weight or style, the CSS is more involved.

To better illustrate how a full CSS file may look, here are the rules for the 9 font files listed in the previous step:

/* A font-face rule for the normal weight */
@font-face {
  font-family: 'Example Font';
  src: url('/resource/name-of-static-resource/examplefont-normal.eot'); /* For compatibility with IE9 */
       url('/resource/name-of-static-resource/examplefont-normal.woff') format('woff'),  /*A reference for each separate file format*/
       url('/resource/name-of-static-resource/examplefont-normal.ttf')  format('truetype'), /*A reference for each separate file format*/
  font-weight: normal;
  font-style: normal;
}
/* A font-face rule for the bold weight */
@font-face {
  font-family: 'Example Font';
  src: url('/resource/name-of-static-resource/examplefont-normal.eot'); /* For compatibility with IE9 */
       url('/resource/name-of-static-resource/examplefont-normal.woff') format('woff'),  /* A reference for each separate file format */
       url('/resource/name-of-static-resource/examplefont-normal.ttf')  format('truetype'), /* A reference for each separate file format */
  font-weight: bold; /* Specifying these font files as the bold weight */
  font-style: normal;
}
/* A font-face rule for the italic style */
@font-face {
  font-family: 'Example Font';
  src: url('/resource/name-of-static-resource/examplefont-italic.eot'); /* For compatibility with IE9 */
       url('/resource/name-of-static-resource/examplefont-italic.woff') format('woff'),  /* A reference for each separate file format */
       url('/resource/name-of-static-resource/examplefont-italic.ttf')  format('truetype'), /* A reference for each separate file format */
  font-weight: normal;
  font-style: italic;  /* Specifying these font files as the italic style */
}

Several important things to note from the above rules:

  • The font-family attribute for all of the font rules is the same name, since they are different parts of the same typeface within Skuid.
  • There are three font-face rules for the three separate weights/styles
  • Each font-face rule links to the multiple file formats for that rule, sometimes written in a different way for browser compatibility.
  • The weight and style details of the font files are specified within each rule.
  • The resource URL is based on the name of the static resource that will contain the font files.

Warning

Pay close attention to your CSS rules, particularly the resource URLs.

Zip the files

Warning

Before zipping the files, ensure that the CSS file is in the top directory and not within a sub-folder.

On Windows

  1. Select all fonts files and the CSS file in the folder.

    Note

    To select multiple files use the Shift or Control key.

  2. Right click and select Send to > Compressed (Zipped) folder.

On macOS

  1. Select all fonts files and the CSS file in the folder.

    Note

    To select multiple files use the Shift or Command key.

  2. Right click and select Compress (Number) items.

A zip file containing the font files and CSS file will appear within the directory. While the name of the zip file is not important in Skuid SFX, consider naming the archive the same name as the static resource to avoid confusion.

Upload the zip file

Upload the file as a static resource in your Salesforce org. Ensure that the Name of the resource matches the name-of-static-resource area within the CSS file’s resource URLs.

Add the font to the theme

  1. In the Theme Composer, click CSS.
  2. Click Add More beneath the Resources section.
  3. Fill out the attributes for the font’s static resource:
    • Type: Static Resource
    • Resource Name: Enter the Name of the static resource.
    • Namespace: Leave blank unless the static resource specifically has namespace.
    • File Path: Enter the filename of the CSS file within the zip file. E.g. examplefont.css.
  4. From the sidebar, click Web Fonts.
  5. Click Add More beneath the Custom section.
  6. Enter the attributes for the font:
    • Font Name: Enter the value of the font-family attribute of the CSS file.
  7. Click fa-check Save.

Use the custom font

The custom font will now be available anywhere fonts may be selected:

  • The font will appear under the Web Fonts header with the name assigned to it within the font-family and Font Name attributes.
  • The font will also be selectable within the Rich Text component in the Composer if the Skuid page is set to the appropriate theme. There it will also be listed with the name assigned to it within the font-family and Font Name attributes.