• 0

Still Having CSS Issue with H Tags & Font Definitions

Question

Posted · Report post

Hi Guys, It seems that once one accepts and answer there is no going back. I had started this thread a ways back and was hoping for more tutelage: http://www.pagelines.com/forum/discussion/19234/h1-h2-h3-font-assignment#Item_7. @simple_mama: I'd really appreciate your expertise. After all is said and done, I need to use multiple fonts on my PL site. And as we all know, PL only allows for the assignment on one font family for "H" tags. I need to use multiple font families. So I think my answer is to assign all font families I will be using in custom.css and not worry about what is set in the PL backend. That being true, how do I assign the overall font families that will be used? Thanks for any & all input.

Share this post


Link to post
Share on other sites

27 answers to this question

  • 0

Posted · Report post

To assign different font families to different "h" tags you'll need to use CSS like this: [code]h1 {font-family: YOURFONT;} h2 {font-family: YOURFONT;} h3 {font-family: YOURFONT;}[/code] For further reference on font custzomiation, please refer to this documentation: http://w3schools.com/css/css_font.asp

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi @catrina! Ya that is what I have been trying.... No luck. Here is what I have in my custom.css ( See Stylesheet here: http://goo.gl/hMnbb ). Look at this test page and you will see that the font is not rendering: http://goo.gl/fzvc7 /*H2 Font Definition*/ h2 { font-family: 'Alfa Slab One', sans-serif; color: #F0141E; font-weight: bold; font-size: 64px; } I think I did things correctly. But my head hurts from having looked at this so many times..... I have some custom CSS defined elsewhere that calls up the "Alfa Slab One" Google font. It only works when I set "Alfa Slab One" as a font in the PL Framework settings. Otherwise it does not work. This makes believe that I need to assign Alfa Slab One", and the other fonts I need at a higher level in the site's CSS (my original conundrum). Am I making sense?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

@catrina: If it helps any, here is the dynamic css that is currently being generated by PL. http://paste.pagelines.com/2o3 I am going to "be quite" now.... :-O

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Where are you putting the other code for Alfa Slab One? Are you putting it in Headerscripts?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi @catrina: That is my dilemma and the question I keep asking in his Forum. I don't know how to implement what I want to do. Have a read through my 2 forum posts. If I need to add code to the site's header scripts (which is what I think I need to do). How do I do that? To recap I need to enable fonts other then the ones assigned in the Pagelines settings. So if I have Helevetica assigned throughout the PL settings, how do I add Alfa Slab One, and 3 others? The site will utilize 6 font families. Where do I enable the ones that I cannot implement from within PagelLines? (the site Header Scripts?). Thank you Catrina. :-)

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

@WebWerx Please go to Pagelines > Store > Plugins > Top Free > GoogleFonts Click install and activate. That will give you an incredible amount of typography options to work with throughout your entire site. Once you've done that, there's no need to edit your header scripts. The fonts will be there to use. What areas of your page are you looking to customize to use fonts other than the 3 you can assign in PageLine's admin? Hope that helps.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

@hperkins: I am way beyond that Henry. My issue is that I need to implement more fonts then PL will allow for. Have a gander at my (ridiculously) long string of posts on this topic.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

@hperkins: Ha ha ha... stop it Henry..... @-) I know you guys are trying to help.... Re solutions: I need to understand how to get the extra fonts recognized. It's been a joyride for sure. And I am learning some new stuff. So no complaints!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

WebWerx, Henry's kinda new to this, as you once were. Okay, here's the issue with fonts in CSS, in my humble opinion. If the font isn't local on the visitor's computer, the browser will look for the font somewhere else. Not finding it, the browser defaults to the next option. So, let's say you specified Helvetica Nue, Arial, sans-serif in your CSS but it can't find Helvetica Nue. It's going to default to Arial. Not finding that it goes to Sans-Serif. I'm unsure if PL would prevent you from using multiple Google Fonts, but I don't know how to write the CSS for it. Essentially, as you can see from the CSS, all the H tags use the same, so theoretically, you should be able to individually designate them on separate lines in your custom code like, effectively like H1= Helvetica Nue, Arial, sans-serif H2=Times New Roman, Roman, serif and so on. In theory, if the site has the Google Fonts plugin, they should all be accessible, but if the spelling isn't exactly as used by Google, it's going to default to a local search. I'm no CSS expert (as you know), so I wouldn't know the right CSS to accomplish this but Henry's pretty good with that, so I'll ask him. Jenny's on vacation this week. Thanks for your patience.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Okay, try this solution. Go to http://www.google.com/webfonts and choose the fonts you want to use. You choose by entering the font name in the search box on the right, and the clicking "Add to Collection". Once you have added all the fonts you would like to use, click the "Use" button and the site will direct you to the code you need to insert into the header script to allow their usage. For instance, if you just wanted to add Alfa Slab One, the code you would insert will look like this: [code][/code] Then, in your custom CSS you will add: [code]h1, h2, h3 { font-family: 'Alfa Slab One', cursive; } [/code] Cursive is optional of course.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

