cataphor

Most browsers never got around to implementing the ability to display all of the font weights that HTML and CSS are able to ask for. Even if the font designer and page creator have provided a given weight, most browsers still only want to display three possible weights at most. I’m not certain that’s the issue here but I suspect so.

I’ll bet the theme your site is using, makes use of Heading 1 for the homepage title but uses Heading 2 (or so) for headings and page titles other than the homepage. That is a common convention followed by many standard themes and even has older roots from outside of WordPress. It was always considered a standard to never give any secondary page of a website quite as large of a title or header as the front/home page has.

It’s time to learn how to open and use the Developer Tools that are built into most web browsers. That is how you will be able to easily answer questions like this for yourself without waiting, and it will lead to great improvements in your web development ability and speed.

In either Chrome or Firefox, while viewing the page that you wish to inspect, press Control-Shift-I. (that is on a PC… I suppose on a Mac it is probably Command-Shift-I).

There are many instructional pages and videos online about what to do next after you open the Developer Tools. But the first and simplest thing you will want to learn is how to point the Tools at a specific element on the live page so that the Tools window will show the HTML structure, including all the CSS selectors for any element that you point to with mouse or touchpad.

• This reply was modified 5 years, 8 months ago by cataphor. Reason: augmented answer a little

@anderson456 – great, I’m glad that helped. Best of luck.

(Note, I am not affiliated with this plugin, I’m just another user.)

Good thinking to backup your site before experimenting. But Tools > export and Tools > import are not really intended as a way to backup your WordPress. They are mainly for when you want to copy all of the “content” (including posts, pages, comments, custom fields, terms, navigation menus, and custom posts) from one WordPress site or installation to another one.

There are good plugins for backing up all of your plugins and restoring them after trying some new things. And there are even more plugins for backing up absolutely everything about your site and restoring it to a given state. But the built-in tools for exporting and importing your site “content” don’t qualify for either of those purposes.

Mechanically speaking, what happened when you did that: when you exported, you made a serialized (as XML) copy of all of the content mentioned above; then when you imported, you installed that copy of all of those things right back into your same site. The system doesn’t expect you to do that, so it has no way of knowing or checking that maybe you were importing a duplicate of every item. So it just did its duty and created a new copy of every single one of those things that you imported. That includes all posts, all pages, everything. And the one that was visually most noticeable first of all, it created a new copy of your menus.

Unfortunately there is no “undo action” for this, no simple one-button fix. But you may be able to clean up fairly easily by the following: 1. copy your exported file safely to a location outside of your site; 2. install a WordPress Reset plugin (there are many, and most of them work okay, so use the one that has the most users, the best reviews, and is compatible with your WP version) to reset your site; then 3. do Tools > Import and import your content file to get your content back. But I cannot promise this will all go perfectly. It will for most sites but it’s just an idea and I cannot guarantee it. The WordPress Codex and other online documentation have lots of good pages on how to fully back up your site’s database and files before doing anything risky. I wish you smooth sailing and a good outcome.

Disclaimer: I am not affiliated with this plugin, I’m just a user.

Q1:I think the best resource for what you may be looking for is if you just go to the Google web fonts site itself… not this plugin, but the actual fonts.google.com page, and check out all of their font search and display tools. There’s a lot you can do there.

Q2: displaying the fonts in their actual styles… I may be missing some shortcut or trick for this, but I think that would require downloading them all and it would be slow and a big memory burden.

In the section where the plugin lets you add custom CSS, you could put in some CSS media queries to switch based on the device’s viewport size. This is they type of thing that is advanced enough that you need to know and write some custom CSS, and at least the plugin gives you an easy place to drop that custom CSS within its interface, rather than having to edit and upload altered CSS files to your site itself.

In order to answer well, the plugin author is going to need to know for sure what php version your server is using to run your WordPress site. That can be found through your site’s dashboard in one of the info or tools pages, I forget but it’s not too hard to get to.

Hi Bob, none of us out here on the internet see the page you need help with because you linked the WP admin page for your site instead of the actual site. And when I tried removing the admin part from the URL and just viewing the public side of the site directly, it appears it has not been published or enabled — I just get a “future home of a WordPress site” kind of page.

