Home/ Questions/Q 2802
In Process
itlaboni
  • 0
Enlightened
Asked: 2025-01-15T14:52:23+00:00 In:

Custom Fonts Not Loading in Journal Theme

  • 0

Journal Theme allows users to upload custom fonts to match their brand’s design. However, at times, custom fonts don’t load properly, appear broken, or revert to default fonts. This issue is often due to incorrect font file paths, unsupported font formats, or missing configuration in the theme settings.

custom fonts not displaying in journal themefont file format issuesfonts reverting to default stylesuploaded fonts not working in journal theme
Share

You must login to add an answer.

Need An Account,

2 Answers

  1. Enlightened

    To fix custom fonts not loading in the Journal Theme, follow these steps:

    1. Verify Font File Format
      • Ensure your font file is in a supported format like .woff, .woff2, .ttf, or .otf.
      • Convert your font file  .woff if it’s not supported using online tools like Font Squirrel.
    2. Upload Font Files Correctly
      • Go to Admin > Journal > Theme Editor > Fonts.
      • Upload your custom font file under the “Custom Fonts” section.
      • Assign it a name and ensure the file uploads without errors.
    3. Assign Fonts to Elements
      • Navigate to Journal > Theme Editor > Typography.
      • Assign your custom font to specific elements like headings, body text, and buttons.
    4. Update CSS
      • If the custom font doesn’t load, add a manual @font-face rule in the Custom CSS section:
        CSS
        Copy code
        @font-face {
        font-family: 'MyCustomFont';
        src: url('catalog/view/theme/yourtheme/fonts/mycustomfont.woff2') format('woff2'),
        url('catalog/view/theme/yourtheme/fonts/mycustomfont.woff') format('woff');
        font-weight: normal;
        font-style: normal;
        }

        body {
        font-family: 'MyCustomFont', sans-serif;
        }

    5. Clear Cache
      • Clear the theme and SASS cache under Admin > Dashboard > Developer Settings.
      • Refresh your browser or use incognito mode to view changes.
    6. Ensure HTTPS
      • If your site uses HTTPS, ensure your font files are also being served over HTTPS. Mixed content (HTTP and HTTPS) can cause font loading issues.
    7. Check for Browser Console Errors
      • Open your browser’s developer console (F12) and look for errors related to fonts.
      • Fix incorrect paths or permissions issues based on the error messages.

    Final Comment

    We hope these steps help you resolve custom font issues in your Journal Theme! If the problem persists, reach out to your hosting provider or the Journal Theme support team for further assistance. Thanks for reading! 😊

    • 0