この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
どうも！大阪オフィスの西村祐二です。
今回はGoogle Fontsで提供されているwebフォントを使って、Angular6で作ったサイトのフォントを変更してみたいと思います。
ちなみに、Google FontsはGoogle が提供している Web Fonts のサイトです。無料で利用することができます。
日本語のフォントも利用可能
数は少ないですが、日本語フォントも利用できます。もちろん無料です。
https://googlefonts.github.io/japanese/
Angular6で作ったサイトの日本語フォントをかえてみる
環境
- Angular CLI: 6.0.8
- Node: 9.6.1
- OS: darwin x64
- Angular: 6.0.4
利用フォント
フォントが変更されているか確認しやすいように、「ニコモジ Nico Moji」というフォントを適用してみたいと思います。
サイト作成
Angular CLIインストール
$ npm install -g@latest雛形作成
$ ng new web-font
$ cd web-fontデフォルトのページを下記に編集
$ vi src/app/app.component.html
<h1>まいど！おおきに！</h1>ローカルサーバを起動して確認
$ ng serve --open自動的にページが開き、下記のようになるかと思います。
Webフォントの設定
サイトからHTMLとCSSをコピーしておきます。
https://googlefonts.github.io/japanese/#nicomoji
サイト全体に設定できるsrc/index.htmlのheadタグ内にコピーした値を追加します。
$ vi src/index.htmlindex.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Tutorial</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/earlyaccess/nicomoji.css" rel="stylesheet" />
</head>
<body>
<app-root></app-root>
</body>
</html>サイト全体のスタイルを設定できるsrc/styles.cssのコピーした値を追加します。スコープはhtml,bodyに変更しています。
$ vi src/styles.css/* You can add global styles to this file, and also import other style files */
html, body {
font-family: "Nico Moji";
}これで設定は完了です。ブラウザに戻ると、フォントが適用されています。
さいごに
いかがだったでしょうか。
Google Fontsで提供されているwebフォントを使って、Angular6で作ったサイトのフォントを変更してみました。
誰かの参考になれば幸いです。
21
