Adding Custom Fonts as Assets

Uploading the Font

To upload a font file:

1. Go to the assets section in your event dashboard and create a new asset
2. Select FILE as the asset type. Here you can click the upload box and find the font file on your computer, or dragging and dropping the file into the drag and drop uploader.
3. Once the file has uploaded, copy the asset URL
4. In your event's custom CSS, import the font you just uploaded using the asset URL and the CSS below.

Once you have uploaded the font file as an asset, you'll need to import it into the events custom CSS. You can use the overall event CSS if you want the font to be available across all of your web access domains, or you can import fonts into each individual web access domain as needed. 

Importing The Uploaded Font 

When importing a font using the @font-face rule, you can use a custom font file and break away from "web-safe" fonts. First you define a name for the font (e.g. MyFontName), and then point to the font file you uploaded. To learn more about importing custom fonts and the @font-face rule: https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

In this example we have uploaded a font called MyFontName as an asset via the dashboard. To make the font available, add this CSS rule to your overall event CSS or your web access domain custom CSS, and replace the highlighted yellow sections with your font name (no spaces) and your font asset URL:

@font-face {
   font-family: MyFontName;
   src: url("https://eventfinity-production-assets.s3.amazonaws.com/materials/743921/original/AndikaNewBasic-Regular.ttf");
}

Once the above has been entered, MyFontName becomes available as a font you can set in your custom CSS. To use the imported font (with a generic web safe fallback), you could do the following:

selector {
   font-family: MyFontName, sans-serif;
}

Font Fallbacks

Adding a font fall back is very important. The font fall back family types are utilized if the users device does not have the font you want to use / offers a fall back if the font file you imported did not load for whatever reason. 

Font fall backs include sans-serif, serif, monospace, and cursive. Learn more about font fallbacks and see what they look like here: https://www.w3schools.com/cssref/css_fonts_fallbacks.asp

The syntax for updating fonts is as follows:

selector {
    font-family: family-name|generic-family-fallback;
}

What that means: the first font name should be the font you want to use, the second should be a back up font, and finally the last should be a generic web-safe fall back family for devices that don't have the other fonts you have installed.

The ideal use case:

selector {
   font-family: MyFontName, Verdana, sans-serif;
}

With only the basic fall back:

selector {
   font-family: MyFontName, sans-serif;
}

With no fall back at all:

selector {
   font-family: MyFontName;
}