How to Use a Custom Fonts in the ClientX Theme Print

The ClientX theme does not include a built-in option to change the website font or integrate custom Google Fonts. If you want to use a custom font such as Poppins or other, you can easily do so by adding custom CSS.

Steps to Apply a Custom Google Font

1. Log in to your server using FTP or cPanel.

2. Navigate to the following directory:

   whmcs_dir/templates/clientx-child/css/

3. Locate the overrides.css file.
   • If the file is named overrides.css_new, rename it to overrides.css.
4. Open the overrides.css file in your preferred text editor.
5. At the beginning of the file:
   • Add the Google Fonts import statement for Poppins.
   • Add CSS rules to apply the font to the desired elements, such as headings, paragraphs, inputs, buttons, spans, and other text elements.
6. Save the file and clear your browser and WHMCS template cache (if applicable) to view the changes.

Sample CSS

We have added a sample CSS code below that includes:

• The Google Fonts import statement for Poppins.
• Example CSS rules demonstrating how to apply the font throughout the ClientX theme.

You can modify these CSS rules to apply the font only to specific elements or across your entire website.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

html, body, p, span, a, div, label, strong, b, small, li, ul, ol, dl, dt, dd, blockquote, pre, code, input, textarea, select, button, option, table, thead, tbody, tfoot, tr, th, td, h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif !important;
}

* {
    font-family: 'Poppins', sans-serif;
}   

Note: Different fonts have different character widths, heights, and spacing. After changing the font family, you may need to adjust the font sizes, line heights, or spacing of certain elements to maintain the desired layout and appearance.