@rangelone: Ya Henry is being way too nice to me. :-) For what it is worth, I pulled the dynamic CSS to see what was being written for the H tags. (posted somewhere along the way). So, in theory, it can be overwritten by custom.css... Dunno.... But why not? I agree with your font analysis (Doesn't this sound like the other post we have been commenting on?). Sort of. The issue here is that any references to a font via custom css will only work if that font set is determined in the PL settings (whether they are a Google font or not). I have proven it 5 different ways. I actually did some custom css where I defined Alfa Slab One for a particular area of the site. Define it in PL, the CSS works. Remove it from PL, and the font does not render. It goes to defaults..... If you think this through, one is then restricted by PL to using only the fonts that are defined in the PL settings. Ahhhh.... My conundrum.... 6 different assigned font families by my designer pal.... Re your (self deprecating) comment on your CSS skills. HA! You know more than most people forget. Or you have an awesome snippet repository === LOL Thanks fo r your help. I like dealing with you and your kitchen humour. And yes I know Jenny is away this week...... :-(

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Henry (@hperkins): I get the Google font stuff.... And know about the CSS. My issue is where (and how) to add the header script stuff (without breaking PL if there is a future update to the Framework):"". Would it be added with a hook in my custom functions.php? This will augment the PL Typography settings. I like it! We are almost there kids. Right @ rangealone (this solution will work for the other fellow too - I think). Thanks for bearing with me guys....

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Apologies, I wasn't clear. My fault. You can define a font to any you want, BUT, if the browser (not PageLines) can't find it, then it defaults. That's a browser issue. If you know a font location somewhere that's web accessible (like google fonts), then in theory, it's able to be used by all browsers, BUT, that's a browser call, not a PL call. PL would only provide the CSS to the browser to take action. So if you have a font on your computer and want it viewed, you'll see it but probably no one else, a problem that's plagued the Net for years. If you can provide a working URL to a font it should be visible but the reason the web has generally used system fonts such as Arial was to make it visible across platforms. Google Fonts was the first real successful effort to introduce hundreds of new fonts to the Web. At least with Google fonts, we're cooking with gas. Otherwise, we're stuck with toasted marshmallows.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Okay, here's your solution Mr. :] In plugins/pagelines-customize/functions.php add the following code: [code] // add_action ('hook_name','function name'); add_action('pagelines_header_before','add_googlefonts'); // function name function add_googlefonts(){ ?>

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi WebWerx, Let us know if Henry's solution worked out for you.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks Henry. I am using the Base theme. So I am assuming that I would add the code in its function.php. Correct? And should I assume that I can put in 5 or 6 font family references in that same set of code? Thanks Mr. @hperkins!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi WebWerx, Yes if you're using the Base child theme, then add Henry's code to the Base child themes function.php file and if I understand you correctly. Are you asking if you can add more than one font family to the code, if so then I think thats possible. [code]// add_action ('hook_name','function name'); add_action('pagelines_header_before','add_googlefonts'); // function name function add_googlefonts(){ ?>

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

No, that is inefficient. Choose a collection of fonts from GoogleFonts and they will give you the
  • Share this post


    Link to post
    Share on other sites
    • 0

    Posted · Report post

    Hi @hperkins (Henry): Well I implemented the code as requested. But it does not seem to have had any effect. Here is an example of where I added the "Alfa Slab One" font in my site's CSS : http://cl.ly/2d3h072G0t3d303C1i0x . As you can see the font is not rendering. All other selectors are working. I may have very well not implemented the code correctly as I am no PHP guru. But here is everything in my functions.php: http://paste.pagelines.com/8h8 I looked at my Page Source and can see no reference to the Google Fonts API. So I think my functions.php is off. I'll wait to hear back from you. We are close! I know it!

    Share this post


    Link to post
    Share on other sites
    • 0

    Posted · Report post

    I looked at your pastebin and noticed that you have this code inside a function in there: [code][/code] I usually add this code to the Header Scripts area in the Custom Code settings and the font works just fine. When I want to implement more than one font from Google Web Fonts, the code would be this, for example (different fonts separated by a single "|" mark): [code][/code]

    Share this post


    Link to post
    Share on other sites
    • 0

    Posted · Report post

    @catrina: Thanks. I like what you are saying... I never thought of putting it there: http://cl.ly/061r1d0H1q3q090C3u3t @hperkins: The young lady is right: http://cl.ly/3j1U0f3B0n291J0U0G10. I simple added reference to Alfa Slab One in the Google font API like so: http://cl.ly/3q3D3E2a271z3z0h2V1i @hperkins: I will remove the script from functions.php cc: @Danny & @rangealone (because these guys were involved also). PS Kicking myself for totally forgetting about the ability to add stuff to the Header Script in PL! PSS Thank you one and all!

    Share this post


    Link to post
    Share on other sites
    • 0

    Posted · Report post

    @catrina: One follow-up question. What if I want to add a font family that is not part of the Google font library? IE "Georgia" PS You rock! You do not know how long I have been looking for this answer... (You do if you read all of my posts on the topic)

    Share this post


    Link to post
    Share on other sites
    • 0

    Posted · Report post

    Is Georgia the font you want to use? Since Georgia is one of the many websafe fonts, you don't need to add it using any special technique. You can simply add it like this in CSS: [code].whateverselector {font-family: georgia;}[/code]

    Share this post


    Link to post
    Share on other sites
    • 0

    Posted · Report post

    Danke @catrina: I figured this out after the fact. Fonts are maddening....... until you understand the power of implementing them correctly. Yes, Georgia is one of them TGIF!

    Share this post


    Link to post
    Share on other sites
    • 0

    Posted · Report post

    My code will work unless you have something contradicting it somewhere. It is also saves you from having to redo things once you upgrade, and worrying about managing your settings in the admin at all. http://screencast.com/t/oaJWNiOTmGY

    Share this post


    Link to post
    Share on other sites

    Create an account or sign in to comment

    You need to be a member in order to leave a comment

    Create an account

    Sign up for a new account in our community. It's easy!


    Register a new account

    Sign in

    Already have an account? Sign in here.


    Sign In Now