Fonts won’t apply to my popup

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!

Thanks for this awesome tutorial. It works. For example, here is what worked for the input field text:

#popup-box-gfcr-2 .popupally-outer-gfcr-2 .popupally-inner-gfcr-2 .popupally-center-gfcr .popupally-signup-form-ishdye.content-gfcr .field-gfcr

Even still, in all cases, I still needed to use !important. But it works now. Thanks!

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.