Browsers ignore stylesheet-font-definitions

OHELLOAGAIN! You should update your Internet Explorer, because it works perfectly in IE11. For all older versions of IE, avoid working with the rem unit in CSS font shorthand, because IE up to version 11 will not understand.
See: https://stackoverflow.com/questions/16157342/css-rem-unit-not-working-with-font-declarations

Hello :),

I can’t update, because I’m still working with Windows XP. – And normally I’m not using IE – it was only, because I found no headline-serifes in FF displayed, that I checked IE as well.

However, the rem unit/pre-IE11-problem couldn’t be the only issue, because it’s FF, which does not displays the headline-serifes. –

However, Opera works for me as the stillsheet says: headline with serifes, and other text without. –

Thank you for the link:

Inserting

body,
button,
input,
select,
textarea {
    font-size: 13px;
    font-size: 1.3rem;
    font-family: Verdana, sans-serif;
}

into my child-theme, makes IE8 displaying theses elements without serifes. –

However, seemingly FF and IE8 still do not display the same font-family:

https://1a-spielwiese.de/wp-content/uploads/2014/10/Schriftenvergleich.jpg

Lol, you’re the only person here who makes me go into this kind of detail.
Check this out:
https://www.smashingmagazine.com/2012/04/24/a-closer-look-at-font-rendering/
https://css-tricks.com/font-rendering-differences-firefox-vs-ie-vs-safari/

You don’t even have to read it all.
All I want is to show you that you’re doing just fine.

And, woops, I totally forgot about the header image.
Try this:

#masthead {
	background-repeat: no-repeat;
	background-position: 50% 50%;
}

Thank you again! – It prevents the old header-problem with IE 8 – but than I get a new problem: If the view in IE is 75 %:

https://1a-spielwiese.de/wp-content/uploads/2014/10/IE-8__75_v_100.jpg

or if in Firefox the view is a step smaller then ‘normal’… –

I have not enough background-color regarding my header-image…

You could give the header a padding and set the background-color to the same grey you used in your image:

#masthead {
	background-color: #f5f5f5;
	padding: 40px 0; /* Or whatever */
}

Wow! – It works regarding the background. ?? –

But what is regarding the text inside my header-image? (Sometimes it covers the blog-description a little bit – sometimes not.)

How about this:

#site-description {
	max-width: 460px; /* Or whatever */
	margin: 0 auto;
}

PS.:

Actually I don’t want to ask you to write my code. ?? –

Actually I want to understand the structure, which makes possible to resolve such symptoms (problems) by myself.

Well, you didn’t tell me in what kinds of situations your image appears to cover the description. So I supposed it depended on how the text is rendered by a browser.
As for the structure: Inspecting the header in Firebug will tell you that you have a background-image inside your site header. And that you have text inside an h2 element inside your site header. Both of these do not really care about each other. That’s all there really is to it.

you didn’t tell me in what kinds of situations your image appears to cover the description.

IE 8 – 100 %: The text of the header-image covers the description.

IE 8 – 75 %: Dito, but the description is, anyhow, better readable.

IE 8 – 50 %: Dito – but anyway the entire blog is to small .

FF – normal: Close to the description, but not covering it.

FF – one step smaller: even more close, but as well not covering the description.

FF – one further step smaller: covering the description – the entire blog is still readable.

FF – one step greater than normal: Covering the ‘E’ at the beginning of the description.

Both of these do not really care about each other.

I.e.: There is not way to determine, whether my header-image-text covers the blog-description or not?

There is no method in CSS. There are sure other methods of recognising text in an image, but they require an insane amount of programming skill. (Maybe someone already built a WordPress plugin.)

If, however, you want to use another bit of text inside the header, turn it into an arch and still make sure it won’t touch your site description, I’d recommend you do not put this text into a background image.

turn it into an arch

Thank your again.

It works with Firefox and Opera (but I’m again not able, to centre it); with IE8 it does not work.

Yup, it’s depending on new CSS rules that IE8 doesn’t know of yet.
But that’s alright, since #1 only 10% of users in the whole world use it, and #2 the text being an arch isn’t really necessary for the overall functionality of your website. So there’s nothing you need to worry about.

@ emilyTK:

Anyway, I will have to think about, whether I will use Javascript or not. –

@ automattic:

By the way I found a reason for that:

it’s FF, which does not displays the headline-serifes.

I recognised now, that this happens only, when I use JonDoFox – but not when I use my Firefox Default-Profile.

This seems to imply, that the Reddle-theme consists of feature, which are consired by the JonDoFox-author as security risks, e.g. again Javascript.

Therefore the next questions derive:

(How) is it possible to have the same appearance and features with JonDoFox and Firefox-Default-Profile?

Would it be possible to implement the same appearance and features without the (risky) technologies at issue as well? Or the other was around: What would I have to remove from the Reddle theme code, for that Firefox-Default-users get the same appearance as JonDoFox-users?