17 replies to this topic

[ruthtoledoaltschuler]

Hello and thank you in advance for your support.

I want to change the font for the Reader title on this page:

Please Login or Register to see this Hidden Content

In this site I am using a special font that is working fine on the:

Please Login or Register to see this Hidden Content

and on

Please Login or Register to see this Hidden Content

.

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

[catrina]

Try this CSS:

Please Login or Register to see this Hidden Content

[ruthtoledoaltschuler]

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

[ruthtoledoaltschuler]

Not solved yet!!

This is the page:

Please Login or Register to see this Hidden Content

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

Please Login or Register to see this Hidden Content

and in the

Please Login or Register to see this Hidden Content

for all the more up to date browsers, I think it is still not working.
I appreciate your support.

Thank you,

Ruth

[Rob]

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.

[ruthtoledoaltschuler]

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:

Please Login or Register to see this Hidden Content

The burgundy font on these other boxes:

Please Login or Register to see this Hidden Content

The only place in the site that it will not display it is in the Reader cover or title:

Please Login or Register to see this Hidden Content

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

[catrina]

Try this:

Please Login or Register to see this Hidden Content

[ruthtoledoaltschuler]

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!

[catrina]

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

[ruthtoledoaltschuler]

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

[Danny]

Hi,

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

for exmaple:

Please Login or Register to see this Hidden Content

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 -

Please Login or Register to see this Hidden Content

[ruthtoledoaltschuler]

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

Please Login or Register to see this Hidden Content

displays it, and it also shows in

Please Login or Register to see this Hidden Content

.

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?

Please Login or Register to see this Hidden Content

Thank you for your help!!
Ruth

[catrina]

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

[ruthtoledoaltschuler]

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:

Please Login or Register to see this Hidden Content

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

[catrina]

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

Please Login or Register to see this Hidden Content

[ruthtoledoaltschuler]

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

[catrina]

No problem!

[ruthtoledoaltschuler]

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="

Please Login or Register to see this Hidden Content

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

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