Jump to content


Photo
- - - - -

Still Having CSS Issue with H Tags & Font Definitions


  • Please log in to reply
27 replies to this topic

#1 WebWerx

WebWerx

    Advocate

  • Members
  • 546 posts
  • LocationCanada
  • Framework Version:2.2
  • Country: Country Flag

Posted 09 May 2012 - 03:25 PM

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:

Please Login or Register to see this Hidden Content

@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.

#2 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 09 May 2012 - 04:06 PM

To assign different font families to different "h" tags you'll need to use CSS like this:

Please Login or Register to see this Hidden Content


For further reference on font custzomiation, please refer to this documentation:

Please Login or Register to see this Hidden Content



#3 WebWerx

WebWerx

    Advocate

  • Members
  • 546 posts
  • LocationCanada
  • Framework Version:2.2
  • Country: Country Flag

Posted 09 May 2012 - 04:37 PM

Hi @catrina! Ya that is what I have been trying.... No luck. Here is what I have in my custom.css ( See Stylesheet here:

Please Login or Register to see this Hidden Content

). Look at this test page and you will see that the font is not rendering:

Please Login or Register to see this Hidden Content

/*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?

#4 WebWerx

WebWerx

    Advocate

  • Members
  • 546 posts
  • LocationCanada
  • Framework Version:2.2
  • Country: Country Flag

Posted 09 May 2012 - 06:34 PM

@catrina: If it helps any, here is the dynamic css that is currently being generated by PL.

Please Login or Register to see this Hidden Content

I am going to "be quite" now.... :-O

#5 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 10 May 2012 - 02:12 AM

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

#6 WebWerx

WebWerx

    Advocate

  • Members
  • 546 posts
  • LocationCanada
  • Framework Version:2.2
  • Country: Country Flag

Posted 10 May 2012 - 10:16 AM

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. :-)

#7 Henry Perkins

Henry Perkins

    Friendly Contributor

  • Members

  • 198 posts
  • LocationAustin, TX
  • Country: Country Flag

Posted 10 May 2012 - 09:03 PM

@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.

#8 WebWerx

WebWerx

    Advocate

  • Members
  • 546 posts
  • LocationCanada
  • Framework Version:2.2
  • Country: Country Flag

Posted 10 May 2012 - 09:06 PM

@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.

#9 WebWerx

WebWerx

    Advocate

  • Members
  • 546 posts
  • LocationCanada
  • Framework Version:2.2
  • Country: Country Flag

Posted 10 May 2012 - 09:21 PM

@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!

#10 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 10 May 2012 - 09:23 PM

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.

#11 Henry Perkins

Henry Perkins

    Friendly Contributor

  • Members

  • 198 posts
  • LocationAustin, TX
  • Country: Country Flag

Posted 10 May 2012 - 09:28 PM

Okay, try this solution.

Go to

Please Login or Register to see this Hidden Content

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:

Please Login or Register to see this Hidden Content


Then, in your custom CSS you will add:

Please Login or Register to see this Hidden Content

Cursive is optional of course.

#12 WebWerx

WebWerx

    Advocate

  • Members
  • 546 posts
  • LocationCanada
  • Framework Version:2.2
  • Country: Country Flag

Posted 10 May 2012 - 09:37 PM

@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...... :-(

#13 WebWerx

WebWerx

    Advocate

  • Members
  • 546 posts
  • LocationCanada
  • Framework Version:2.2
  • Country: Country Flag

Posted 10 May 2012 - 09:46 PM

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....

#14 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 10 May 2012 - 10:14 PM

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.

#15 Henry Perkins

Henry Perkins

    Friendly Contributor

  • Members

  • 198 posts
  • LocationAustin, TX
  • Country: Country Flag

Posted 11 May 2012 - 11:43 AM

Okay, here's your solution Mr. :]

In plugins/pagelines-customize/functions.php add the following code:

Please Login or Register to see this Hidden Content


Then, in your plugins/pagelines-customize/style.css, add this CSS:

Please Login or Register to see this Hidden Content



#16 Danny

Danny

    Is Awesome!

  • Moderators
  • 15269 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 11 May 2012 - 11:51 AM

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

#17 WebWerx

WebWerx

    Advocate

  • Members
  • 546 posts
  • LocationCanada
  • Framework Version:2.2
  • Country: Country Flag

Posted 11 May 2012 - 12:21 PM

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!

#18 Danny

Danny

    Is Awesome!

  • Moderators
  • 15269 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 11 May 2012 - 12:46 PM

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.

Please Login or Register to see this Hidden Content


Like so.... ?

#19 Henry Perkins

Henry Perkins

    Friendly Contributor

  • Members

  • 198 posts
  • LocationAustin, TX
  • Country: Country Flag

Posted 11 May 2012 - 01:29 PM

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

#20 WebWerx

WebWerx

    Advocate

  • Members
  • 546 posts
  • LocationCanada
  • Framework Version:2.2
  • Country: Country Flag

Posted 11 May 2012 - 01:45 PM

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 :

Please Login or Register to see this Hidden Content

. 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:

Please Login or Register to see this Hidden Content

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!