Google font set using css on custom code doesnt work, but works on elementor

This topic has 7 replies, 4 voices, and was last updated 8 months, 2 weeks ago ago by Andrew Mitchell

  • Avatar: Anas
    Anas
    Participant
    July 30, 2024 at 16:56

    Hi, I have a custom code on the shop loop section where it shows a customized pricing section. The font that is used on the custom css is “Barlow” but it doesnt work. on the developer tools it shows as the font has been used but not displayed. Whereas it works on default elementor sections. Please advise,

    thanks

    Please, contact administrator
    for this information.
    Files is visible for topic creator and
    support staff only.
    6 Answers
    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    July 31, 2024 at 08:34

    Hello, @Anas,

    Thank you for choosing XStore as your WooCommerce WordPress theme.

    To assist you more efficiently, could you please provide a screenshot where the font issue is occurring, along with the URL of the affected page? This information will help us understand the context better.

    Additionally, could you elaborate on your request or describe in detail your desired outcome? This will enable us to address your concerns more accurately.

    Thank you for your cooperation.

    Best regards,
    The 8Theme Team

    Avatar: Anas
    Anas
    Participant
    July 31, 2024 at 10:56

    Hi Tony,

    As i can see the font “Barlow” is already available as google font on the theme. I have no issues using it with any elementor features and sections. However when i use it with one of my custom code which is added as a woocommerce hook on the shop loop, it doesnt work. When inspected. the developer tools show that the CSS is applied but the font doesnt appear, it is replaced with some other font. I am sharing you the screenshot again. The pages are given on the pvt content area.

    Please contact administrator
    for this information.
    Files is visible for topic creator and
    support staff only.
    Avatar: Justin
    Luca Rossi
    Support staff
    July 31, 2024 at 15:52

    Hi @Anas,

    The Google fonts from Elementor will display on some specific pages only NOT globally.

    To make the barlow font work globally on your website, we’ve added this code snippet:

    
    add_action('wp_head', 'n2t_wp_head');
    function n2t_wp_head(){
    	echo '<link href="https://fonts.googleapis.com/css2?family=Barlow:wght@400;700&display=swap" rel="stylesheet">';
    }
    

    Now the Barlow font is working fine: https://prnt.sc/vuWI1V8Di0wO

    Could you please check?

    Thank you!

    Avatar: Anas
    Anas
    Participant
    July 31, 2024 at 16:43

    Thank you so much for the quick support

    Avatar: Justin
    Luca Rossi
    Support staff
    August 1, 2024 at 04:40

    Dear @Anas,

    In the spirit of gratitude, we want to express our appreciation for your trust in our products. As a valued customer, your experience matters greatly. Would you consider sharing it by giving our theme a deserving 5-star rating on ThemeForest?

    Click here to share your thoughts: https://themeforest.net/downloads

    Being part of our community means a lot, and your feedback contributes immensely.

    Best Regards,
    The 8Theme Team

    Avatar: Andrew Mitchell
    Andrew Mitchell
    Support staff
    August 31, 2024 at 04:04

    Dear Anas,

    We hope you’re reveling in the experience our theme brings! Your enthusiasm is what fuels our passion. Would you be so kind as to channel that energy into a 5-star rating on ThemeForest? Your feedback is the spark that lights our way!

    Click here to spread the love: https://themeforest.net/downloads

    Thank you for being an integral part of our journey!

    Best Regards,
    The 8Theme Team

  • Viewing 7 results - 1 through 7 (of 7 total)

The issue related to '‘Google font set using css on custom code doesnt work, but works on elementor’' has been successfully resolved, and the topic is now closed for further responses

Helpful Topics

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.