Wrong font for entity reference field widget labels and descriptions.

On a fresh HEAD as of ~9am this looks ok to me. Browser? OS? Maybe someone else can confirm but looks good to me in FF, Chrome and IE7/8. Screenshot is FF.

I also can't duplicate this.

Issue still remains. Overlay in #1 uses Seven, not bartik, right? Seven doesn't the change the font of div.field-type-taxonomy-term-reference, which seems to be the problem.

This is still reproducible and it's a good novice issue. This is a problem with the Bartik theme, not Seven, which is what is displayed in #1. To reproduce the issue with a clean install of D7:
1. Visit admin/appearance.
2. Select Bartik as the admin theme.
3. Visit the new Article node form.
4. Verify that the Tags taxonomy field's label does not use the same font as the other fields.

The term reference field has been replaced by the entity reference field in D8, so this shouldn't be an issue in it.

CSS class targeting the taxonomy label in Bartik admin theme has been changed so that it only targets the label for front-end theme, and not for the admin theme.

Admin view


Front-end view

Thanks, @justinchev! #6 looks ok to me. For the record, the patch also corrects the font of the field description.

I double-checked the patch, just to be sure. I confirmed the problem still existed in the current 7.x branch, the patch applies cleanly, and confirmed that the patch fixed the problem.

Confirmed issue still exists in 7.x HEAD
Proposed patch is a good fix

Don't need to leave this assigned to justinchev anymore.

Isn't the intention of the current code to style the whole rendered term, though (not just the field label)?

I think in most common cases it won't matter, since e.g. the term will be rendered as a link which gets the same styling through other CSS rules. But if you're displaying the term differently, you probably want the whole thing to use the same font.

Seems like it would be safer to prevent the styling in situations where we don't want it, e.g. prevent it for .form-item .field-type-taxonomy-term-reference or something similar, rather than changing the existing rule.

@David_Rothstein
I'm not sure I understand, so I want to verify what I think you're suggesting. Do you believe that the current style should be left in place, then an additional rule added to correct the widget's font issue which is caused by that rule?

I guess so... although it's unideal in terms of having clean CSS. But I think that's probably the most backwards-compatible way to do it.

Ok, then this needs work.

The code as it stands sets the font for the 'field label', the 'tags', and the 'descriptive text' that you see in edit view.

The edit page descriptive text should inherit the font that all the other descriptive texts use.
The tags themselves don't actually require this CSS style as they inherit the font anyway.

The issue is just the 'Tags' label. All the field labels have a CSS class of 'field-label' (including the tags widget). On the edit page the label should inherit whatever font is set for all other field labels. On the frontend though the label is set to use the font and is why it's has this style.

Regarding being backward compatible I don't think that we need to leave the current style and add additional rules to correct the label and descriptive text. If someone decides they want to change the base site font, or 'field-label' font, they should inherit the changes automatically.

Option 1 (patch #6) I think is the best as it leaves the frontend label with the specified font, and only the edit page label and descriptive text change.

Option 2 is also a possibility, which is to remove the rule completely for the widget. This fixes the edit page issues, but means that the frontend label will use the default & 'field-label' font styles; which isn't good for backwards compatibility.

Attached image demonstrating the options.

Issues should now been moved to 8 and backported to 7. Can confirm it was on D7 and now D8.

Attached is the D8 patch for this fix - the D7 version should still be relevant I think.

The issue isn't present on the 'edit pages' for D8, but on the 'presentation' view the font-face and the font-weight are different to the other field labels. The patch fixes the font-face & font-weight difference, and makes it so the label will just inherit whatever is set for the other labels - ie. everything with class ".field .field-label {}".

Here's an image showing the problem and the fix as supplied by the patch.

No idea why the previous patch failed testing. Rerolled it just in case... see previous change comments and details in #18.

Have updated to use code from branch 8.1.x so this should now hopefully pass testing...

Anyway attached is the 8.1.x patch - the D7 version should still be relevant I think.

The issue isn't present on the 'edit pages' for D8, but on the 'presentation' view the font-face and the font-weight are different to the other field labels. The patch fixes the font-face & font-weight difference, and makes it so the label will just inherit whatever is set for the other labels - ie. everything with class ".field .field-label {}".

Here's an image showing the problem and the fix as supplied by the patch.

I duplicated the issue in post #23 and after applying the patch was able to reproduce the results.

Tweaking title to reflect that this affects more than just the taxonomy field. Also, is it necessary to target 8.1.x? This is a bugfix and does not seem to be a disruptive change. Based on what I'm reading in https://www.drupal.org/core/d8-allowed-changes, this is fine for 8.0.x.

Applied the patch and looked at various fields, things are getting closer, but there are still some problems with font sizing. Attaching an image with further details. This was taken after applying the patch on a node that has a user reference field, integer list field, and taxonomy reference field. As you can see, there's some inconsistency that looks bad.

Unassigning and removing 'Novice' as this issue has gained some complexity.

I have spent some time understanding the font sizing issues in Bartik so I will try and give some advice here also.

for teaser display looks also not correct

Added font size fixes.
1) changed font-size for field--type-entity-reference label
2) added font-size for node-view-mode-teaser label
3) added font-size field--name-field-tags label

Thank you for the patch @finnsky. We're still getting closer, but not quite right. The field values appear to be correct, but now the labels on the entity reference fields are a bit too large. Here is a shot of the same sort of test I did previously:

And here are the computed styles for the list field label:

versus the entity reference field labels:

I have added new patch, so that labels on the entity reference fields have same size as field text have. Please review it.

This patch makes a few adjustments to the previous one:

1. Fixes a couple whitespace issues.
2. Undoes margin adjustments. (Since we're focused on the font here, how about we defer margin adjustments to a follow-up, to keep things simple.)
3. Reintroduces the font family adjustments from #29.
4. Sizing for both field labels and field values should be consistent for both full and teaser view. The adjustments made use normal (not entity reference) fields for reference.

I have checked above patch (mentioned in #37). font sizes looking fine. But seems some spacing needed in between tags, checked ff, chrome both and having this issue on both browser.

Adding screenshot here

Thanks for looking it over @prateekS, but this patch does not change spacing at all, just font sizing and family. I think you'll find that the problem you encountered is that you created a single tag called "tag1 tag2" rather than two tags. (Tags must be separated by a comma in the form field.)

(I think this is the tag to use for needs maintainer sign off before the issue set to RTBC)
Also bumping this to 8.2.x because I think committers possibly will class this as a disruptive visual change.

Seems it was intended, background on the issue: #1218640: Bartik displays all taxonomy term fields in a smaller font than other fields, (especially from #38)

The intent according to #1218640: Bartik displays all taxonomy term fields in a smaller font than other fields is that the field label for the Tags field, or possibly all taxonomy term reference fields which was meant to be smaller.

If the latter, I think it's a wrong decision. There's no way we can know how important or not taxonomy term reference fields are.

And at any rate, the CSS is getting applied to ALL entity reference fields, which is just wrong.

#2957408: Bartik has inconsistent .field__label styling, with unique attributes for .field--type-entity-reference and .field--name-field-tags only has a newer patch.