Using a custom font is a great way to enhance your website’s visual identity and align it with your brand’s style. OzSpeed’s Website Builder allows you to easily upload and use your own custom fonts, giving you complete control over your site’s typography. Here’s a step-by-step guide on how to upload and apply a custom font on your website.
Step 1: Access the Website Editor #
To start uploading a custom font, open the page editor in hPanel.
- Log in to hPanel at ozspeed.com.au.
- Go to Website Builder > Edit Site.
- Click on Website Settings in the top toolbar to access the Design Settings panel.
Tip: #
- Make sure you have the custom font file ready (recommended formats: TTF, OTF, or WOFF).
Step 2: Open the Typography Settings #
The Typography Settings panel allows you to manage fonts for your entire website.
How to Access Typography Settings: #
- Click on Design Settings > Typography.
- You’ll see options for changing the font family, size, and style.
Tip: #
- Have a backup font choice (e.g., Arial, Helvetica) in case the custom font fails to load for some users.
Step 3: Upload Your Custom Font #
You can now upload the custom font file to your website.
How to Upload a Custom Font: #
- Click on Upload Custom Font in the Typography Settings panel.
- Click Choose File and select the font file from your computer (supported formats: .ttf, .otf, .woff).
- Enter the Font Name (e.g., “MyCustomFont”).
- Click Upload to add the font to your website.
Tip: #
- Use WOFF format for better web compatibility and performance.
Step 4: Apply the Custom Font to Your Text #
After uploading, you can apply the custom font to specific text blocks or across your entire website.
How to Apply the Custom Font: #
- Click on a Text Block to open the Design Settings panel.
- Go to the Typography tab and click on the Font Family dropdown menu.
- Select your uploaded custom font from the list.
- Click Apply to save the changes.
Tip: #
- Use the custom font for headings and key elements to make them stand out, while using a standard font for body text for better readability.
Step 5: Set the Custom Font as a Global Font (Optional) #
If you want to use the custom font site-wide, set it as the global font.
How to Set a Global Font: #
- In the Typography Settings, go to the Global Font Settings section.
- Choose your custom font as the Default Heading Font and/or Default Body Font.
- Click Apply.
Tip: #
- Setting a global font ensures consistency across your website.
Step 6: Preview and Test the Custom Font #
Before publishing, preview your website to ensure the custom font displays correctly.
How to Preview: #
- Click Preview in the top toolbar.
- Check the font on both desktop and mobile views.
- Verify that the font loads properly on different pages.
Tip: #
- Use an incognito window or clear your browser cache to see the changes as a new visitor would.
Step 7: Publish Your Changes #
Once you’re satisfied with the custom font, publish your updates to make it live.
How to Publish: #
- Click Publish in the top right corner of the editor.
- Confirm your changes to go live.
Tip: #
- Share the update on social media or in your newsletter to showcase your new typography style.
Troubleshooting Tips #
- Custom Font Not Displaying Correctly:
- Ensure the font file format is correct (TTF, OTF, or WOFF).
- Clear your website cache in hPanel and your browser cache.
- Font Size or Style Issues:
- Check the Typography Settings to ensure the correct size and style are applied.
- Use the responsive design settings to adjust the font size for different devices.
- Slow Website Performance:
- Use a compressed version of the font file (WOFF) for faster loading.
- Limit the use of multiple custom fonts to reduce the impact on page load time.
Additional Tips: #
- Use Web-Safe Fonts as Fallbacks: Specify a fallback font (e.g., Arial, Helvetica) in case the custom font fails to load.
- Optimize the Font File: Compress the font file using tools like Font Squirrel to improve loading speed.
- Test Across Devices: Ensure the custom font looks good on both desktop and mobile devices for a consistent experience.
