1. dy87chf
  2. Sherlock Holmes
  3. Commercial Templates
  4. Friday, 28 April 2023
  5.  Subscribe via email
I have a section of bolded text on this page "106 scholarships have been awarded" but it looks blurry. The font style is Open Sans.

https://dianec63.sg-host.com/scholarships

I am using bolded Open Sans on other sites and it looks fine:

https://midwestleadershipinstitute.org/mli-events/fall-2023-seminar
Accepted Answer Pending Moderation
0
Votes
Undo
looks normal to me. Can you show me a screenshot?
Attachments (1)
  1. more than a month ago
  2. Commercial Templates
  3. # 1
Accepted Answer Pending Moderation
0
Votes
Undo
Please see the attached. Both versions are using Open sans font at 17px. The one on the left (sharp) is using J51 Layla template v3. The one on the right (blurry) is using J51 Kaylee v4. Here are the links for reference:

Layla template - https://www.sandwichpld.org/scholarships
Kaylee template -https://dianec63.sg-host.com/scholarships

I'm also including a screenshot of the mobile menus for both. The one on the right is very blurry.

j51-font-comparison.jpg
j51-font-comparison2.jpg
Attachments (2)
  1. more than a month ago
  2. Commercial Templates
  3. # 2
Accepted Answer Pending Moderation
0
Votes
Undo
difference is due to the font-weight.
Layla uses:
b, strong, th {
font-weight: 700;
}

Kaylee uses:
b, strong {
font-weight: bolder;
}

add:
b, strong, th {
font-weight: 700;
}
into your custom css
  1. more than a month ago
  2. Commercial Templates
  3. # 3
Accepted Answer Pending Moderation
0
Votes
Undo
Thanks, I tried that but it didn't help.
  1. more than a month ago
  2. Commercial Templates
  3. # 4
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

To amend try adding the following to the Custom CSS field of your templates parameters (Extensions -> Templates -> [YourTemplateStyle] -> Custom CSS)....

* {
-webkit-font-smoothing: none !important;
}


Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 5
Accepted Answer Pending Moderation
0
Votes
Undo
Unfortunately that did not help either.
  1. more than a month ago
  2. Commercial Templates
  3. # 6
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

Maybe try auto instead.

* {
-webkit-font-smoothing: auto !important;
}


If you wish you can experiment with the various smoothing values....

auto - Let the browser decide (Uses subpixel anti-aliasing when available; this is the default)
none - Turn font smoothing off; display text with jagged sharp edges.
antialiased - Smooth the font on the level of the pixel, as opposed to the subpixel. Switching from subpixel rendering to anti-aliasing for light text on dark backgrounds makes it look lighter.
subpixel-antialiased - On most non-retina displays, this will give the sharpest text.

This is the only difference between these 2 templates with the fonts you have rendered.

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 7
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!