WEBデザインの勉強

WEB制作初心者が1から勉強するブログ。

Google Fonts いろいろメモ

f:id:mmmmofu:20161004163709p:plain

GoogleFontsを色々試したもの
http://efu.sakura.ne.jp/web/googlefonts/

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Google Fonts</title>
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lora:700">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:700">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Anton">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Bubbler+One">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Pathway+Gothic+One">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sorts+Mill+Goudy">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Vollkorn">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Merriweather">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rokkitt">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Arvo">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cutive+Mono">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Josefin+Slab">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Amatic+SC">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rock+Salt">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Great+Vibes">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kite+One">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Londrina+Solid">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Special+Elite">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Londrina+Shadow">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Londrina+Sketch">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Londrina+Outline">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Pacifico">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Miltonian">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Miltonian+Tattoo">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Annie+Use+Your+Telescope">
  <link href="https://fonts.googleapis.com/css?family=Caveat" rel="stylesheet">
</head>
<body>
	<p class="normal">normal</p>
	<p class="normal2">YuGothic 游ゴシック</p>
	<p class="lara">Lora Bold 700</p>
	<p class="opensans">Open Sans</p>
	<p class="loto">Loto</p>
	<p class="myriad">Myriad</p>
	<p class="roboto">Roboto</p>
	<p class="anton">Anton</p>
	<p class="bubblerone">Bubbler One</p>
	<p class="nunito">Nunito</p>
	<p class="pgo">Pathway Gothic One</p>
	<p class="smg">Sorts Mill Goudy</p>
	<p class="vollkorn">Vollkorn</p>
	<p class="merriweather">Merriweather</p>
	<p class="rokkitt">Rokkitt</p>
	<p class="arvo">Arvo</p>
	<p class="mono">Cutive Mono</p>
	<p class="josefinslab">Josefin Slab</p>
	<p class="amaticsc"> Amatic SC</p>
	<p class="rocksalt">Rock Salt</p>
	<p class="greatvibes">Great Vibes</p>
	<p class="kiteone">Kite One</p>
	<p class="londrinasolid">Londrina Solid</p>
	<p class="londrinashadow">Londrina Shadow</p>
	<p class="londrinasketch">Londrina Sketch</p>
	<p class="londrinaoutline">Londrina Outline</p>
	<p class="specialelite">Special Elite</p>
	<p class="pacifico">Pacifico</p>
	<p class="miltonian">Miltonian</p>
	<p class="miltoniantattoo">Miltonian Tattoo</p>
	<p class="auyt">Annie Use Your Telescope</p>
	<p class="caveat">Caveat</p>
</body>
</html>

CSS

p {
  font-size: 40px;
}
.normal {
  letter-spacing: 1.8px;
}
.normal2 {
  font-family:
    "游ゴシック",
    YuGothic,
    "ヒラギノ角ゴ ProN W3",
    "Hiragino Kaku Gothic ProN",
    "メイリオ",
    Meiryo,
    "Helvetica Neue",
    Helvetica, Arial, sans-serif;
  letter-spacing: 1.8px;
}
.lara {
  font-family: 'Lora', serif;
  letter-spacing: 2px;
}
.opensans {
  font-family: 'Open Sans', sans-serif;
  letter-spacing: 1.8px;
}
.loto {
  font-family: 'Lato', sans-serif;
  letter-spacing: 1.8px;
}
.myriad {
  font-family: 'Montserrat', sans-serif;
}
.roboto {
  font-family: 'Roboto', sans-serif;
}
.anton {
  font-family: 'Anton', sans-serif;
  letter-spacing: 1.5px;
}
.bubblerone {
  font-family: 'Bubbler One', sans-serif;
}
.nunito {
  font-family: 'Nunito', sans-serif;
}
.pgo {
  font-family: 'Pathway Gothic One', sans-serif;
}
.smg {
  font-family: 'Sorts Mill Goudy', serif;
}
.vollkorn {
  font-family: 'Vollkorn', serif;
}
.merriweather {
  font-family: 'Merriweather', serif;
}
.rokkitt {
  font-family: 'Rokkitt', serif;
}
.arvo {
  font-family: 'Arvo', serif;
}
.mono {
  font-family: 'Cutive Mono' ;
}
.josefinslab {
  font-family: 'Josefin Slab', serif;
}
.amaticsc {
  font-family: 'Amatic SC', cursive;
}
.rocksalt {
  font-family: 'Rock Salt', cursive;
}
.greatvibes {
  font-family: 'Great Vibes', cursive;
}
.kiteone {
  font-family: 'Kite One', sans-serif;
}
.londrinasolid {
  font-family: 'Londrina Solid', cursive;
}
.londrinashadow {
  font-family: 'Londrina Shadow', cursive;
}
.londrinasketch {
  font-family: 'Londrina Sketch', cursive;
}
.londrinaoutline {
  font-family: 'Londrina Outline', cursive;
}
.specialelite {
  font-family: 'Special Elite', cursive;
}
.pacifico {
  font-family: 'Pacifico', cursive;
}
.miltonian {
  font-family: 'Miltonian', cursive;
}
.miltoniantattoo {
  font-family: 'Miltonian Tattoo', cursive;
}
.auyt {
  font-family: 'Annie Use Your Telescope', cursive;
}
.caveat {
  font-family: 'Caveat', cursive;
}