Hosting Custom Font Files with WeSupply

1. Introduction

This article explains how to host and use custom font files within WeSupply to achieve a fully branded experience across your tracking pages, return portals, and email notifications. By uploading your own fonts, you can maintain a consistent visual identity across all customer touchpoints without relying solely on system or web-safe fonts.

2. Pre-requisites

Before hosting a custom font in WeSupply, make sure that:

• You have admin access to your WeSupply account.
• You have the appropriate font licensing rights to use and distribute the file.
• Your font files are in one of the supported formats: .woff, .woff2, .ttf, or .otf.
• You have access to the Branding → Configuration section in your WeSupply Admin Panel.

3. Step-by-Step Instructions

1. Prepare Your Font Files: Ensure that your fonts are saved in .WOFF format is widely supported across web browsers and platforms for optimal compatibility and performance.
2. Zip Your Font Files: Place your font files into a ZIP file. This makes it easier to manage and send multiple files at once without the risk of losing any data.
3. Send Us the Font Files: Once your ZIP file is ready, send it to us. You can upload the file directly through a support ticket or send it via email, as directed by our customer support team.
4. We Upload Your Fonts: Our development team will handle the upload process after receiving your font files. We will ensure that your fonts are securely hosted on our servers.
5. Integration into Your Platform: Once uploaded, we will provide you with the source URLs for your fonts. You can then incorporate these URLs into the Global CSS of your WeSupply platform to apply your custom fonts across your site.

Example CSS:

@font-face {
  font-family: 'YourCustomFont';
  src: url('https://[youraccount].labs.wesupply.xyz/fonts/YourCustomFont.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}
body {
  font-family: 'YourCustomFont', sans-serif;
}
(screenshot placeholder: Example of CSS customization applied to a tracking page)

4. Examples / Best Practices

• Use web-optimized formats: .woff2 is preferred for best performance and browser compatibility.
• Keep file names simple: Avoid spaces or special characters in your font file names.
• Test across browsers: Ensure your font renders correctly on Chrome, Safari, and Firefox.
• Apply selectively: Use custom fonts only where necessary (e.g., headings or titles) to maintain fast load times.

(screenshot placeholder: Example of consistent typography across branded tracking pages)

5. Troubleshooting / FAQ

Q: My font isn’t displaying correctly. What should I check?
A: Verify that your CSS references the correct hosted font URL and that your browser’s cache has been cleared.

Q: Can I use Google Fonts instead of uploading files?
A: Yes. You can reference Google Fonts using their embed URLs within your Global Custom CSS if preferred.

Q: Is there a size limit for uploaded fonts?
A: While there’s no strict limit, it’s recommended to keep font files under 2MB for optimal performance.

Q: Can I upload multiple font weights or styles?
A: Yes. You can upload separate files for different weights (e.g., bold, italic) and declare each in your CSS using font-weight and font-style.

In summary: Hosting custom font files in WeSupply allows you to fully align your tracking, return, and notification pages with your brand identity. By uploading and referencing your fonts directly in CSS, you can deliver a polished, consistent, and professional customer experience.