Google Web Fontsっていうのを使ってみた記録

 

Google Web Fonts

Google Fonts のページを開くと、たくさんの Font が並んでいます。(今のところ、欧文フォントがほとんど。たくさんあるので目移りします。)

Font の一覧から気に入ったFontを見つけたら、「Add to Collection」を押すと、ページ下のCollectionに追加されるので、ページ右下の「Use」を押します。
 

 

 「Almost done!」と表示されたページに移動します。

 

下にスクロールすると、Code が表示されているので、Code をコピーします。

コピーしたCode を Font を適用したいHTMLファイルに挿入します。
コピーできる Code は3パターン(Standard 、@import 、JavaScript )あります。それぞれ試してみたところ、全て Font は適用されました。Standard は<head> の中に、 @import は<style> の中に 記述しました。JavaScript は、<body>の一番最後に追記しました。

 

Standard

<head>
<link href='http://fonts.googleapis.com/css?family=Shadows+Into+Light' rel='stylesheet' type='text/css'>
<style>



</style>
</head>

 

@import

<head>
<style>
@import url(http://fonts.googleapis.com/css?family=Shadows+Into+Light);
body {



</style>
</head> 

 

java script

  <body>

 <script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Shadows+Into+Light::latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); </script>
  </body>

 

あとは、ページのどの部分に適用するかを <style> のに定義すれば完成です。

<style>
/* Google Web Fontsを利用する */
body {
font-family: 'Shadows Into Light', cursive;
font-size: 20pt;
}
</style>
</head>

 ブラウザで表示すると、GoogleFont が適用されて表示されました。

 

 

 

Material Icons

Material icons も Font のように使用することができました。
 
Material icons も使用する前に、設定をします。
Material icons guide」を見ると詳しい説明があります。web site 向け以外にも、AndroidiOS向けの説明も記載されています。<head>の中に、<link>を記述します。(記述内容は、Material icons guide」からコピペ

 

<head>
  …
</head>

 

そして、<head>の中に<style>を追記します(記述内容は、Material icons guide」からコピペ設定されている値は、色々変えて試してみることをオススメします。
<head>
<style>
/* Material iconsを利用する */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons')
       local('MaterialIcons-Regular'),
       url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
       url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
       url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}
 
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 60px;  /* Preferred icon size */
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
 
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
 
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
 
  /* Support for IE. */
  font-feature-settings: 'liga';
}
</style>
</head>

 

設定が終わったら、Material icons から使いたい icon を選びます。

 

Iconを選ぶとページ下部に<i>タグのCodeが表示されるので、Code をコピーします。

 

 

HTML ファイルの Material icon を表示したい箇所に、コピーした Code を挿入します。

<body>
    <i class="material-icons">face</i>
    <i class="material-icons">stay_current_portrait</i>
    <i class="material-icons">directions_transit</i>
</body>

 

ブラウザで表示すると、Iconが表示されました。
 
Google Fonts も Material icons もダウンロードできますが、リンクして適用するのはとても簡単で便利でした。