Imagemagick and web fonts

Question

Does anyone know if ImageMagick can be powered by a web font? (Or perhaps feed in via STD IN?) I tried the line below with no luck:

convert -fill black -font http://fonts.googleapis.com/css?family=Diplomata+SC -pointsize 72 label:'Acme Dynamite Company, LLC' logo.png

My goal would be to let users choose a Google Web Font.

Beaux

Just an update - I've determined that it is possible to use the Google API to get a list of fonts, and then pull down a WOFF file via WGET, but ImageMagick doesn't appear to support WOFF format fonts. If someone knows of a Linux-based WOFF to TTF converter, I think I'll be home free.. – Beaux

where you able to use -font to point to a file like -font ./myfont.ttf ? – Incumbency

Answer 1

If you wget the GWF API, it returns a TTF url:

$ wget -qO- "http://fonts.googleapis.com/css?family=Diplomata+SC" | urlext2

http://themes.googleusercontent.com/static/fonts/diplomatasc/v1/JdVwAwfE1a_pahXjk5qpNonF5uFdDttMLvmWuJdhhgs.ttf

$

Apfel

Answer 2

Final update: The user barethon wrote a python woff to ttf converter, which works perfectly. (https://github.com/hanikesn/woff2otf/blob/master/woff2otf.py) I'm now able to rip down the font I want from Google, convert it to ttf and use it with imagemagick. Slightly more complicated than I would have liked, but no big deal.

Beaux

Answer 3

I know this is pretty old at this point, but in the interest of savings others some times, here is some basic PHP to do what you want. It could be optimized to use curl and such, but this should be enough to get people going. It appears that when accessed from a browser it returns a woff and woff2 url, but when accessed from anything else it returns a tff.

    $fontUrl = 'http://fonts.googleapis.com/css?family=Anton';
    $fontDescription = file_get_contents($fontUrl);

    $startStr = 'url(';
    $startStrLen = strlen($startStr);
    $start = strpos($fontDescription, $startStr) + $startStrLen;
    $end = strpos($fontDescription, ')', $start);
    $tffUrl = substr($fontDescription, $start, $end - $start);

    $tffFile = '/tmp/anton.ttf';
    file_put_contents($tffFile, file_get_contents($tffUrl));

    $im = new Imagick();
    $im->setFont($tffFile);
    $im->newPseudoImage(100, 100, "caption:Hello");
    $im->setImageFormat('png');
    $im->setImageBackgroundColor(new ImagickPixel('transparent'));
    header('Content-Type: image/png');
    echo $im->__toString();

Bello

Interesting Answer !! – Villose

Answer 4

Thank you to Floss for your approach to this problem. I solved it in a similar way.

The reason I used a random number rather than a static filename like font.ttf is in case other users were calling the function at the same time, it could create an issue.

1. Query the Google Fonts list

   $url = 'https://www.googleapis.com/webfonts/v1/webfonts?key=YOUR KEY HERE';
   
   $responseString = file_get_contents($url);
   $fontJSON = json_decode($responseString);
   

2. Access the url of the fonts like so:

   <select name="font">
     <?php foreach ($fontJSON->items as $font): ?>
       <option value="<?= $font->files->regular ?>"><?= $font->family ?></option>
     <?php endforeach; ?>
   </select>
   

   • Note that you'd have to do some other trickery to select the variants (like bold or italic) but that's beyond this post.

3. After passing the form data to the server, use it in the following way.

   //create a random number for a unique filename
   $random_number = intval( "0" . rand(1,9) . rand(0,9) . rand(0,9) . rand(0,9) . rand(0,9) );
   
   //download the TTF from Google's server
   $font_contents = file_get_contents($font);
   
   //Make a local file of a unique name
   $font_file = fopen("/tmp/$random_number.ttf", "w"); 
   
   //Write data from the Google Font file into your local file
   fwrite($font_file, $font_contents); 
   
   //Close the file
   fclose($font_file);
   
   //Set iMagick to use this temporary file
   $draw->setFont("/tmp/$random_number.ttf");
   
   //DO YOUR iMagick STUFF HERE
   

4. Delete the temporary font file

   unlink("tmp/$random_number.ttf"); //remove tmp font
   

Tombstone

Answer 5

You can use the following one liner to get the Google Web Font, that you need and then use it with imagemagick, subsequently:

wget -qO- 'https://fonts.googleapis.com/css?family=Noto+Sans:400' | grep -Eo 'http.*://[^ >]+' | sed 's/.ttf)/.ttf/' | wget -i - -O 'Noto Sans.ttf'

I then use the following script to generate text based thumbnails, with all my favorite ttf font files, copied to the same folder before:

ls -1 *.ttf | while read line
do
magick -gravity center -background '#086cdf' -fill '#f1fffe' -size 490x400 -font "$line" caption:"Sample Text" -background red -extent 500x500 "$(echo "$line"|sed 's/.ttf/_icon.png/')"
done

The above script generates icon sized thumbnails with size of 500x500 pixels.

For social media platforms like youtube, thumbnails must be of size 1280x720 for which i use the following script, to generate it:

ls -1 *.ttf | while read line
do
magick -gravity center -background '#086cdf' -fill '#f1fffe' -size 1270x620 -font "$line" caption:"Sample Text" -background red -extent 1280x720 "$(echo "$line"|sed 's/.ttf/_Social_Media_Platforms.png/')"
done

Hope all these scripts help someone googling for a solution.

Deimos