Fonts

[Zdenka]

Just a suggestion…

I’m using the Easy Google font plugin as it looks very intuitive, user-friendly and with good support. However, some fonts (e.g. individual posts, lists, recent posts plus…) cannot be changed in the basic setting and require creating a custom font control (this can be easily done in the plugin settings). Somebody asked the same question on their support, and this was the answer:

…As you are new to web building I recommend that you contact the theme author to see if they can provide integration with our plugin so that other people using the theme could benefit too….

Would you be so kind and and provide some guidance.
Or, if you don’t like that, some other way to change at least the font size. I guess more people will ask you that, so maybe a tutorial would help?

[Sushil Adhikari]

What specifically is not changing with individual posts? You mentioned lists…so all lists don’t change? Is there something specific in the Recent Posts Plus that doesn’t change?

I can perhaps do a more generalized tutorial about fonts but I won’t be able to do it for specific elements in a theme because each theme is different.

[Zdenka]

For me it’s only the headings and the font in blog page that is changeable. However the basic paragraph font in individual posts is not affected by the Easy Google Fonts plugin. Neither are any list in posts. And the recents posts (made with the Recent Posts Plus plugin according to your tutorial) in the sidebar.

I may send you the website details by email,

[Sushil Adhikari]

I’m able to change the font styling on lists, the paragaphs, as well the recent posts plus.

This is where you have to get into the code to target specific elements if you need something different such as a font family or size, etc.

For example, unordered and ordered lists can be targeted in the theme’s content area by doing this:

.entry-content ol,
.entry-content ul {
    font-family: your font here;
   font-size: your size;
}

If you want to make “all” fonts bigger, then you need to target the HTML of your page instead of the in the page, because this theme has its font size managed from the tag with a default size of 100% and not the which does the font family.

html {
font-size: 100%;
}

The trick to all this is knowing how to look at code for something within your page and then make your changes via child theme style.css. What browser do you use?

[Zdenka]

Good morning

thank you very much for help. I did not see any change with the first code for lists. However the “html” code worked like a charm. I may do without special fonts (life is about compromises, isn’t it? 😉 ) if at least the text size is readable for most people.

I might combine the html with the font plugin (for font type) until you decide to make a tutorial.

I use Safari on Mac. Yes, there is the developer feature and the firebug lite extension. I may be able to identify the headings but I’d never understand from this that the theme has its font size managed from the tag not family. Also I’m not sure how put there a google font type in latin extended category.

UPDATE: to make things easier I’ll be happy with your fonts. Overall changing the size with html works great. Maybe some minor modification in colour and size for specific headings (as in post I get H1 smaller than H2) would be useful. But this might be easily done with a code and the font plugin would not be necessary.

[Zdenka]

May I add one more question here?
On my site there is absolutely no spacing between paragraphs and neither below the Date / By line just above post itself. I tried adding a code for p margin-bottom but it did not help. And in the demo the spacing is there so I guess no coding should be necessary.

[Sushil Adhikari]

Good morning? Not for me, as it is just past 10pm for me.
Testing for MAC on my end is difficult because I’m on Windows…at least until later this year when I finally will get a MAC. Fonts are different when on a MAC, so it can be a bit challenging.

Putting a font family on the tag acts as a global style for everything in the page until something further in the page with a container has an override added to it to use a different font.

As for no spacing on your paragraphs, this should not happen because the

tag has this as a margin found in the style.css line 624:

p {
   margin: 1.250em 0;
}

Actually, this should be using “rem” and not “em” but both are very similar. Correct on the demo site, it does have margins on the paragraphs. You may want to check any changes you might have done to the paragraph tag.

[Zdenka]

Thanks for your patience.

Yes, there seems to be a problem with paragraphs tags. Actually something must be going wrong on my side.
I have
instead of paragraphs 🙁 No matter what I do (remove br, update post, try to insert a paragraph in WYSIWYG) the
returns back.
Worse, when I try to create new post, lorem ipsum text, enter, lorem ipsum, enter…. I still get br, not p tag.

I know this is not your theme fault. But could you give me some advice how to convince my editor to behave properly so I can start using your theme fully?

