-
AuthorPosts
-
November 26, 2021 at 3:18 pm #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;}
November 27, 2021 at 8:36 pm #1330694Hey 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.
Best regards,
MikeNovember 29, 2021 at 3:46 pm #1330862Thank 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.
November 30, 2021 at 1:14 pm #1330990Hi,
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,
MikeDecember 3, 2021 at 4:43 am #1331387Thank 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.
December 3, 2021 at 2:02 pm #1331458Hi,
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; }
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.
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,
MikeDecember 5, 2021 at 11:03 pm #1331637Thank you all, you can close this one !!!
December 5, 2021 at 11:20 pm #1331642Hi,
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 -
AuthorPosts
- The topic ‘animation numbers bold’ is closed to new replies.