Stroke on Yanone Kaffeesatz makes it look fragmented

Question

I'm using Yanone Kaffeesatz font from Google Fonts for headers on my site. When I set some outline, it turns out the font consists of many figures, each of them having their own stroke. How to make it look whole?

h2 {
    font-size: 3.5em;
    font-family: 'Yanone Kaffeesatz', sans-serif;
    color: #25D366; /* also tried -webkit-text-fill-color: #25D366; - same effect */
    -webkit-text-stroke: 1px black;
    letter-spacing: 0.05em;
    /*paint-order: fill stroke; - also tried - no effect */
}

<link href="https://fonts.googleapis.com/css2?family=Yanone+Kaffeesatz:wght@500&display=swap" rel="stylesheet">

<h2>Hello</h2>

Image of the header with stroke

It looks like a specific Yanone font bug (Works fine on `Roboto`, `open-sans` and so on). For now, use `text-shadow` (@kosh answer). — Ezra Siton, Apr 19 '20 at 08:44

Kosh · Accepted Answer · 2020-04-19T20:35:27.963

0

You might use text-shadow:

h2 {
  font-size: 5em;
  font-family: 'Yanone Kaffeesatz', sans-serif;
  color: #25D366;
  text-shadow:2px 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 0 2px 0 #000, 0 -2px 0 #000;
  letter-spacing: 0.05em;
}

<link href="https://fonts.googleapis.com/css2?family=Yanone+Kaffeesatz:wght@700&display=swap" rel="stylesheet">

<h2>WhatsApp</h2>

Or you might use SVG (from my older answer):

svg {
  width: 100%;
  height: 4em;
}

svg text {
  font-size: 2.5em;
  font-family: 'Yanone Kaffeesatz', sans-serif;
  fill: #25d366;
  stroke-width: 6;
  paint-order: stroke;
  stroke: #000;
}

<link href="https://fonts.googleapis.com/css2?family=Yanone+Kaffeesatz:wght@700&display=swap" rel="stylesheet">

<svg><text x="8px" y="75%">WhatsApp</text></svg>

edited Apr 19 '20 at 20:35

answered Apr 18 '20 at 20:56

Kosh

16,966
2
19
34

Forgot to say: yes, I've tried this, but when I set 2px stroke, there are small spaces in the stroke at the ends of letter lines: https://imgur.com/a/hLQhWa0 – freewalkr Apr 19 '20 at 09:00
@freewalkr, this is **not** a _stroke_. These are **shadows**. So if you want to move them farther from the center to get thicker "stroke", you may have to add 2 more shadows (at the top and bottom). See the updated answer. But the best solution would be to ask the respective font authors to fix the font itself =)) – Kosh Apr 19 '20 at 14:28
yes, I meant shadows (just called it a stroke because we were talking about strokes and shadows are just a way of creating a stroke). I've done it the way you did in your updated answer, and your snippet works well only for big values of ```font-size```. If you set ```2.5em```, you'll see what I mean. I just was thinking if this can be fixed without changing the font itself. – freewalkr Apr 19 '20 at 14:44
@freewalkr, I've updated my answer with another option - SVG. Might you like it. – Kosh Apr 19 '20 at 20:37

Stroke on Yanone Kaffeesatz makes it look fragmented

1 Answers1