Thank you for doing your best so far to describe the situation you’re facing but without being able to view the page you’re working on and its HTML structure, it’s going to be relatively impossible for anyone out here in the volunteer/enthusiast support community to try and work out what CSS selectors you should use in order to successfully select all of your basic paragraph text and only your basic paragraph text.

If you are unable to make the page viewable to the public, you could try pasting the HTML into a publicly viewable “pastebin” — there are many “pastebin” sites for free on the web, you can just Google that term and choose one to use. Such sites provide you with a link to the content that you “pastebin” and you could then share that link here. If you go that route, be careful to remove from that content any sensitive, secure, personal, or business-specific information that you would not want the public to access.

There’s a possibility that someone currently running the default 2016 theme will be able to infer enough from the page structure of that theme to give you a fairly good idea of a selector that will work in an Easy Google Fonts control and give you what you need, without having to see your specific site.

One final note: if no one comes back with a reply that gets you all the way there and you end up having to work this all out on your own, be advised that the #1 thing that Easy Google Fonts users — and users of many similar plugins — miss when they are working out what selector to use to point to a specific part of their site content in order to style it as they wish, is specificity. Search the web for some articles on CSS selector specificity — there are a range of good ones out there, from beginner to expert. Once the specificity concept is clear enough many people’s selector troubles are solved.

• This reply was modified 6 years, 7 months ago by cataphor.
• This reply was modified 6 years, 7 months ago by cataphor.

You’re welcome, I’m glad this worked out for you — and I’ll bet you feel bravely ready to dive into the same tool window any time it becomes necessary.

Yep, sometimes you have to get quite a few layers of specificity in there to get past some forcing that’s sewn into a plugin or theme that you’re using. In the world outside of WordPress that many layers is pretty rare.

Note that a space between specifiers in a CSS rule means “the latter is nested somewhere within the former, but may or may not be its immediate ‘child’ element.” You can get even more specific, in cases where one element is an immediate child of another, by using specifiers like .some-div>ul>li>.some-span. The angle brackets indicate not only containment but that the next item in the chain is exactly one level deeper nested in the HTML of the page.

With that and several other available techniques (such as selecting by id rather than by class when possible) you can often get all the specificity you need without having to chain so many classes like .a .b .c .d .e .etc. But no matter as long as you get what you’re trying to.

• This reply was modified 6 years, 8 months ago by cataphor.
• This reply was modified 6 years, 8 months ago by cataphor.
• This reply was modified 6 years, 8 months ago by cataphor.

@jpontinen,

Good, I am glad to know it’s working for you now. Best regards!

Hi Kat,

There are several CSS rules trying their hardest to get your font to apply within the popup, even to the point (usually unnecessary when things are done right) of having to specify !important at the ends of the rules, but they’re still not doing it.

In browser dev tools (Ctrl-Shift-I in Chrome or Firefox), the way to see this is to get the inspection window pointed at the paragraph of text in the popup, then start scrolling through the CSS rules in the CSS window, and you’ll see the font declared over and over but each time, in each applicable rule, it’s lined-thru in red, indicating that it is being overridden. Usually when that happens we just scroll lower and farther into the CSS window to discover what even more fundamental and strongly specified rule is doing it, but in this case we reach the very end of that panel of the inspection tool window and every CSS rule pertaining to font is overriden, thru-lined with red, for that chosen HTML element.

So what gives? Here’s the key for situations like that. Now we turn our attention to the “computed” CSS pane of the same window. In some browsers, at some window sizes, you will have to click a tab in the developer tools interface to open the ‘computed’ section, or sometimes it will already be shown but unlabeled. You can also identify it by the appearance of a series of nested graphical colored boxes at the top of it, which is a display of any margin and padding settings that may currently apply to the chosen element.

Now once you’re looking there, scroll down to the property “font-family”, and there’s the answer. A plugin, possibly named “popup ally” (just a guess from the names you’ll see in there) is forcing the font to a standard stack of fonts: Arial, Helvetica, Sans Serif, and so forth.

So what to do about this — and why is the popup able to do that?

It’s doing it with specificity. here’s a short helpful article on specificity in CSS selectors.

