Quick Answer
How do you add a custom font to a BizStackPro blog?
Open Sites → Blogs, select your blog, open the font controls, and choose Custom Fonts. Select or enter the font, then click Save.
When the font is not available in the built-in picker, you can load
it manually with an @font-face rule or another valid
font import method inside the blog’s custom code area.
Understanding Custom Fonts in BizStackPro Blogs
Typography plays an important role in how a blog looks, feels, and communicates its brand. Using the same fonts across your website and blog helps create a more consistent visitor experience.
BizStackPro provides built-in font controls for commonly available fonts. When a specific font is not available through the editor, custom CSS can be used to load and apply it.
Custom fonts must be configured carefully. Incorrect font URLs, invalid CSS, or unsupported file formats can prevent the font from loading and cause the browser to display a fallback font instead.
Use a fallback font
Always include a standard fallback font in your CSS so the page remains readable if the custom font cannot be loaded.
Custom Fonts at a Glance
Before You Begin
Prepare the font information and decide where it should be applied before editing the blog.
- Confirm the font is licensed for website use.
- Decide whether the font will be used for headings, body text, or both.
- Gather the font name and hosted font URL when using custom CSS.
- Choose a readable fallback font.
- Back up any existing custom code before making changes.
- Plan to test the font on desktop and mobile devices.
Step 1: Use the Built-In Custom Font Picker
Start with the built-in font controls before adding custom CSS.
Open Sites
Log in to BizStackPro and select Sites from the main navigation.
Open Blogs
Select Blogs and open the blog you want to customize.
Open the Font Controls
Select the text or design area you want to change, then open the font dropdown.
Select Custom Fonts
Choose Custom Fonts from the available font options.
Choose and Save the Font
Select or enter the font in the pop-up window, then click Save to apply the change.
Step 2: Load a Custom Font with CSS
If the font you want is not available through the built-in font picker, you can load it using custom CSS.
Open Custom Code
Navigate to the blog's custom code area where CSS can be added to your design.
Add the Font Import
Load your font using a supported method such as
@font-face or an approved hosted font service.
Assign the Font
Apply the font family to the desired page elements including headings, paragraphs, buttons, or navigation items.
Save Your Changes
Save the custom code and refresh the page to verify the font displays correctly.
Keep your CSS organized
Store custom font rules together with descriptive comments so they are easier to update later.
Step 3: Using Multiple Custom Fonts
Many websites use more than one font to improve readability and visual hierarchy.
Headings
Use a distinctive font for headings to create stronger visual impact.
Body Text
Choose a clean, readable font for longer paragraphs and articles.
Buttons
Apply fonts consistently across buttons and calls to action so branding remains cohesive.
Navigation
Use fonts that remain readable across desktop and mobile navigation menus.
Troubleshooting Custom Fonts
Font Best Practices
Frequently Asked Questions
How do I save a custom font after selecting it?
Can I reuse a custom font elsewhere in my blog?
What is the @font-face rule used for?
@font-face rule loads fonts that are not
installed on a visitor's device, allowing consistent typography
across supported browsers.
Can I use multiple custom fonts?
What should I do if the font doesn't appear?
Continue Learning
Continue improving your BizStackPro blog with these related Help Center guides.
