Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1330607

    Team, I am using animation numbers and I am trying to make it BOLD. I added the font-weight on the general styling as attached but it not applying. Could be that the bold is not imported ? thanks !

    .avia-animated-number span.avia-single-number {
    font-family: ‘Montserrat’;
    font-size: 55px;
    font-weight: 800;

    }

    Web: http://c2350005.ferozo.com/

    #1330694

    Hey aruizhuidobro,
    Thank you for the link to your site and the login, the Montserrat 800 is actually Montserrat-ExtraBold and not included by default, so I added it for you via the Enfold Theme Options ▸ Import/Export ▸ Custom Font Manager
    and adjusted your css to:

    .avia-animated-number span.avia-single-number {
    font-family: 'Montserrat-ExtraBold';
        font-size: 55px; 
       font-weight: 800;
    }
    

    and now it is working, please clear your browser cache and check.
    2021-11-27_013.jpg

    Best regards,
    Mike

    #1330862

    Thank you Mike. it is working perfect. One more comment before you close. If you see this page, the “+” or “%” are not taking the same color. Is there a way to fix it ?

    • This reply was modified 2 years, 11 months ago by aruizhuidobro.
    #1330990

    Hi,
    Glad that helped, the plus & percentage signs are using opacity 0.5 so they look faded, to make them the same as the numbers try this css:

    #top .avia-no-number {
        opacity: 1;
    }

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    #1331387

    Thank you Mike. it is working perfect that part. Last question. We finally got the ExtraBold… how can I get a simple bold ? I tried all the different options… :(

    font-family: ‘Montserrat-ExtraBold’;

    • This reply was modified 2 years, 11 months ago by aruizhuidobro.
    #1331458

    Hi,
    Glad this helped, for simple bold you would use ‘montserrat’ with a font-weight of bold or 700, please note that in the theme the font is writen in small case:

    #top #wrap_all .main_color h3 {
        font-family: 'montserrat';
        font-weight: bold;
    }

    2021-12-03_001.jpg
    but this is the regular font with bold applied, there is another ‘montserrat-bold’ that is available from Google Fonts that is wider without using a font-weight.
    2021-12-03_002.jpg
    I assumed you might be looking for this one so I uploaded it to your Enfold Theme Options ▸ Import/Export ▸ Custom Font Manager as before and you can use css like:

    #top #wrap_all .main_color h3 {
        font-family: 'montserrat-bold';
    }

    Then clear your browser cache and any cache plugin, and check.

    Please note that I see you are trying to change your heading fonts with css by only using the heading, such as h3 {font-size: 24px; font-family: ‘Montserrat’}
    I found this in your Quick CSS:

    h1 {font-size: 50px}
    h2 {font-size: 48px; font-family: 'Playfair Display'; color: #00469e;}
    h3 {font-size: 24px; font-family: 'Montserrat'}
    h4 {font-size: 20px; font-family: 'Montserrat'}
    h5 {font-size: 14px; font-family: 'Montserrat'; color: #164991}
    h6 {font-size: 12px; font-family: 'Montserrat'}

    this will probably not be enough in some cases because the theme uses two IDs and a class for most headings, like this: #top #wrap_all .main_color h3 so the specificity is much higher, if you find you are having trouble overwriting a style try adding more specificity

    Best regards,
    Mike

    #1331637

    Thank you all, you can close this one !!!

    #1331642

    Hi,
    Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘animation numbers bold’ is closed to new replies.