No CSS integration
-
Hello.
This is a pain. I’d just like to use Google Fonts with custom CSS, but it doesn’t seem possible, at least not in a straightforward manner. All I can do is change EVERY instance of certain HTML tags, which is definately not something I want to do.
Is this real?
-
That is the whole point of the “class” attribute that can be placed in html elements. classes allow you to select groups of elements based on something that is not strictly tied to their element type.
I may be reading your post wrong, and if so, I apologize, I don’t mean to assume you are missing some CSS understanding. But it does sound at first like your concept of CSS selectors only goes as far as selecting by html element type. There is so much more power in CSS than that.
Let’s take a specific example. Let’s say you wanted to create a Google font control that makes it easy to adjust the font face and size and appearance of your H2 header elements. But then you realize that you don’t want to style ALL H2 elements exactly the same; instead you want to style the H2 on a certain page, or in a certain post, or maybe in sidebars, differently from your other H2 elements. That is exactly why you would give one distinct group of those H2s a specific class, so that your font control can easily pick out just those ones to work with.
Of course this means you have to have a way of getting those class attributes into those H2 elements and it has to be convenient enough to be worth it. If this is all within the text of posts or pages that you work with in the WordPress editor, that’s easy, you can just use something like <h2 class=”some-class-name-that-you-choose”> and then all the H2s with that class included will be easy to style together as a group apart from other H2s.
But if the kinds of elements you want to do this with are being generated, instead, by some part of your theme that you don’t know quite how to adjust, that would require some digging into your theme’s php code and customizing it or making a child theme from it and customizing that instead.
In a simpler case where you want to style a single element uniquely, and not a whole group, you could use the “id” attribute instead of “class”, since that’s what id is for, uniquely identifying one single element on a given web page.
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 h1Now 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.
@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.
- The topic ‘No CSS integration’ is closed to new replies.
