Tagged: typography
-
AuthorPosts
-
November 23, 2014 at 3:16 am #356074
Well, before 4.0.1 everything was fine and dandy with my website http://twoheartsphotography.uk until 4.0.1 came around the corner and brutally raped it and left it bleeding on the floor.
I had, God knows how, set up Oswald font for ALL my headings, menus and pretty much any font besides paragraph at font weight 300. It looked great and now I have some fat ugly Jack Black looking font.
So my question is how to make ALL fonts except for paragraph be Oswald Light weight 300?
My second question is why theme like Enfold, so open to customisation and so options-rich, doesn’t have simple typography? No Google fonts, no font weight, custom fonts? Is it so complicated to make after making such an awesome theme to work with? Come on!- This topic was modified 9 years, 11 months ago by Chipsybg.
November 23, 2014 at 2:30 pm #356218Hi Chipsybg!
Thank you for using Enfold.
You can actually set the fonts on Enfold > General Styling > Fonts panel. As you can see most of the available fonts are from google. Aside from the general styling, you can also alter the look of specific elements like heading tags on Enfold > Advanced Styling panel. If you want to change the font weight, use the Quick CSS field.
Best regards,
IsmaelMarch 12, 2015 at 4:27 am #410274Can you please provide the code for altering the look of Oswald from the default (can’t tell for sure but it looks like the 700 weight) to a different weight (300 or 400)? I would also love to be able to apply that weight inline. I have a piece of text on a page that I would like to set to the 300 weight without affecting any other instances of that style. Here’s what I think it should be:
<h2 style="text-align: center; font-weight: 300;">Who likes business-friendly graphic design?</h2>
But it doesn’t appear to be working for me. Are all weights of Oswald available in Enfold?
Thanks so much.
March 12, 2015 at 4:57 pm #410575Hey!
No, please refer to this post and regirster new font weights – http://kriesi.at/documentation/enfold/register-additional-google-fonts-for-theme-options/
Regards,
YigitMarch 18, 2015 at 12:56 am #413316Thanks! I’m close. My child theme was one I made, and it didn’t have a functions.php already (all I used the child theme for was to preserve customizations to the CSS). I wasn’t sure how to create a custom functions.php for my child theme, and I wasn’t sure of the specific text to include for the Google fonts I wanted to use. I found functions.php is pretty basic…it just starts with an opening PHP argument. See below. And I used Inspect Element for the Google fonts I wanted to use to find out how they are referenced. This is what my functions.php looks like:
<?php /* custom PHP functions to allow all three weights of Oswald font in Enfold child theme */ add_filter( 'avf_google_heading_font', 'avia_add_heading_font'); function avia_add_heading_font($fonts) { $fonts['Oswald 300'] = 'Oswald:300'; $fonts['Oswald 400'] = 'Oswald:400'; $fonts['Oswald 700'] = 'Oswald:700'; return $fonts; } add_filter( 'avf_google_content_font', 'avia_add_content_font'); function avia_add_content_font($fonts) { $fonts['Oswald 300'] = 'Oswald:300'; $fonts['Oswald 400'] = 'Oswald:400'; $fonts['Oswald 700'] = 'Oswald:700'; return $fonts; }
So now I see Oswald 300, Oswald 400, and Oswald 700 in the list of available fonts. But I’m having trouble controlling where the weights show up. I added some custom settings in Advanced Style Options to make H2 display the 300 weight and H1 display the 700 weight, but it’s not working for me.
What am I missing? Do I need any more custom CSS?
March 18, 2015 at 6:03 pm #413837Hi!
It would be better to add the weights on one line like so.
$fonts['Oswald'] = 'Oswald:300,400,700';
And then add this to your custom CSS.
h2 { font-weight: 300 !important; } h1 { font-weight: 700 !important; }
Regards,
ElliottMarch 18, 2015 at 9:51 pm #414002That is what I needed. Thank you!
March 19, 2015 at 9:47 am #414229 -
AuthorPosts
- You must be logged in to reply to this topic.