#toc { background-color: rgba(187, 222, 251, .6); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; margin-bottom: 20px; width: 320px; }
Using theme overrides, you can add your own fonts to the content editor. The additional fonts will not be available when editing an email or from the Colors and styles screen.Adding custom fonts involves the following steps:Uploading your font filesActivating theme overridesDownloading your theme filesAdding the font CSSAdding a font style to FontStyles.cfgUploading your modified theme filesRebuilding your themeThese steps are described in detail below.Uploading your font filesWhen 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:If your font files are stored in a zip file, unzip the file to a location on your computer or network.In your Wild Apricot account, go to the Website module and click the Files option.On the Files screen, create a new folder under your Resources folder and call it Fonts. Inside the Fonts folder, create another folder and call it the name of your font.Upload your font files to the folder you created under the Fonts folder. 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 filesTo activate theme overrides and download your theme files, follow these steps:Within the Website module, click the Theme overrides option.From the Theme overrides screen, click the Activate theme overrides button (unless theme overrides have already been activated).Click the link to download the theme files. You can download the theme files (stored in a zip file) to any location you choose.Take note of the theme version number included in the zip file name (e.g. kaleidoscope_muskoka.v3.0.zip = Version 3.0).Unzip the theme files to a location of your choice on your computer or network.Adding the font CSSYour 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: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.cssVersion 2.0 – /Styles/include/globals.lessVersion 3.0 – /Gadgets/shared.typography.lessCopy the CSS code provided to you by your font provider. Paste the CSS code at the bottom of the file you just opened.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.Save your changes to the file.Adding your own custom CSSIf 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.Replace...with...Futura-Boothe name of your font/resources/Fonts/Future-Boothe path of your font subfolder372C70_0_0.*the filename of your font fileYou'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.cfgYou 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:Within the root folder of your unzipped theme files, open the FontStyles.cfg file using any text editor.Insert the line following line: