Google Web Fontsっていうのを使ってみた記録
Google Web Fonts
Google Fonts のページを開くと、たくさんの Font が並んでいます。(今のところ、欧文フォントがほとんど。たくさんあるので目移りします。)
「Almost done!」と表示されたページに移動します。
下にスクロールすると、Code が表示されているので、Code をコピーします。
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>
/* Google Web Fontsを利用する */
body {
font-family: 'Shadows Into Light', cursive;
font-size: 20pt;
}
</style>
</head>
ブラウザで表示すると、GoogleFont が適用されて表示されました。
Material Icons
<head><link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">…</head>
<head><link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"><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;text-rendering: optimizeLegibility;/* Support for Firefox. */-moz-osx-font-smoothing: grayscale;/* Support for IE. */font-feature-settings: 'liga';}</style></head>
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>