And specificity is exactly how you can take control back yourself. It may sound silly, but all you need to do is spell out more completely, in the CSS selector that you create for your font control, enough additional layers of the HTML structure that contain the element you’re trying to style.

So (just an example, this is not intended to be an exact or successful answer, just a guideline) instead of .logo-text-gfcr, you would try something like .popupally-center-gfcr .popup-row-gfcr .logo-text-gfcr.

The latter rule is not just saying that you wish to style any div with the logo-text-gfcr class with your choice of font; instead it says you want to do that only when the text in question is nested inside of a <div class=”popup-row-gfcr”> that is nested inside of a <div class=”popupally-center-gfcr”>.

Again, you’ll likely be more successful if you look in the developer toolbox window for yourself and not take my example literally, since I may have made typos and it may need more tweaking. But there’s a good start for you. Best of luck with it!

@jpontinen, somehow (maybe because it was long and I edited it for typos several times *and* I chose to not track the edits, maybe that’s suspicious or bot-like behavior!) my latest long response to you ended up automatically being sent to moderation for “up to 72 hours”. I see it now above, but I don’t know if that means you can see it. Please check back later if it’s not visible now. It’s approximately 9 paragraphs in which I recommend an approach in which the plugin does pretty much what you wish. Best of luck!

Oh, in fact it looks like it was mod-approved just 5 minutes ago so I expect you can see it now. My use of angle brackets to express that I don’t know the name of your page in the example may have looked like rogue HTML to the comment akismet system.

• This reply was modified 6 years, 8 months ago by cataphor.

Ah! You are so close to getting exactly, or very nearly, what you want.

In Easy Google Fonts settings, create a new font control. name it something like “<page name> main header font”.

Now edit the new font control, giving it a selector:
#page-45 #main-header h1

Now on your WP dashboard click Appearance > Customize to open Live Preview, and navigate to that page, whichever one your font control is intended for. In the customizer menus at left, select Typography > Theme Typography and you’ll see the font control you just created.

Open your font control and you will be able to flip through every Google Font in existence (or just choose any by name) and watch the page’s main header h1 element be instantly styled with your choice of font in the preview window, right in its own context on your site. Same goes for changing its appearance in the many ways the plugin allows.

(My only outstanding complaint occurs right there, actually: the plugin doesn’t support absolutely every CSS property relating to fonts and typography, just a great deal of the by far most common ones. But at least it’s enough for preview purposes, which is enough that I find it quite valuable.)

Please let me know if I missed the mark here, but I think this is what you were looking for.

One way it does fall short of literally providing what you were seeking is that yes, you’re not going to be able to just operate from the custom CSS text area that you type into, when it comes to quick font previews; instead you will have to create a ‘control’ and then operate the control within the separate Typography section of the WP live customizer. But one could argue that you gain a lot in return: sliders or other mouse-based control for many properties, revert/reset buttons per control and even per property; and of course the fact that adjusting the font for elements picked by any arbitrary set of CSS selectors you wish is now elevated to an activity that site admin personnel without CSS experience can be exposed to. You could even say this is the primary use of this plugin.

For example my main client right now won’t ever learn CSS, not even close, but they are comfortable enough with the WP Dashboard, and they would like to experiment with the staging copy of their site, fiddling with styles from any GUI and mouse interface I can give them. I create Easy Google Fonts controls for whatever elements they request this level of control over, and they are satisfied.

• This reply was modified 6 years, 8 months ago by cataphor.
• This reply was modified 6 years, 8 months ago by Steven Stern (sterndata).

This plugin is really truly just for Google Fonts. In order for the maintainer to deal with other web-based font providers he would have to greatly increase the size of his plugin to deal with the completely separate APIs for each one. Adobe’s Typekit, for example, requires a whole different way of identifying the user and their rights to the fonts available, including a distinction between free and paid fonts, and that becomes more complex than the case with Google where it’s all free and nothing more than a single, simple API key string is needed.

To be honest, Typekit fonts are probably best to serve directly from your site or using custom HTML as recommended by Adobe to pipe them in from a CDN. Perhaps someone would build a similar plugin for easy quick typekit font previewing and prototyping, but I wouldn’t wait for it.