Googleの日本語ウェブフォント「Rounded M + 1c」をTumblrに設置

Googleが公開している日本語のデザイナーウェブフォント「Rounded M + 1c」を、Tumblrブログに設置した。
お気に入りだらけのあなたのTumblrに、もうひとつお気に入りを加えてみませんか?

Rounded M + 1c

アクが出るようなクセはなく、読みやすいながら、なんとなく印象に残る。
ほのかな柔らかさが気に入って、迷走していたフォント選びもやっと落ち着いた。
先日、このWordPressのブログにも設置して、しっくりきたかなぁと自己満足中。
このフォントの存在を僕に教えてくれたあきさんがおっしゃるように、ゆる〜いアンプラグドな僕のブログとは相性がいいのだろう。

Googleの日本語ウェブフォント「Rounded M + 1c」をWordPressに設置 | COCOLO CHRONICLE

Googleが公開している 日本語のデザイナーウェブフォント「Rounded M + 1c」を、このWordPressのブログに設置してみた。 設置はカンタンで、以前、 Noto Sans CJK JP を試した時よりも、遅延が気にならない。


全部で9種類のフォントが公開されているので、あなた好みのものが見つかるかもしれない。

Google Fonts + 日本語 早期アクセス * Google Fonts + Japanese Early Access

設置方法はコチラ

1.ブラウザからEdit theme>HTMLを編集を開く

カスタマイズ___Tumblr

2.HTMLにコードをコピぺして編集

headにリンクをコピペして、font-familyを置き換える。

t<!DOCTYPE html>
<!–[if IE 8]><html class=”lt-ie10 lt-ie9″> <![endif]–>
<!–[if IE 9]><html class=”lt-ie10″> <![endif]–>
<!–[if gt IE 9]><!–> <html> <!–<![endif]–>
<head>
<link href=”https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css” rel=”stylesheet” /
{MobileAppHeaders}
<meta charset=”utf-8″>
<title>{Title}{block:SearchPage} ({lang:Search results for SearchQuery}){/block:SearchPage}{block:PermalinkPage}{block:PostSummary} — {PostSummary}{/block:PostSummary}{/block:PermalinkPage}</title>
{block:Description}
<meta name=”description” content=”{MetaDescription}”>
{/block:Description}

{block:Hidden}
<meta name=”if:Sliding header” content=”1″>
<meta name=”if:Show navigation” content=”1″>
<meta name=”if:Endless scrolling” content=”1″>
<meta name=”select:Layout” content=”regular” title=”Regular”>
<meta name=”select:Layout” content=”narrow” title=”Narrow”>
<meta name=”select:Layout” content=”grid” title=”Grid”>
<meta name=”text:Disqus shortname” content=””>
<meta name=”text:Google analytics ID” content=””>
{/block:Hidden}

<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no”>
<link rel=”shortcut icon” href=”{Favicon}”>
<link rel=”apple-touch-icon-precomposed” href=”{PortraitURL-128}”>
<link rel=”alternate” type=”application/rss+xml” href=”{RSS}”>

<link rel=”stylesheet” href=”http://static.tumblr.com/wqcsqza/yTRnpu5wi/main-min.css”>

<!– HTML5 Shiv –>
<!–[if lt IE 9]>
<script src=”http://static.tumblr.com/hriofhd/Qj0m8pn7q/html5shiv.js”></script>
<![endif]–>

<style>
/* Colors */
body {
background: {BackgroundColor};
}

.blog-title {
font-family: {TitleFont}, “Rounded Mplus 1c”; sans-serif;
font-weight: {TitleFontWeight};
}

3.詳細設定>カスタムCSSを追加

カスタマイズ___Tumblr 2

さらにカスタムCSSを追加する。
僕が使用しているテーマはOpticaなので、こちらを参考に。

https://optica-tests.tumblr.com/post/80687073323/change-body-font

しかし、これだけではうまくカバーすることができなかった。
ここから先は、ググれどもググれども、我が作業いっこうにはかどらず。
なかなか有益な情報に巡り会うことができなかった。
困りに困って、先日WordPressで使用したCSSを流用してみた。

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video
{
font-family: “Rounded Mplus 1c”; sans-serif;
}

Congrats ! It works !
なにせこちとら「本質と基本」を理解していないオトコ。
まったく裏は取れていないし、正解かどうかもわからないし、わかっているお方から見ればアレかもしれないけれど…
まあなんとかなったことを良しとしよう。

さらに、フォントサイズも大きくしてみた。

body,.blog-title a {
font-size: 18px;
}

https://optica-tests.tumblr.com/post/57432593967/changing-font-size-of-headers-and-post-text

ひとつだけクリアできないことが

ほぼうまく表示されているのだけれど、ひとつだけ解決できていないことがある。
それは、テキストをリブログしたもので、フォントが適用できているものとできていないものが混在していること。

Tumblrフォント混在

見る人が見れば、すぐに解決できるのかもしれないけれど、僕はここでギブアップ。
しかし、自分が書いたテキストは間違いなくフォントがあてられているようなので、Tumblrをブログとして利用している人たちには、問題になることはないんじゃないだろうか。

ブラウザからどれほどの?

いったいブラウザからどれほどの人がやってくるのだろう?
もうすでにTumblrにどっぷりDopeな人たちは、ダッシュボードかiOSアプリ経由っていうのが大多数だろう。
今回あくせく設置したウェブフォントは、ブラウザで見る以外は、完璧にシカトされて存在も消えてしまう。
そんなことに、こうして労力をかけるのは、全くもってくだらない。
そう、くだらない。
だからこそ、僕のTumblrにふさわしい!
ただ綺麗なもの、ただくだらないもの、だけどお気に入りのものであふれている僕のTumblr。
そこに、役に立つかどうかはわからないけれど気に入っているフォントをあてがうのは、とても自然なことのように思える。

ご自分のTumblrに、もうひとつお気に入りを加えてみたいあなた。
ぜひ、お試しあれ!


Also published on Medium.

Filed under: Tumblr

About the Author

Posted by

Reblogger in Tokyo「タフでクールで そしてヒューマンタッチ」TumblrにどっぷりDopeな「無色匿名」の男。iPhoneとMacBookを使いこなすどころか逆に使われっぱなし。ミニマルなブログに挫折してアンプラグド・ブログを運営中。