Cannot change font in parts of website

Hi Tim,

You have to target the same element than the font you want to replace.

Per example, for your Promo Box, you put your font on .promo-box, but it should be on .promo-box span

For the menu, you should use the class .main-navigation-li

When you look at your inspector in Chrome, try to find on which element the font you want to replace is specified, then you will be able to override it.

You should also look at your parent theme style.css file, that would be easier to find all the font occurrences.

Hope it will help!

You can also add !important to the end of the CSS property or use wp_enqueue_script to load the stylessheet that has the target CSS.

@mioudesign and @hotwebideas,

thanks for your input!

I tried changing the font of the promo boxes with .promo-box span, .promo-box and variations till I was blue in the face. ?? Didn’t help at all… So there is something weird going on there that I just don’t see.

I did open the stylesheet, that was a great idea! Makes it a lot easier than just ‘inspect’. I could change a lot. Thanks for the advice!

The only things I’m stuck with now, are: link font size in menu (if I make the a:hover smaller (= equal size of menu ‘in rest’) the links in any body text (page) get a LOT larger. I couldn’t fix this one so for now I just turned off the link aspect in the body text.

And the other thing, of course, is the weird promo box thing……. Can’t change the font at all (not the color, not the size, nor the font-family)

Auch… It’s in the php. The code is:

/**
* Header promo boxes
*/
if ( ! function_exists( ‘theshop_top_promo’ ) ) :
function theshop_top_promo() {
$block_texts = array();
$block_texts[] = get_theme_mod(‘block_text_1’, ‘Free shipping’);
$block_texts[] = get_theme_mod(‘block_text_2’, ‘Friendly prices’);
$block_texts[] = get_theme_mod(‘block_text_3’, ‘Always on time’);
$block_icons = array();
$block_icons[] = get_theme_mod(‘block_icon_1’, ‘fa-rocket’);
$block_icons[] = get_theme_mod(‘block_icon_2’, ‘fa-money’);
$block_icons[] = get_theme_mod(‘block_icon_3’, ‘fa-clock-o’);

foreach ($block_texts as $index => $block_text) {
if ($block_text) {
echo ‘<div class=”promo-box”>’;
echo ‘<i class=”fa ‘ . esc_html($block_icons[$index]) . ‘”></i>’;
echo ‘<span>’ . esc_html($block_text) . ‘</span>’;
echo ‘</div>’;
}
}
}
endif;

Does any of you know how to add a font face/family..? I have no idea…

On line 194 of your child theme’s stylesheet, you’ve got a subtle syntax error that’s causing the rest of the stylesheet to be ignored:

input{type="reset"],

should be

input[type="reset"],

There should be square brackets and you’ve accidentally put a curly bracket there.

This isn’t related to your issue, but you should also fix another error on the next line:

input[type+"submit"]

should be

input[type="submit"]

@stephencottontail: it worked!!! Thanks so much. Been at this for 2 days… ??

Do you by any chance know how to change the size? I tried this
button,
.button,
inpot[type=”button”],
input[type=”reset”],
input[type+”submit”] {
font-family: ehmooimedium !important;
font-size: 22px !important;
}

as well as:

button,
.button,
inpot[type=”button”],
input[type=”reset”],
input[type+”submit”] {
font-family: ehmooimedium !important;
font-size: 3em !important;
}

But neither take…

I didn’t notice this until just now, but you’ve got another error in that section:

inpot[type="button"],

should be

input[type="button"],

If that doesn’t fix it, can you post a link to a page that shows a button with the wrong font size?

@stephencottontail: that didn’t change the size, unfortunately.

The page link: https://www.timhupkes.com/shop (the promo box texts: ‘original artwork’, ‘exciting art’ and ‘beautiful gifts’)

Ah, I thought you were referring to something related to the code we were discussing. For the promo box, try this:

.promo-box span {
	font-size: 24px;
}

@stephencottontail: haha, I thought so too! I tried changing the font (for the past 2 days) by .promo-box span
.promo-box
and every other variation in the book (inspect; Chrome)

I am amazed. I followed your advice. At first it changed the font back. But now it DID respond when I added the font-family.

Thank you very, very much!! I never could have guessed I needed to change 2 parts of the code for this one.

Solved.