Archived

This topic is now archived and is closed to further replies.

  • 0

Reader for FAQ font customization issue

Question

Posted · Report post

Hello and thank you in advance for your support. I want to change the font for the Reader title on this page: http://www.sandraepstein.com/services/one-to-one-coaching-services/ In this site I am using a special font that is working fine on the: Home Boxes and on this page. For the reader change of font I added this to the custom code window: .readerdefault h2 { font-size: 3em; font-family: Bonaventure; color: #964259; line-height: 70px; } I can see the new font in Safari, but not in Firefox or Chrome. I have also tested with Browser labs and no other browser displays it. Can you help me with this? Thank you!!

Share this post


Link to post
Share on other sites

17 answers to this question

Posted · Report post

Catrina, the font is already working in two other pages. It is showing in most browsers. I have checked it in Adobe Browser labs and it is fine. In the Pagelines custom code page, below, in the box of Header scripts, I have pasted the license and the path to the CSS for the font, and the font package (with the font file) is in my public_html folder in the server. So everything seems to be right for the other two pages where we use it. This font does work for this site, no doubt about it. It is in the page where I am using Pagelines Reader, and tried to get this font to show on the title, that it does not display. Except for me, in my computer, because I have it installed. This is what is happening. Thank you for trying to follow up on this. Ruth

Share this post


Link to post
Share on other sites

Posted · Report post

Hi, In order to use a custom font, you need to use the @font-face CSS rule. for exmaple:

@font-face {
	font-family: font name goes here;
	src: The URL to the font goes here;
	}

Therefore, if you wish to use the Bonaventure font. You will need to upload it to either your website or some public file hosting service and then get the URL for the uploaded font file and then add it to the src above. Then apply the font-family: Bonaventure, serif; to your readers CSS. For more information, read this page here - http://www.font-face.com/

Share this post


Link to post
Share on other sites

Posted · Report post

Thank you, Danny, for your input. The font file is installed in the root folder of the site. It is a MyFonts.com web font package. It is working fine in two pages: The Home page displays it, and it also shows in this page. The only place I cannot get it to work is in the Reader. In the Pagelines Typography page I have the license and the path to the font folder in the Headerscript code box. And in Custom CSS it is assigned to Pagelines Boxes titles as shown in the Home, and this works. Should I also place this code in my custom CSS page? Is this where it should go?

@font-face {font-family: 'Bonaventure';src: url('webfonts/23ACB5_0_0.eot');src: url('webfonts/23ACB5_0_0.eot?#iefix') format('embedded-opentype'),url('webfonts/23ACB5_0_0.woff') format('woff'),url('webfonts/23ACB5_0_0.ttf') format('truetype');}
	 

Thank you for your help!! Ruth

Share this post


Link to post
Share on other sites

Posted · Report post

Try to put that code in the custom CSS section and see if there is any effect. I don't know what could be causing it to not work in specifically the Reader :.

Share this post


Link to post
Share on other sites

Posted · Report post

I placed the code above in the custom CSS. ...Still not working in the Reader only... The code I have in the Pagelines Headerscripts Code window is License... followed by:

-->
	
	

The folder with the font files is @ www.sandraepstein.com/webfonts It has the font files but not the file: MyFontsWebfontsKit.css Where should this file be placed? Maybe this is a key, I don't know. It is puzzling, because it works in the other two pages... We will keep investigating it. In the meantime I would like to thank all Pagelines developers and support team for such a great work. It is absolutely amazing what can be accomplished as a result. Where is the best place to write a review? Thanks

Share this post


Link to post
Share on other sites

Posted · Report post

I'm starting to think it's not an issue with the font or anything associated with it, but with the Reader. There is nothing wrong with the CSS, either. The best place I can think of for leaving reviews would be on the store (if you need to leave a review for a specific product): http://pagelines.com/store

Share this post


Link to post
Share on other sites

Posted · Report post

Thank you, Catrina. I will explore more and keep you posted. Thank your for your support. Ruth

Share this post


Link to post
Share on other sites

Posted · Report post

No problem!

Share this post


Link to post
Share on other sites

Posted · Report post

Try this CSS:

li#reader-1 li.readerdefault.readeranswer h2 {
	font-size: 3em;
	font-family: Bonaventure;
	color: #964259;
	line-height: 70px;
	}

Share this post


Link to post
Share on other sites

Posted · Report post

Bingo, Catrina, it worked. But only by leaving both the lines of code I had added initially plus yours. Is that correct? Thank you!!

Share this post


Link to post
Share on other sites

Posted · Report post

Not solved yet!! This is the page: http://www.sandraepstein.com/services/one-to-one-coaching-services/ In my computer the Bonaventure font seems to work, but I have the font installed. When I go into Adobe Browser labs, I now see the change in color and spacing, but the Bonaventure font does not appear! Since it does appear in the Home boxes and in the Services page for all the more up to date browsers, I think it is still not working. I appreciate your support. Thank you, Ruth

Share this post


Link to post
Share on other sites

Posted · Report post

Ruth, Unfortunately, browsers pick up local fonts only. Even Google Fonts work locally because on call, the browser pulls the Google Font and loads it into the viewer's computer. If someone doesn't have the Bonaventure font and there's no system to load it locally, then based on their browser, they will likely not see it properly or at all. Because you have it, you can see it without difficulty. I'd suggest using the Google Fonts plugin we provide, free, but selecting a similar font.

Share this post


Link to post
Share on other sites

Posted · Report post

Hello, Thanks, but the font file is embedded in the site. All browsers do display it, according to what I see at Adobe Lab Browser, in two other pages of the same site: The burgundy font on the boxes: http://www.sandraepstein.com/ The burgundy font on these other boxes: http://www.sandraepstein.com/services/ The only place in the site that it will not display it is in the Reader cover or title: http://www.sandraepstein.com/services/one-to-one-coaching-services/ The code I have used: .readerdefault h2 { font-size: 3em; font-family: Bonaventure; color: #964259; line-height: 70px; } li#reader-1 li.readerdefault.readeranswer h2 { font-size: 3em; font-family: Bonaventure; color: #964259; line-height: 70px; } Any further hints? Thank you, Ruth

Share this post


Link to post
Share on other sites

Posted · Report post

The issue was finally solved with the help of a Pro, who wrote a more precise insertion of the code for the special font embedded in the site.

<link rel="stylesheet" type="text/css" href="http://www.sandraepstein.com/MyFontsWebfontsKit.css">

<link rel="stylesheet" type="text/css" href="../MyFontsWebfontsKit.css">

It is now working fine. Thank you all for the suggestions.

Share this post


Link to post
Share on other sites

Posted · Report post

Try this:

ul#answerlist ul.readeranswer.styled-list li#reader-1 li.readerdefault.readeranswer h2 {
	font-size: 3em;
	font-family: Bonaventure;
	color: #964259;
	line-height: 70px;}

Share this post


Link to post
Share on other sites

Posted · Report post

Thank you, Catrina, but this also did not work. Unfortunately, this seems to be a tricky issue. Any other ideas?? And please tell me if I should leave the other code or not. If I should substitute everything for the new code, so I know I am doing it right. Right now, with just the new one you sent me above, nothing happened. Then I put back the previous, and I see the changes in my computer (where I have the font) but not in others, even thou, the site has the font embedded in it. Thanks for trying to help!

Share this post


Link to post
Share on other sites

Posted · Report post

You're only seeing the change on your machine? What plugin or other are you using to embed the font?

Share this post


Link to post
Share on other sites