As for the Date / By above the post… is this the “Post navigation”? I tried to remove that in the setting by nothing happened.

[Sushil Adhikari]

It sounds like some crazy things are happening with your current setup. Not sure why you are not getting Paragraphs, instead getting line breaks. Line breaks are normally created if you do SHIFT + ENTER and for paragraphs, it’s simply pressing the ENTER key (make sure you are in the Visual tab view of your editor.

In my opinion, the WordPress editor is one of the worse on the planet, so you may want to check out editor plugins and see which ones work best for you.

Post navigation is what you see at the bottom area of your “full post” which lets you go from post to post. There is no setting for the post information (often called Post meta info) below the title. If you need to hide that, you will have to do some custom css to display: none; on the following container:

.entry-meta {}

** A side note…. for topics like this one about paragraph tags and hiding post meta info, is best to start a new thread so that original topic about “Fonts” is kept related to the original thread topic :whistle:

[Zdenka]

Thank you so much for your note. I’d never thought the problem may be in the WP editor itself. Thanks to your remark, it took just a minute to google and correct it (disable plugins affecting the editor, switching to a WP native theme, clear cookies, switching back to Preferential).

I’ll take sometime to check the code of all posts as there are some old residues. Using just your fonts enlarge with html % code. I’ll then see how it looks like. And maybe there will be a tutorial about some font customization by that time 😉

ok, new thread for each topic. Understood.

UPDATE: the problem with p / br tags and other formatting in WP editor were caused by Preserved HTML Editor Markup plugin.

[Sushil Adhikari]

Just a quick follow up…. it’s odd the Preserved HTML editor markup plugin caused that. I’m not sure if you found the plugin details about what I am about to say here….but…. it’s a tricky plugin to setup at first, so you need to read the documentation carefully for that plugin. Even I missed this once, but when you activate the plugin, go to Settings >> Writing >> select posts and pages to use

and save the settings, but click the tab buttons “Fix Posts” and “Fix Pages”. So now your Enter key will do paragraphs.

Before you do this, as it states in Red on those settings, do a site backup. You should check out WordPress backup plugins or use a service VaultPress. The most important thing to have in any website, is the function of doing full site backups on a regular basis. Backups are a lifesaver when you work hard and creating your site….and trust me, things do happen unexpectedly whether is’s something you did, or perhaps the web host server crash and burned, or you updated a plugin and it crashed your site….etc.

[Zdenka]

Aha! In that case it was my mistake. I didn’t check the setting. I might give it a try once again.
Yes, sure backup. I discussed the issue with my hosting support and was assured they do a complete backup twice a day and store it for 7 days. I should just downolad the backup from the server once in a while.

[Zdenka]

Using the html percentage code inserted an unwanted line hight in the menu and other lists. I’ll rather try to change each font “category” manually.

1) So far it seems like font size for: #pref-main-section, #pref-bottom, #pref-social-content, .primary-navigation, #footer-menu, #pref-footer, #pref-breadcrumbs, h1, h2, work well. Is that right (sorry, I really don’t know anything about coding and would like to spoil anything. E)

2) I’m confused when I should use em / rem or px. Is seem written differently for different items. Does it matter if I use em, rem or px or can anthing go wrong if exchanged?

3) I’d also like to put some padding between lists items. But only numbered and bullet lists in the posts / pages (so it doesn’t affect the menu). Is it doable?

4) As for headings, there are bigger and smaller heading in the demo typography page. What was your intention for using them? (and how?)

5) I’d like to make the archive dropdown menu bigger.
I tried this

button, input, optgroup, select, textarea {
font-size: 1.250em;
padding: 4px;
border-width: 1px;
border-style:solid;
}

It works to some extend. But now, not matter what font size I put there, nothing happens. Are there some limits? Am I doing something wrong?

[Zdenka]

I reinstall the Preserved HTML Editor Markup plugin. Fixed the br / p marks. No problems so far.
Does it do anything else than adding p tags? Any specific examples how it can be handy when working with Preferential?

[Sushil Adhikari]

Best thing to do is to read up on their documentation, as well, contact the developer for that one. As far as i can tell, it retains HTML when used in the WP editor, which is notorious for stripping out people’s custom html code.

[Author]

Posts