Google fonts in a desktop app

General
1

I’m using an HTMLViewer to render some data, and my CSS is this:

@import url(‘http://fonts.googleapis.com/css?family=Open+Sans’);
body { margin: 0; padding: 0; font-family: ‘Open+Sans’; font-size: 14px; }

But the text isn’t updating. Did I miss an obvious step somewhere?

2

According to the page https://developers.google.com/fonts/docs/getting_started you need to start your page with

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name">

and then use it in a div with such code as

<div style="font-family: 'Font Name', serif;">Your text</div>

No mention of ‘import url’ …

On Windows, the native renderer does not seem to be compatible with Google fonts. But you can load the sample posted at the page above for the Tangerine font using the WebKit renderer, and it displays perfectly.

3

i need to do something similar but need to be able to create pdf from the html using wkhtmltopdf. The pdf i got is ignoring the web font.

4

Indeed wkhtmltppdf does not seem to support web fonts. This is a relatively recent technology, so it may not be quite up to snuff. There maybe other tools around better equipped.

There are several ways fonts can be put into PDF. If I use HTMLViewer.Print and select print to PDF on the Mac, it does generate a PDF with the Google font. But sometimes the PDF generator tries to embed the fonts and if a font is not set for embedding, it will generate an error. That is the case for Adobe Acrobat. I guess other tools simply use the vectors generated by the printing application.

The HTMLViewer is not the most friendly control for this kind of thing, as its print feature is quite limited.

6

This might be something?
http://blog.shahariaazam.com/use-google-web-fonts-for-wkhtmltopdf-tools/#.U90LOe3y0wJ

7

[quote=116890:@Albin Kiland]This might be something?
http://blog.shahariaazam.com/use-google-web-fonts-for-wkhtmltopdf-tools/#.U90LOe3y0wJ[/quote]

That’s real nice. Thank you Albin :slight_smile:

8

I try that… and all i got is a 4 page of blank screen when i use the older version of the wkhtmltopdf (dated Jan 2012).

When i use the latest version (July 2014), the font show up correctly BUT the font size is wrong and also the spacing for the labels.

9

It is a bit late for me (00:53) but I think I found a way to get the TTF fonts at https://developers.google.com/fonts/docs/developer_api

In the dynamic list of fonts provided by the API, for instance, the Antic V4 font URL
http://themes.googleusercontent.com/static/fonts/antic/v4/hEa8XCNM7tXGzD0Uk0AipA.ttf
is in fact a link to a real TrueType TTF font, which will download to the disk.

Then here is the idea :

  • Get the list of Google fonts used in the HTML page source
  • Use the API to get the TTF files for all these fonts
  • Install them locally on your computer

If a font is available locally, it will be used by wkhtmltopdf instead of the remote one.

After installing Tangerine.ttf, I got a perfect PDF from the sample HTML using the Tangerine font showed at https://developers.google.com/fonts/docs/getting_started

This is a manual process, but it works.

10

it is 00:32 over here. when u say install locally on the my user machine, does it mean include in the folder for your application or real installation to the font folder??

11

Real installation in the Fonts folder.