When creating your Blog, you may want to use a custom font beyond the standard ones available. Follow these steps to learn how to customize the font in your blog.
Navigation
Default Custom Fonts
- Navigate to Sites on the left > Blogs at the top > Select the blog site you would like to edit.
- When you are updating a blog or creating a new one click on the font drop-down menu, select Custom Fonts
- A pop-up menu will appear that allows you to select a custom font where you can also choose previously selected fonts.
- Select the font
- Save
CSS font set up for Blogs
Please Note: You may need to contact a developer for assistance if you don’t have the expertise. We also don’t provide custom fonts code.
- The most reliable way to include an unavailable font in your blog with code is to use @font-face. Below is an example of this in action:
- When you are within the blog you would click on the Insert Custom Code symbol, paste the code into the box, and select Insert Code
If you have zoomed in the builder this is how the UI will show the options:
<style> @font-face { font-family: ‘Festive’, cursive; src: url(‘https://fonts.googleapis.com/c…‘) }
* { font-family: ‘Festive’, cursive; }
</style>
Please Note: When working with Outlook, you must wrap this @font-face in a @media tag. This is because Outlook 2007, 2010, and 2017 don’t support them.
Please Note: If you want to use the custom font in the blog you can also copy the custom font code and make a custom value for it and use the custom value.
FAQ’s
1. How do I save a custom font after selecting it?
- Answer: After selecting your custom font from the pop-up menu, simply click Save to apply the changes to your blog. This will ensure your chosen custom font is used.
2. Can I reuse a custom font I’ve set up in another part of my blog?
- Answer: Yes, you can reuse a custom font by creating a custom value for the font code. Once set up, this custom value can be applied wherever needed within your blog, providing consistency in font styling.
3. What is the @font-face CSS rule, and why is it used?
- Answer: The @font-face CSS rule allows you to load custom fonts on a webpage, even if they are not available on the user’s device. It specifies the font-family name and the URL of the font file, enabling the use of custom fonts in your blog.
4. How can I ensure my custom font works across all devices and browsers?
- Answer: To ensure compatibility across devices and browsers, use widely supported font formats and include a @media tag when necessary, especially for email clients like Outlook. Testing on different browsers and devices can also help confirm that the font displays correctly.
5. Can I use multiple custom fonts in the same blog?
- Answer: Yes, you can use multiple custom fonts by adding multiple @font-face rules in your CSS and specifying different font-family names. Then, apply the appropriate font-family name to different parts of your blog as needed.
6. What should I do if the custom font does not appear after adding it?
- Answer: If the custom font does not appear, check the CSS code for any errors, ensure the font URL is correct, and verify that the font is supported by the browsers and devices you are using. Refreshing the page or clearing the cache can also help resolve display issues.