Font choice disappeared from customization!

  • belleweatherfarm · Member ·

    Can anyone tell me why the font Fertigo Pro has disappeared as a choice for body text? I am using Motif on another blog, and the choice was there… now I have switched to Motif on this blog and the choice is NOT there, and I notice it is no longer a choice on my other blog even though it remains for now in my body text.

    Is there a way I can CSS it into my blog?

    The blog I need help with is: (visible only to logged in users)

  • designsimply · Member ·

    Fertigo Pro is currently setup only to appear as a heading text because that’s the best readability choice for that font—in the past is was an option for the body text, but it was updated at some point. The reason it is available on one of your blogs and not the other is probably because it was selected on the first blog before the change was made to the font settings.

    Is there a way I can CSS it into my blog?

    There is! But in order to do it, you must have selected a custom font for both Headings and Body Text in Appearance > Customize > Fonts and “Fertigo Pro” must be selected as the Headings font, otherwise it won’t load on the front end. Once the settings are in place, you could add the following CSS to the Appearance > Customize > CSS editor to change over the body text to match the headings:

    .wf-active body,
.wf-active button,
.wf-active input,
.wf-active select,
.wf-active textarea {
	font-family: fertigo-pro-1,fertigo-pro-2,"Droid Serif",Georgia,serif;
}
  • belleweatherfarm · Member ·

    Yes (humbly), it’s working, and thanks for carrying me through my moment of panic. My husband did remind me today that the world is not hinging on the choice of my font, LOL :).

    And my learning curve is improving, when I put in the CSS, it said Georgia, and up popped Georgia. But I saw it that had actually changed, so I fooled with variations until I got Fertigo Pro!

  • designsimply · Member ·

    Wise words from the husband. :)

  • belleweatherfarm · Member ·

    Is there a way to make the quality of the font a bit heavier (not bold)? The font on my Little Puppet Studio blog is “fatter”, and fills space differently. It is the original font that was once an option in the customization fonts. In The Shepherd’s Child, the font is thinner and “leggier”, not really as attractive even though it’s the same font.

  • designsimply · Member ·

    I compared the body text on Little Puppet Studio to the body text on http://theshepherdschild.wordpress.com/ and I can’t tell the difference. Make sure you are looking the live site and not the preview, because in the preview screen the font selected in the Appearance > Customize > Fonts is taking over (just in the preview though, you should look at the front end because of how you’ve setup your custom CSS).

  • belleweatherfarm · Member ·

    I will look on another computer and see how it reads. I am not comparing when I am in preview, in preview, the body text actually isn’t even my chosen font! What I notice is that the “kerning” in the body text is closer together, and the actual letter lines are a bit thinner, as if having written with a thinner pencil lead. What really brought it to my attention was the opposite effect in the site title/tag and Post title. Both look exactly like Puppet Studio when IN preview, and when I hit the save/close buttons, it then reverts to the thinner letters, but more widely spaced. I tried just making that part one number larger in the customization panel, the title/tag do feel a bit heavier but feel to me to be sprawling spaciously across the top because of the larger spaces between the letters. The body text is the opposite feeling, crowded (and making me understand why fertigo pro was considered less readable). It’s very strange, because in Little Puppet, I just LOVE the spacing and letter thickness.

  • designsimply · Member ·

    in preview, the body text actually isn’t even my chosen font

    This might be because of how you are overriding the custom fonts choice in the Appearance > Customize > Fonts panel using custom CSS.

    What I notice is that the “kerning” in the body text is closer together, and the actual letter lines are a bit thinner, as if having written with a thinner pencil lead.

    I really looked for this but didn’t see a difference in the kerning for paragraphs in the main content areas.

    What really brought it to my attention was the opposite effect in the site title/tag and Post title. Both look exactly like Puppet Studio when IN preview, and when I hit the save/close buttons, it then reverts to the thinner letters, but more widely spaced.

    Let’s make sure we are seeing the same thing. I just tested http://theshepherdschild.wordpress.com/ using Safari 7.0.3 on a Mac and here is what I see: https://cloudup.com/c0EHHWHSrlC

    Are you seeing something different compared to my screenshot?

    I tried just making that part one number larger in the customization panel, the title/tag do feel a bit heavier but feel to me to be sprawling spaciously across the top because of the larger spaces between the letters.

    This kind of thing can indeed be adjusted with CSS, but first I think we should make sure we are both on the same page seeing the same thing.

    When talking about the text, I can see that you are very, very detail oriented! I can help look at it, but let’s use very specific examples. In your last reply, you mentioned the site title/tag and Post title. So, for example, do you mean the green tittle text “What is handwork?” on the http://theshepherdschild.wordpress.com/ home page?

  • belleweatherfarm · Member ·

    :) I guess I am detail oriented, my fellow artisans call it aesthetic OCD. Too bad my attention to detail does not extend to my housekeeping, LOL!

    So, I looked at your screenshot, it does look like what I’m seeing. In order to really notice the thing that’s bugging me, it helps to compare places where the same words exist on Little Puppet Studio’s front page and Shep Child front page. I opened both, and looked at two specific words in the paragraph text. Both are words that appear at the start of a sentence in the text, the word “The”, and the word “Every”. If you look at the capitalized letters side by side, you can really see that they are different. The up and down lines are different weights. The difference in the “h” in the word “The” also is obvious.

    On Little Puppet, the paragraph text feels stout and solid. On Shep Child, it feels flowery and twiggy. It is subtle, but it actually makes a big difference in the aspect. I can accept it even though I prefer the “stout” look, but now I’m thoroughly curious as to what has made the difference. If I can figure it out and change it, I will.

    I did figure out how to play in the CSS and make the Shep Child paragraph text bold, but that’s too heavy. I could not figure out how to get the letters to a weight in between bold and what they are now.

    Thanks for being willing to look at it :) :)

  • belleweatherfarm · Member ·

    The other place where it is very noticeable is on the top green Menu bar on both sites, the word HOME. Very different.

  • designsimply · Member ·

    Thanks for including some specific examples. Looking at “HOME” in the main menu was what helped me see what you’re referring to. I only saw it more clearly after I made a screenshot of from each site and compared them next to each other: https://cloudup.com/cMHKeRCAW6L

    I also didn’t see the difference at all until I tried a different browser. In Chrome, the “HOME” text on one looks exactly the same as the other. In Safari, they looked slightly different (the screenshot above was taken with Safari 7.0.3). I’m not sure why there’s a browser difference. Browsers are quirky sometimes. :)

    With regard to the live preview, weights for custom fonts in the live preview screen may indeed be different from the front end. This is because more variations of a font are loaded in the live preview for the tools there, but when viewing on the front end, only the final font choices selected in the Appearance > Customize > Fonts panel are loaded. This is done to help reduce page load and make sites load faster. Most people won’t notice the difference. In your case since you are trying to go back to an old setting (Fertigo Pro as a body text font) which is no longer avail., that’s why you’re running into differences in those views. Most people who use the font settings normally in Appearance > Customize > Fonts won’t notice any difference.

    I do think you’re on the right track by trying to make the font bold, but try to see if you can make it a weight of 400 instead of using the “bold” keyword. If you do this on http://theshepherdschild.wordpress.com/ you should also adjust the spacing between menu items because making the font a weight of 400 made the menu items fall to two lines in my testing. Here is an example you can try out:

    .main-navigation li {
	font-weight: 400;
	padding-right: 1.9em;
}

    As for the body text, I tried to compare the same text in each website by copying and pasting some text from one into the browser in the other (I did this only using browser tools locally and not by actually changing the content in the site). Here is a comparison between the two that I see in Safari: https://cloudup.com/cRH-AuhAV1R

    I can see a small difference, but it’s so subtle. One thing I did noticed that you have manually changed the font color for paragraphs on the home page of http://theshepherdschild.wordpress.com/ to be a #333333 color and not black like the other site. Other than that, I don’t see a way to change the font any more and I think you might have the best possible solution once you’ve updated to make the text color match exactly.

  • thesacredpath · Member ·

    You know, they both look virtually identical to me in Firefox, but looking at the CSS and the HTML, I see that on the front page of Shep Child a color of #333333 has been applied from within the editor, whereas in Puppet there is no color assigned in the editor, so it is using the default theme body text color of #404040. The difference in color is ever so slight, but it might be what is making things look off to you.

    I checked both in Safari as well, and they look very close, except for the almost unnoticeable color difference.

    I would suggest opening Shepherd’s front page and switching over to the HTML tab and take our all the span color stuff (and ending span tags) and them compare things so you have apples to apples.

  • belleweatherfarm · Member ·

    You must be an artist, LOL, to have the eye and patience to fuss with this alongside me!!

    I can’t wait to get home tonight and try it all out. I am making the executive decision to accept whatever the outcome is at that point and to “let it go” and get back to finishing content so I can return to wool!!!

    Thanks for your attentive and terrific help :) I’ll let you know what happens.

  • thesacredpath · Member ·

    You know, what would be easier for a test would be to add this to puppets CSS and turn the body text to #333333. (Working seven years with an incredibly gifted graphic designer probably helped hone my eyes for detail.) 

    body, button, input, select, textarea {
    color: #404040;
}
  • belleweatherfarm · Member ·

    Sacred Path, I just changed the color last night, fooling around with it to see if the color change would shift the appearance slightly. Before that, the two sites were the same color, and I was grappling with the font weights. I’ll do what you say and see what happens.

    You must all think I’m nuts :) . A disclaimer- I was a sign painter many years ago (pre-computer sign printing), and was paid to spend LONG hours fussing with handpainted lettering, so the weight of letter strokes is really under my radar. No one else in the world would’ve noticed what I’m noticing, or even cared, for that matter :) It has been a learning curve to accept pre-made anything, especially fonts! Thank the stars that wool work is so much more forgiving….

  • thesacredpath · Member ·

    Looking through the CSS, I see no differences in anything, and the font stacks are virtually identical. On one, the final font is serif and on the other sans-serif, but those are the last resort font that will be used and it is unlikely to ever get that far down the stack.

    Wool work is far more fuzzy that graphic thingies. :)

  • The topic ‘Font choice disappeared from customization!’ is closed to new replies.