Olivero's H1 tags are designed with the Metropolis sans-serif font.

However, if the content-editor places a H1 tag into CKEditor (hopefully they will not do this!), it will inherit the Lora serif font.

We need to set the H1 tag to use Metropolis within the .text-content class (which gets applied to all fields that have formatted text).

CommentFileSizeAuthor
#17 interdiff_14-17.txt781 byteskomalk
#17 3179150-17.patch1.69 KBkomalk
#14 interdiff_11-14.txt1.77 KBkomalk
#14 3179150-14.patch1.98 KBkomalk
#14 h4-after.png81.67 KBkomalk
#14 h3-after.png84.14 KBkomalk
#14 h2-after.png99.11 KBkomalk
#14 h1-after.png63.54 KBkomalk
#11 3179150-11.patch427 bytessantosh_verma
#7 3179150-after_patch-5.png110.67 KBabhijith s
#7 3179150-before_patch.png17.73 KBabhijith s
#5 after-patch-5.png70.72 KBhansa11
#5 before-patch-5.png79.83 KBhansa11
#5 3179150-5.patch1.52 KBhansa11
#3 after-patch-3.png162.89 KBhansa11
#3 before-patch-3.png198.58 KBhansa11
#3 3179150-3.patch1006 byteshansa11
Olivero__Drupal_9_Demo_Site.png97.27 KBmherchel

Comments

mherchel created an issue. See original summary.

hansa11’s picture

hansa11 commented
Assigned: Unassigned » hansa11
hansa11’s picture

hansa11 commented
StatusFileSize
new 3179150-3.patch1006 bytes
new before-patch-3.png198.58 KB
new after-patch-3.png162.89 KB

Before Patch:
before patch 3

After Patch:
after patch

hansa11’s picture

hansa11 commented

I just realized this will be needed for other heading levels too.

hansa11’s picture

hansa11 commented
StatusFileSize
new 3179150-5.patch1.52 KB
new before-patch-5.png79.83 KB
new after-patch-5.png70.72 KB

This patch includes the change for all the heading levels when placed inside of the class `text-content`.

Before patch:

before patch 5

After patch:

before patch 5

Please review.

Thanks!

hansa11’s picture

hansa11 commented
Assigned: hansa11 » Unassigned
Status: Active » Needs review
abhijith s’s picture

abhijith s commented
StatusFileSize
new 3179150-before_patch.png17.73 KB
new 3179150-after_patch-5.png110.67 KB

Applied patch #5 . Now the H1 tag to use Metropolis within the text content.
Including screenshots

Before :
before

After:
after

RTBC

abhijith s’s picture

abhijith s commented
Status: Needs review » Reviewed & tested by the community
mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Status: Reviewed & tested by the community » Needs work

This looks and works great, but I think we should move the font-family rules to global rules (the header fonts should never not be sans-serif) within base.pcss.css.

Thank you, and sorry I didn't specify this earlier 😃

santosh_verma’s picture

santosh_verma commented
Assigned: Unassigned » santosh_verma
santosh_verma’s picture

santosh_verma commented
Assigned: santosh_verma » Unassigned
Status: Needs work » Needs review
StatusFileSize
new 3179150-11.patch427 bytes

I have added the H1 font family in base.pcss.css

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Status: Needs review » Needs work

We also should ensure that the h2, h3, and h4 fonts are also set to sans-serif.

@Santosh_Verma When you submit the patch, also please include the compiled files.

komalk’s picture

komalk commented
Assigned: Unassigned » komalk
komalk’s picture

komalk commented
Assigned: komalk » Unassigned
Status: Needs work » Needs review
StatusFileSize
new h1-after.png63.54 KB
new h2-after.png99.11 KB
new h3-after.png84.14 KB
new h4-after.png81.67 KB
new 3179150-14.patch1.98 KB
new interdiff_11-14.txt1.77 KB

Worked on #12.
Attached screenshot for the reference review patch.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Status: Needs review » Needs work 
+++ b/core/themes/olivero/css/components/text-content.css
@@ -13,7 +13,6 @@
-  font-family: "Lora", "georgia", serif;

Not sure why you're yanking this out. This changes the body text font. This should be left alone. Be sure to test your patches pls :)

komalk’s picture

komalk commented
Assigned: Unassigned » komalk
komalk’s picture

komalk commented
Assigned: komalk » Unassigned
Status: Needs work » Needs review
StatusFileSize
new 3179150-17.patch1.69 KB
new interdiff_14-17.txt781 bytes

Worked on #15.
@mherchel Thank you for the review.
Here is the new patch.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Status: Needs review » Reviewed & tested by the community

#17 looks good!

lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented

Committed 0fbdf54 and pushed to 9.2.x. Thanks!

Leaving open for backport to 9.1.x.

  • lauriii committed 0fbdf54 on 9.2.x 
    Issue #3179150 by komalk, hansa11, Santosh_Verma, Abhijith S, mherchel:...

  • lauriii committed 414643c on 9.1.x 
    Issue #3179150 by komalk, hansa11, Santosh_Verma, Abhijith S, mherchel:...
lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented
Status: Reviewed & tested by the community » Fixed

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.