CODEWITHSUNDEEP
csswebfontstypographygoogle-fonts
Marco Rieser
Marco Rieser

Reputation: 58

Right Arrow in Kadwa (Google Font) is too wide

In InDesign I use the Google Font Kadwa to generate a right arrow (→).

I load the font into my website but the arrow is too wide.

@import url('https://fonts.googleapis.com/css?family=Kadwa');

body {
  font-family: 'Kadwa';
}
You see, the font is applied but the arrow is too wide →

On the Google Font page the arrow is rendered correctly. https://fonts.google.com/specimen/Kadwa?selection.family=Kadwa

I dont get it, what I am doing wrong. Would be nice if somebody has a solution for that.

Upvotes: 2

Views: 196

Answers (1)

nwalton
nwalton

Reputation: 2061

It looks like that character is not being loaded with the font for some reason. You can actually force Google fonts to load a particular character or set of characters by including a text parameter in the request. (The characters must be url encoded.)

I've added an additional font request below that loads a font with only the arrow character. This supplements the Kadwa font that's already been loaded, and everything shows up correctly.

I've also converted the arrow character to an HTML entity (→).

@import url('https://fonts.googleapis.com/css?family=Kadwa');
@import url('https://fonts.googleapis.com/css?family=Kadwa&text=%E2%86%92');

body {
  font-family: "Kadwa";
}
This should have the correct arrow →

Upvotes: 2

Related Questions