Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • January 30, 2021 at 10:30 am #1276492
    DeMamp

    Hey there,

    I’m trying to change the font on my single product page. This is my custom CSS code:

    .entry-summary .woocommerce-product-rating .woocommerce-review-link {
    position: relative;
    font-size: 16px;
font-family: 'Roboto', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 400;
}

    The CSS code works great because if I change the font-family to let’s say Bebas Neue, the font does change on my page.

    However, if I choose Roboto the code automatically skips it and goes straight to Helvetica or Arial or “sans serif”.

    I checked everywhere on the Internet to see if maybe I’m not using the right line, but I don’t see where my code is wrong…

    Thank you!

    February 1, 2021 at 4:09 am #1276662
    Rikard

    Hey DeMamp,

    Please try the following in Quick CSS under Enfold->General Styling, before the CSS which is calling the font:

    @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

    Best regards,
    Rikard

    February 1, 2021 at 11:25 am #1276749
    DeMamp

    Thank you for your reply!

    Unfortunately, it didn’t work. I put the code at the very top of the Quick CSS box and this is what’s showing when I detect the font: https://prnt.sc/xypxtc

    The thing is that I can use Roboto if I go to General Styling and choose it as my main font. It just doesn’t work when I just want a specific text to display Roboto.

    February 2, 2021 at 5:50 am #1276999
    Nikko

    Hi DeMamp,

    Please post us your login credentials (in the “private data” field), so we can take a look at your backend.

    1. Install and activate ” Temporary Login Without Password “.
    2. Go to ” Users > Temporary Logins ” on the left-side menu.
    3. Click ” Create New “.
    4. Add the email address for the account ( you can use (Email address hidden if logged out) ), as well as the ” Role ” making that the highest possible and the expiry about four days
      ( to be sure that we have enough time to debug ).
    5. Click ” Submit “.
    6. You’ll now have a temporary account. Please provide us here in the private section the URL, so we can login and help you out.

    When your issue is fixed, you can always remove the plugin!
    If you prefer to not use the plugin, you can manually create an admin user and post the login credentials in the “private data” field.

    Best regards,
    Nikko

    February 8, 2021 at 9:01 pm #1278823
    DeMamp

    Hello,

    February 10, 2021 at 12:16 pm #1279386
    Victoria

    Hi DeMamp,

    The login link did not work. If the font is not used for any element on the page from the theme options, the font is not loaded or you’re trying to use the font-weight that is not available with the theme.

    Please update the token.

    Best regards,
    Victoria

    February 10, 2021 at 2:41 pm #1279473
    DeMamp

    Sorry, it should be working right now!

    If the font is not used for any element on the page from the theme options, the font is not loaded or you’re trying to use the font-weight that is not available with the theme.

    The theme options allow for 2 fonts only. Does that mean that the entire website can only display 2 different fonts and not 3?

    Thanks a lot

    February 10, 2021 at 3:28 pm #1279499
    Victoria

    Hi DeMamp,

    Well, yes and bo, in the advanced tab you can set some elements to have a different font too.

    Roboto is not loading on that page so it needs to be loaded explicitly.

    Best regards,
    Victoria

    February 10, 2021 at 5:51 pm #1279565
    DeMamp

    Okay thank you. I thought the Google fonts were all already “loaded” since we are able to use them very easily in Enfold.

    I’m not a developer in any way so I’m not sure how to load specific fonts. From what I’ve read on Google I have to import the font using @font-face? or @import? And then specify the page I want the font to appear on?

    Would something like that work:

    .page-id-xxxx
@import url('https://fonts.googleapis.com/css2?family=Roboto');
font-family: 'Roboto', sans-serif;

    Thank you so much

    February 14, 2021 at 9:39 pm #1280440
    Mike

    Hi,
    Sorry for the very late reply, in the Enfold theme the Roboto font is actually written as roboto, for example, if you want to only have this one product woocommerce tabs have this font, please try this css:

    #top.single-product #wrap_all #product-1008 .woocommerce-tabs p {
    font-family: 'roboto' !important;
}

    if you want the whole product part of the page to have this font, try:

    #top.single-product #wrap_all #product-1008 * {
    font-family: 'roboto' !important;
}

    If this don’t seem to work please ensure your cache is cleared and try placing in the WordPress > Customize > Additional CSS field, it has the highest priority.

    Best regards,
    Mike

    • This reply was modified 3 years, 10 months ago by Mike. Reason: removed image
    February 20, 2021 at 2:57 pm #1282476
    DeMamp
    This reply has been marked as private.
    February 21, 2021 at 5:50 pm #1282616
    Mike

    Hi,
    Sorry about that, I’ll be more careful. I also removed it from the server.
    Unless there is anything else we can assist with on this issue, shall we close this then?

    Best regards,
    Mike

    February 22, 2021 at 2:18 am #1282694
    DeMamp

    Hi Mike,

    No need to be sorry! Everything is fine, we can close this thread.

    Thank you again

    February 22, 2021 at 3:54 am #1282704
    Jordan Shannon

    Hi,

    If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Roboto font not working’ is closed to new replies.