All posts tagged: Google Fonts

TumblrにGoogle Fontsを表示させる方法

Google FontsはPC環境に関係なくデザインFonts(文字)を表示できます Wordpressでも表示できますが今回はTumblrにHTMLとCSSコードを書き換えてみました ほとんどのTumblrユーザーはスマートフォン表示とパソコン表示では見え方が違うので「別にどうでも良いのでは?」というのもありますが ^^; 難しいのかなと思っていたら案外簡単にできたのでメモしておきます Google Fontsを見に行きましょう https://fonts.google.com/ デザインフォントがたくさんありますので好みのフォントを探します サンプルフォントを書き換えることができますのでイメージを膨らませてみましょう Nothing You Could Doというフォントを選んでみました 好みのフォントが見つかったら➕をクリックします ブラウザー画面の下にFamilies Selectedというリストが表示されますので好みのフォントが複数あれば➕をクリックしてリストに追加します(今回は4つのフォントを選択) 画面下のリスト(STANDARD)には使用したいGoogle Fontsを表示するためのHTMLとCSSが書き出されていますのでコピーをしておきます 英文にはGoogle Fontsの指定URL HTMLを<head>の下に貼りましょうと書いてあります @IMPORTをクリックして見るとCSSを<style>< / style>で貼り付けるシートが表示されます スタイルシートに詳しくないので今回は使いません m(__)m tumblrをiMacで開きます ログインしたらEdit appearanceをクリック 左サイドのEdit HTML >をクリック 表示されている全てのHTMLコードをBackupとしてコピーし保存しておきます←これ大事です! Macの場合テキストエディットに保存すると書式が変更されたように見えますよね? メモにも保存しておくと安心かもしれません HTMLコードを貼る箇所の<head>はすぐ見つかります 一行改行スペースを入れたらGoogle FontsのURLが書かれたコードを貼ります どこの部分でGoogle Fountsを使いたいかです 今回はbodyに書かれるフォントを変更します body { […]