Search code examples
cssgoogle-fonts

Css line-clamp ellipsis raised for certain fonts

Using Gothic A1 Google Font and line-clamp css property, ellipsis are raised. With all others font they are baseline.

How can I make them baseline also with Gothic A1 font?

https://codepen.io/textarea/pen/wvvmGOr

.box {
  font-family: 'Gothic A1', sans-serif;
  width: 500px;
  display: block; /* Fallback for non-webkit */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

enter image description here

Solution

  • I faced the same problem and found that the issue is solved by using <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Gothic+A1:wght@100;200;300;400;700;800;900&amp;display=swap"> on the document head (or import it on the css file). It uses many different files and unicode ranges, so if you are self hosting you have to download all the files in the link and use their font-face style. If anyone has a better solution, please share.