Oftentimes, when you want to use a web font on your banner/ad using Google Web designer, you know in advance which letters you’ll need, so, for this task Google Fonts API is the best way to go.
The problems comes when you try your banner in browsers, the text may look fine in Chrome, but in Safari the story is different.
Let’s take a look at this comparison (Chrome left, Safari right) :
In this banner example we are using the following fonts: Source Code Pro, Cinzel and Roboto Bold Italic, all available at Google fonts.
As you can see, the texts in the safari looks very different, a little off and even the last one just jump one line.
this may occur because Some of the fonts in the Google Font Directory support multiple scripts (like Latin, Cyrillic, and Greek for example). In order to specify which subsets should be downloaded the subset parameter should be appended to the URL.
So, to fix that:
- First go to Google fonts, and search for the font needed for your banner, then select the option customize and make sure to select all the languages available
- Then, go to the embed option and copy the href link with the subset parameter.
- Finally, go to Google web designer, clic at code view, search for the line where the style of the font has an URL, and paste to replace it with the new link:
Now the problem is solved!. Look how the text is rendering correctly in Safari, and even there`s no row line problem anymore:
