9
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

CloudinaryがテキストオーバーレイでサポートしているGoogle Fontを調べてみた

Last updated at Posted at 2018-12-08

#困ったこと
CloudinaryのテキストオーバーレイがGoogleのウェブフォントをサポートしていると書いてあったのですが、日本語フォントを指定してみたのですが、ことごとく400エラーが返ってきてしまいました。Googleフォントのうち、どのフォントが使えるのか、全部のフォントを総当たりして確認してみました。

2018年12月8日時点で904フォント登録されてますが、日本語が使えるのは12フォントだけです。
https://fonts.google.com/?subset=japanese

  1. Kosugi
  2. [Kosugi Maru](https://fonts.google.com/specimen/Kosugi Maru)
  3. [M PLUS 1p](https://fonts.google.com/specimen/M PLUS 1p)
  4. [M PLUS Rounded 1c](https://fonts.google.com/specimen/M PLUS Rounded 1c)
  5. [Noto Sans JP](https://fonts.google.com/specimen/Noto Sans JP)
  6. [Noto Sans SC](https://fonts.google.com/specimen/Noto Sans SC)
  7. [Noto Sans TC](https://fonts.google.com/specimen/Noto Sans TC)
  8. [Noto Serif JP](https://fonts.google.com/specimen/Noto Serif JP)
  9. [Noto Serif SC](https://fonts.google.com/specimen/Noto Serif SC)
  10. [Noto Serif TC](https://fonts.google.com/specimen/Noto Serif TC)
  11. [Sawarabi Gothic](https://fonts.google.com/specimen/Sawarabi Gothic)
  12. [Sawarabi Mincho](https://fonts.google.com/specimen/Sawarabi Mincho)

2020年1月4日時点で977フォント登録されてますが、日本語が使えるのは8フォントだけです。
https://fonts.google.com/?subset=japanese

  1. Kosugi
  2. [Kosugi Maru](https://fonts.google.com/specimen/Kosugi Maru)
  3. [M PLUS 1p](https://fonts.google.com/specimen/M PLUS 1p)
  4. [M PLUS Rounded 1c](https://fonts.google.com/specimen/M PLUS Rounded 1c)
  5. [Noto Sans JP](https://fonts.google.com/specimen/Noto Sans JP)
  6. [Noto Serif JP](https://fonts.google.com/specimen/Noto Serif JP)
  7. [Sawarabi Gothic](https://fonts.google.com/specimen/Sawarabi Gothic)
  8. [Sawarabi Mincho](https://fonts.google.com/specimen/Sawarabi Mincho)

結果から言うと、CloudinaryのTextオーバーレイで使えるフォントはSawarabi GothicSawarabi Minchoが使えました。他はNGでした。

Sawarabi Gothic

Sawarabi Mincho

#使ったもの
PHP
Cloudinary
google fonts (https://fonts.google.com/)
developer API (https://developers.google.com/fonts/docs/developer_api)

#やったこと

  1. google APIでfont familyの一覧を取り出し
  2. CloudinaryのURLを組み立ててリクエストを投げて
  3. HTTPのステータスコードを取り出す

##コード
cloud_nameとlimitは適当に変えてください。

<?php
$google_api_token = 'xxx-yyy';
$font_api_url = 'https://www.googleapis.com/webfonts/v1/webfonts?key=' . $google_api_token;
$cloud_name ='demo';
$limit = 100;

$font_json = file_get_contents($font_api_url);
$font_list = json_decode($font_json, true);

$curl = curl_init();
curl_setopt($curl, CURLOPT_CUSTOMREQUEST, 'GET');
curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false); 
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
curl_setopt($curl, CURLOPT_HEADER, true);

$result =[
    '200'=>[],'400'=>[],
];

foreach($font_list['items']??[] as $n=>$font){
    $font_family = $font['family'];
    echo ($n+1).'/'.count($font_list['items']) . " " . $font_family . PHP_EOL;

    $cloudinary_url = "https://res.cloudinary.com/$cloud_name/l_text:". 
        rawurlencode($font_family).
        '_40_center:ABC,co_rgb:ffffff/sample.jpg';

    echo $cloudinary_url . PHP_EOL;

    curl_setopt($curl, CURLOPT_URL, $cloudinary_url);

    $response = curl_exec($curl);
    $code = curl_getinfo($curl, CURLINFO_HTTP_CODE);
    $header_size = curl_getinfo($curl, CURLINFO_HEADER_SIZE); 
    $header = substr($response, 0, $header_size);

    echo $code . ' ' . $font_family . PHP_EOL;
    // echo $header . PHP_EOL;
    
    if( preg_match('/x-cld-error: (.*)/i', $header, $_)){
        echo $_[1] . PHP_EOL;
    }

    $result[$code][]=$font_family;

    if( $n+1 >= $limit ){
        break;
    }
    echo PHP_EOL;
}

var_dump($result['200']);
var_dump($result['400']);

echo "end of batch";

##結果
907フォント中、71フォントが使えませんでした。NotoとかM+が使えないのが残念です。

  1. [Bai Jamjuree](https://fonts.google.com/specimen/Bai Jamjuree)
  2. [Black And White Picture](https://fonts.google.com/specimen/Black And White Picture)
  3. [Black Han Sans](https://fonts.google.com/specimen/Black Han Sans)
  4. [Cantora One](https://fonts.google.com/specimen/Cantora One)
  5. [Chakra Petch](https://fonts.google.com/specimen/Chakra Petch)
  6. Charmonman
  7. [Cute Font](https://fonts.google.com/specimen/Cute Font)
  8. [David Libre](https://fonts.google.com/specimen/David Libre)
  9. [Do Hyeon](https://fonts.google.com/specimen/Do Hyeon)
  10. Dokdo
  11. [East Sea Dokdo](https://fonts.google.com/specimen/East Sea Dokdo)
  12. Fahkwang
  13. [Fjord One](https://fonts.google.com/specimen/Fjord One)
  14. Gaegu
  15. [Gamja Flower](https://fonts.google.com/specimen/Gamja Flower)
  16. [Gothic A1](https://fonts.google.com/specimen/Gothic A1)
  17. Gugi
  18. [Hammersmith One](https://fonts.google.com/specimen/Hammersmith One)
  19. [Headland One](https://fonts.google.com/specimen/Headland One)
  20. [Hi Melody](https://fonts.google.com/specimen/Hi Melody)
  21. [IBM Plex Mono](https://fonts.google.com/specimen/IBM Plex Mono)
  22. [IBM Plex Sans](https://fonts.google.com/specimen/IBM Plex Sans)
  23. [IBM Plex Sans Condensed](https://fonts.google.com/specimen/IBM Plex Sans Condensed)
  24. [IBM Plex Serif](https://fonts.google.com/specimen/IBM Plex Serif)
  25. Jua
  26. K2D
  27. Kantumruy
  28. [Kirang Haerang](https://fonts.google.com/specimen/Kirang Haerang)
  29. KoHo
  30. Kodchasan
  31. Kosugi
  32. [Kosugi Maru](https://fonts.google.com/specimen/Kosugi Maru)
  33. Krub
  34. [Kumar One Outline](https://fonts.google.com/specimen/Kumar One Outline)
  35. [M PLUS 1p](https://fonts.google.com/specimen/M PLUS 1p)
  36. [M PLUS Rounded 1c](https://fonts.google.com/specimen/M PLUS Rounded 1c)
  37. Mali
  38. [Markazi Text](https://fonts.google.com/specimen/Markazi Text)
  39. Moulpali
  40. [Nanum Gothic](https://fonts.google.com/specimen/Nanum Gothic)
  41. [Nanum Gothic Coding](https://fonts.google.com/specimen/Nanum Gothic Coding)
  42. [Nanum Myeongjo](https://fonts.google.com/specimen/Nanum Myeongjo)
  43. [Nanum Pen Script](https://fonts.google.com/specimen/Nanum Pen Script)
  44. Niramit
  45. Nokora
  46. Notable
  47. [Noto Sans JP](https://fonts.google.com/specimen/Noto Sans JP)
  48. [Noto Sans KR](https://fonts.google.com/specimen/Noto Sans KR)
  49. [Noto Sans SC](https://fonts.google.com/specimen/Noto Sans SC)
  50. [Noto Sans TC](https://fonts.google.com/specimen/Noto Sans TC)
  51. [Noto Serif JP](https://fonts.google.com/specimen/Noto Serif JP)
  52. [Noto Serif KR](https://fonts.google.com/specimen/Noto Serif KR)
  53. [Noto Serif SC](https://fonts.google.com/specimen/Noto Serif SC)
  54. [Noto Serif TC](https://fonts.google.com/specimen/Noto Serif TC)
  55. [Odor Mean Chey](https://fonts.google.com/specimen/Odor Mean Chey)
  56. [Poor Story](https://fonts.google.com/specimen/Poor Story)
  57. Preahvihear
  58. [Raleway Dots](https://fonts.google.com/specimen/Raleway Dots)
  59. [Saira Extra Condensed](https://fonts.google.com/specimen/Saira Extra Condensed)
  60. [Saira Semi Condensed](https://fonts.google.com/specimen/Saira Semi Condensed)
  61. [Sirin Stencil](https://fonts.google.com/specimen/Sirin Stencil)
  62. [Song Myung](https://fonts.google.com/specimen/Song Myung)
  63. Srisakdi
  64. Stylish
  65. [Sue Ellen Francisco](https://fonts.google.com/specimen/Sue Ellen Francisco)
  66. Sunflower
  67. [Supermercado One](https://fonts.google.com/specimen/Supermercado One)
  68. Suwannaphum
  69. Tajawal
  70. Vidaloka
  71. [Yeon Sung](https://fonts.google.com/specimen/Yeon Sung)

2020年1月4日時点で141フォントがNGです。

#参考資料
What is the list of supported fonts for text overlay transformation?
https://support.cloudinary.com/hc/en-us/articles/203352832

9
4
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?