Tagged: font weight, Fonts, google fonts, styling
-
AuthorPosts
-
November 14, 2018 at 4:55 pm #1033561
Hi, I’m having an issue with font weight not being applied correctly to my headings (H1, H2). I went into Enfold > Advanced Styling and set H1 and H2 tags to have font-weight of 900. (I want my headings to be very bold and prominent). Font family is set to “Raleway,” which I know supports multiple weights. However, as you can see here, font weight looks nothing like 900. If I use a visual inspector in Chrome and inspect H1 and H2, it tells me that
font-weight: 900;
but visually the headings don’t look that way. I’m not sure what’s overwriting this property and where to look for it.November 15, 2018 at 8:37 am #1033825Hey erin-s,
I checked all the font-weights in the browser and they seem to be working. It doesn’t look all that different compared to here either: https://fonts.google.com/specimen/Raleway
Best regards,
RikardNovember 19, 2018 at 6:22 am #1035032Hi Rikard, please see attached. If you compare Ralewey in 900 font weight on Google Fonts (top) and on my site (bottom), the fonts looks very different. I set the headings on my site to 900 font-weight, but they looks “semi-bold” at best. I need them to look like “black.” I’m not sure how to address this issue on my site.
November 21, 2018 at 12:02 am #1035855Hi,
Are you loading the Raleway 900 also because I do not see it at the source to be loading properly.
Best regards,
BasilisNovember 21, 2018 at 2:22 pm #1036060This reply has been marked as private.November 23, 2018 at 4:24 pm #1036985Hi Rob,
Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look?
Best regards,
VictoriaNovember 24, 2018 at 12:15 am #1037145Hi Victoria, thank you for your help! Please see login credentials in the box below.
November 27, 2018 at 11:48 am #1037962Hi Victoria,
I have added the admin login details in the box below. If you need anything else, please let me know.
Best,
Rob
December 2, 2018 at 1:05 pm #1039909Hi erin-s,
I’m very sorry for the late reply, what happens if you import the 900 weight in your CSS in Quick CSS for instance?
@import url('https://fonts.googleapis.com/css?family=Raleway:900');
You could also try to download it from Google Fonts, then upload to the theme under Enfold->Import/Export.
Best regards,
RikardDecember 2, 2018 at 1:08 pm #1039910Hi Rob,
Sorry again for the late replies, could you try what I recommended to erin-s to see if you have any luck with it as well?
@import url('https://fonts.googleapis.com/css?family=Montserrat:900');
Best regards,
RikardAugust 12, 2019 at 4:06 am #1126701Hey guys, did you have any luck with these, because I appear to be having the same issue?
I have tried to add the quick CSS.
Many thanks.August 12, 2019 at 7:14 pm #1126920Hi wmeida,
Could you please give us a link to your website, we need more context to be able to help you.
Best regards,
VictoriaAugust 13, 2019 at 7:39 pm #1127384Hi all,
I’ve been seeing the same thing. All was fine as of this spring but after one or two theme updates, we lost all the weight styles. We’ve installed the montserrat font through the theme options as well as applied to the header styles within the advanced styling options but nothing has changed. What’s odd is that on some pages the font weight comes through but on 90% of the areas where font weight within special headers is applied, it’s rendering as “normal” even though when using the browser inspector tool (firefox, chrome and safari, it shows that the font weight is right. Just visually it’s normal. Very odd.
Thanks
-EAugust 13, 2019 at 7:50 pm #1127396Ok, figured it out. Something must have changed with either how google manages their web fonts or how the Enfold theme does. Either way, I downloaded the font zip files from Google Fonts, uploaded them to through the import/export options within Enfold, hit save, and all my fonts are rendering with the correct font weight throughout the site. May want to inform users that whatever changes google and or Enfold made, some may need to reinstall the web font kits via Enfold’s font import settings.
August 14, 2019 at 10:55 am #1127555Hi Eric,
Great, I’m glad that you got things working and thanks for sharing the solution, it’s much appreciated :-)
Best regards,
RikardAugust 30, 2019 at 3:37 am #1132146I’ve noticed the same issue. I also had an issue with the font showing up as Italics when I did the font import. I think I have it fixed now, but there are clearly some glitches with Google Fonts and Enfold right now.
September 1, 2019 at 6:36 am #1132635May 4, 2020 at 12:38 pm #1209507Hi! This are not glitches. By default Enfolds loads only a few weights (e.g. 400 and 600). When you want to add additional weights, see this post: https://kriesi.at/support/topic/how-adjust-script-that-loads-google-fonts-to-load-subsets-with-different-weights/
May 5, 2020 at 6:14 am #1209798August 31, 2021 at 7:58 pm #1319232I am having a similar issue with Work Sans. I want to use the 200 and the 300 but I seem to only be getting the 100 and the 400. I uploaded the Google font for the 200 and the 300. I also tried the 2 additions to the CSS detailed in this thread:
@import url(‘https://fonts.googleapis.com/css2?family=Work+Sans:wght@300&display=swap’);
add_filter( ‘avf_google_heading_font’, ‘avia_add_content_font’);
add_filter( ‘avf_google_content_font’, ‘avia_add_content_font’);
function avia_add_content_font($fonts)
{
$fonts[‘Work Sans’] = ‘Open Sans:200,300, 400’;
$fonts[‘Work Sans’] = ‘Open Sans:200,300, 400’;
return $fonts;
}Right now I have selected Work Sans as the heading and body font in General Styling and used Advanced Styling to select the 300 version but I am getting the 100.
Thanks in advance for the guidance.
September 2, 2021 at 12:20 pm #1319486Hi tiffanytnttobol,
Please open a new thread and include WordPress admin login details in private, so that we can have a closer look at your site.
Best regards,
Rikard -
AuthorPosts
- You must be logged in to reply to this topic.