By jpk27 on

Hello,

I currently have a basic content-type where some fields are text fields, and some are entity-reference fields, links, email addresses etc.  In the rendered display, the field labels and entries for the text fields are rendered with Olivero serif font (Lora), while the labels and entries for all the other field-types are rendered with the sans-serif font (Metropolis).  Visually, it would be better if all fields were rendered with a consistent font/style, irrespective of the underlying field-type.

My question is: what is the most straightforward way to achieve this?  I had asked effectively the same question a couple of years ago, and the suggestion then was to use the Field Label module.  But back then I was using Drupal 9, and now I'm using Drupal 10, so not sure if this is still the best option.  Also, it would be nice if there were a more general solution.  I'm a bit of a novice (still), so don't know very much about CSS editing, but can try if that would be the best route.

Thanks very much for any suggestions.

Cheers,

John 

⋅ Categories: Drupal 10.x

Comments

vm’s picture

vm commented

What you've mentioned are the options. field label module is available for D10 and its project page incates there are similar,

Alternative/Similar Modules

  • Display Suite allows for extensive control over field markup (including label tag and classes) as well as changing the label text, but the 'field template' features are not currently compatible with Layout Builder.
  • Fences also provides more control over field markup, but doesn't allow for customizing label text. Fences works with Layout Builder, but can enable authors to change all field markup if they have access to Layout Builder layout overrides.
  • Entity Form Field Label provides a way to change label text on form displays. (Field Label does not support form displays.)
  • Field Display Label provides an additional label field that is used on all entity displays.

Else overriding the existing CSS with a custom CSS override.

jpk27’s picture

jpk27 commented

Hi VM, thanks for those suggestions.  I think I will try Fences or a CSS override (I realised that Field Label doesn't quite do the job since it's the font of both the field label and the entry that are inconsistent across different field-types).

But it seems to me a slightly bug-like default behaviour; why not just render all text-fields in the same default style?  Or am I missing something?

Thanks, John

vm’s picture

vm commented

I don't have that answer as I don't use Olivero. Could be a specific theme issue could be something more than that. Would be interesting to test other core themes to see if the issue is specific to Olivero.

wombatbuddy’s picture

wombatbuddy commented

In my default Olivero theme all labels have the same font. You can try to look at the class attribute of the label element and then search it in CSS files. For example if the class attribute is "field__label", you can try to search ".field__label" class in CSS files. If you'll find that for this class is set another font, you can change it.

jpk27’s picture

jpk27 commented

Cool, thanks a lot for the hint.

Cheers, John