Adding your own fonts

Adding custom fonts involves the following steps:

1. Uploading your font files
2. Activating theme overrides
3. Downloading your theme files
4. Adding the font CSS
5. Adding a font style to FontStyles.cfg
6. Uploading your modified theme files
7. Rebuilding your theme

These steps are described in detail below.

Uploading your font files

When you obtained your font from your font provider, you were provided with one or more font files. These files might be stored within a zip file.

So that you can access your font from the content editor, you need to upload your font files to your Wild Apricot account. To do so, follow these steps:

1. If your font files are stored in a zip file, unzip the file to a location on your computer or network.
2. In your Wild Apricot account, go to the Website module and click the Files option.
3. On the Files screen, create a new folder under your Resources folder and call it Fonts. 
4. Inside the Fonts folder, create another folder and call it the name of your font.
5. Upload your font files to the folder you created under the Fonts folder. 
6. Right click over the name of the font subfolder and copy the relative path portion of the URL, beginning with resources.  Save this text for use later in these instructions.

Downloading the theme override files

To activate theme overrides and download your theme files, follow these steps:

1. Within the Website module, click the Theme overrides option.
2. From the Theme overrides screen, click the Activate theme overrides button (unless theme overrides have already been activated).
   
3. Click the link to download the theme files.
   You can download the theme files (stored in a zip file) to any location you choose.
4. Take note of the theme version number included in the zip file name (e.g. kaleidoscope_muskoka.v3.0.zip = Version 3.0).
5. Unzip the theme files to a location of your choice on your computer or network.

Adding the font CSS

Your font provider should have provided you with a file containing CSS code for your font. If your font provider did not provide you with CSS code for your font, click here for generic CSS code that you can customize for your font. 

To add the font CSS to your site, follow these steps:

1. Within your unzipped theme files, open the following file within a text editor, depending on which theme version you are using:
   Version 1.0 – /Styles/theme.css
   Version 2.0 – /Styles/include/globals.less
   Version 3.0 – /Gadgets/shared.typography.less
2. Copy the CSS code provided to you by your font provider. 
3. Paste the CSS code at the bottom of the file you just opened.
4. Within the font-family statement, edit each of the url statements and replace the existing path with the relative path of the fonts subfolder that you copied earlier. For example, the following statement:
   {font-family: 'Futura-Boo';src: url('webfonts/372C70_0_0.eot')
   would end up looking like:
   {font-family: 'Futura-Boo';src: url('/resources/Fonts/Futura-Boo/372C70_0_0.eot')
   if your fonts are stored in a folder called Futura-Boo under the Fonts folder.
5. Save your changes to the file.

Adding your own custom CSS

If your font provider did not provide you with a file containing CSS code for your font, you can customize and use the following CSS code:

@font-face {
font-family: 'Futura-Boo';
src: url('/resources/Fonts/Futura-Boo/372C70_0_0.woff2') format('woff2'),
url('/resources/Fonts/Futura-Boo/372C70_0_0.woff') format('woff'),
url('/resources/Fonts/Futura-Boo/372C70_0_0.ttf') format('truetype');
}

You'll need to make the following customizations before pasting the code as described in the preceding section.

You'll also need to remove any url declarations for font formats that you don't have. For example, if you don't have the TrueType format, you need to remove the final url declaration.

Adding a font style to FontStyles.cfg

You now need to add a font style so that your font appears as an option on the content editor. To add a font style for your font, follow these steps:

1. Within the root folder of your unzipped theme files, open the FontStyles.cfg file using any text editor.
2. Insert the line following line:

   <Style Name="Futura-Boo" Font="Futura-Boo" />

   and replace Futura-Boo with the name of your font. If you're not sure of the font name, check the font-family value within the CSS provided by your font provider. 
3. Save the changes to the FontStyles.cfg file.

Uploading your modified theme files

Now that you're finished modifying your theme files, you need to upload the modified files to your Wild Apricot account. To do so, follow these steps:

1. Go to the File management screen in Wild Apricot.
2. Expand the Theme_Overrides folder and click the folder that corresponds to the name of your theme.
3. Upload the modified FontStyles.cfg file to this folder. 
4. Expand the folder that corresponds to the name of your theme and open one of the following subfolders, depending on which theme version you are using:
   Version 1.0 – /Styles
   Version 2.0 – /Styles/include
   Version 3.0 – /Gadgets
5. Uploaded the modified CSS file – theme.css, globals.less, or shared.typography.less – to this folder.

Rebuilding your theme

Now that you've uploaded your modified theme files to your account, you need to rebuild your theme. To do so, follow these steps:

1. Within the Website module, click the Theme overrides option.
2. From the Theme overrides screen, click the Rebuild theme button.

The font family you added should now appear within the font menu on the content editor toolbar.

You may need to log off and back on again to view the new option.