How to Change the Font in the Articifer Template – A Comprehensive Guide

This guide explains how to change fonts in the Articifer template for Boonex, whether for the entire template, specific elements, or individual page blocks using the admin panel.

1. Identify the CSS Class and Font Using Google Chrome Developer Tools

Before modifying any CSS file, you need to find the exact class or element that controls the font.

Step 1: Open Developer Tools (Inspect Element)

1. Open your website in Google Chrome.
2. Right-click on the text whose font you want to change.
3. Select "Inspect" (or press F12 to open Developer Tools).

Step 2: Find the Font Information

1. The Elements tab will show the HTML structure of the page.
2. Look for the Styles panel (on the right side).
3. Scroll through the CSS rules until you find the font-family property.
4. The class name or ID associated with the font will be displayed next to the CSS rule (e.g., .site-title, .menu-item, body).

2. Modify the CSS in the Articifer Template

Once you have identified the correct class, update the CSS file inside the template’s directory.

Step 1: Locate the Articifer CSS File

The main CSS file is in:

📂 modules/boonex/artificer/template/css/main.css

Step 2: Apply the Font Change

Open main.css and add the following at the end of the file:

/* Apply a new font to the entire template */ body { font-family: 'YourFontName', sans-serif !important; /* Replace with your font */ } /* Apply a new font to a specific class */ .site-title, .menu-item { font-family: 'YourFontName', sans-serif !important; } 

✅ Use !important to ensure the new font overrides existing Tailwind styles.

3. Change the Font for a Specific Page Block (Using Admin Panel)

If you only want to apply a custom font to a specific block, you don’t need to modify the CSS file. Instead, you can inject CSS directly into a page block using the Boonex Admin Panel.

Step 1: Access the Page Builder

1. Log in to your Boonex Admin Panel.
2. Navigate to "Pages" → "Builder".
3. Select the page where you want to modify the font.

Step 2: Inject Custom CSS in a Page Block

1. Add a new HTML block to the page.
2. Insert the following code inside the block:

<style> .custom-page-block { font-family: 'YourFontName', sans-serif !important; font-size: 20px; color: #4A90E2; } style> <div class="custom-page-block"> Your text here with the new font. div> 

✅ This method applies the font only to this block without affecting the entire template.

4. Using Google Fonts (Optional)

If you want to use a Google Font, include it in the template’s HTML file.

Step 1: Add Google Fonts to the Template Header

Edit the main layout file:

📂 modules/boonex/artificer/template/page_1.html

Insert this inside the section:

<link href="https://fonts.googleapis.com/css2?family=YourFontName&display=swap" rel="stylesheet"> 

Step 2: Apply the Font in CSS

After adding the link, apply the font in main.css:

body { font-family: 'YourFontName', sans-serif !important; } 

5. Clearing Cache & Testing Changes

If the new font does not appear, follow these steps:

✅ Clear your browser cache (Ctrl + Shift + R or Cmd + Shift + R on Mac).

✅ Disable any caching plugins in the Boonex Admin Panel.

✅ Check CSS conflicts in Google Chrome Developer Tools (if another rule is overriding your font).

Conclusion

• If you want to change the font globally, modify main.css.
• If you want to change the font for a specific element, target its CSS class.
• If you want to change the font for a single page block, inject custom CSS using the Boonex Page Builder.

By following these steps, you can successfully change the font in the Articifer template while ensuring your styles override Tailwind CSS properly. If you give me a more concrete example of what type of font and which template and which version I could be more specific.

Fantastic info Thankyou

I forgot to specify that in order to accurately identify the css file in the broswer it is important to disable cache in yoursite.com/studio/settings.php cache