webフォントの使い方
![](https://bouquet344olive.com/wp-content/themes/cocoon-master/images/man.png)
いつもいただくデザインが、割とフォントにこだわりがあるところで、いろんなフォントが使われています。なのでAdobeのフォントを使う機会が多いです。その他のwebフォントも少し書いておきます。これから使う人がいたらと思い、まとめてみました。割と簡単に設定できます。
Adobeフォント
![](http://bouquet344olive.com/wp-content/uploads/2022/01/valentines.png)
今回こちらのフォント、coffee-serviceというフォントを設定していきます。
①まず、Adobeフォントのページへログインします。フォントを検索します。
![](https://bouquet344olive.com/wp-content/uploads/cocoon-resources/blog-card-cache/1c269b688587f7a762658dcbac5c69b5.jpg)
②フォントが見つかったら、ディアクティベートをonにして、webプロジェクトに追加をクリックします。
![](http://bouquet344olive.com/wp-content/uploads/2022/01/Coffee-Service-Adobe-Fonts-1024x508.png)
![](http://bouquet344olive.com/wp-content/uploads/2022/01/Coffee-Service-Adobe-Fonts-1-1024x814.png)
③新規プロジェクトを作成するか、以前作成したものを選択します。
そして、作成ボタンを押します。
![](http://bouquet344olive.com/wp-content/uploads/2022/01/Coffee-Service-Adobe-Fonts-2-870x1024.png)
④scriptタグをコピーして、htmlのheadタグに貼り付けます。
下のコードをcssに書きます。
これで、Adobeフォントの設定は完了です。
googleフォント
![](http://bouquet344olive.com/wp-content/uploads/2022/01/sawarabimincho.png)
今回こちらのフォント、Sawarabi Minchoというフォントを設定していきます。
①まず、googleフォントのページへログインします。フォントを検索します。
![](https://bouquet344olive.com/wp-content/uploads/cocoon-resources/blog-card-cache/66a4fdbfed6478feccaf2fe37cbbef65.png)
②フォントが見つかったら、select this styleをクリックして、追加します。右上のアイコンをクリックして開きます。
![](http://bouquet344olive.com/wp-content/uploads/2022/01/Sawarabi-Mincho-Google-Fonts-1024x546.png)
![](http://bouquet344olive.com/wp-content/uploads/2022/01/Sawarabi-Mincho-Google-Fonts-1.png)
③リンクタグか、scriptタグをコピーして、htmlのheadタグに貼り付けます。
下のコードをcssに書きます。
これで、googleフォントの設定は完了です。
Cufon Fonts: Free Fonts for Desktop and WebFonts
![](http://bouquet344olive.com/wp-content/uploads/2022/01/Optima.png)
今回こちらのフォント、Optima Italicというフォントを設定していきます。
① まず、下記のページへログインします。フォントを検索します。
![](https://bouquet344olive.com/wp-content/uploads/cocoon-resources/blog-card-cache/5c7fe43a58b1605a2704caa9affd2439.jpg)
② @font-faceキットをpcにダウンロードします。
![](http://bouquet344olive.com/wp-content/uploads/2022/01/Optima-Font-Family-Download-Free-for-Desktop-Webfont-1-1024x502.png)
![](http://bouquet344olive.com/wp-content/uploads/2022/01/スクリーンショット-2022-01-20-16.53.45.png)
③ ダウンロードしたファイルから、Optima_Italic.woffのファイルを、fontsフォルダを作り入れます。階層はcssフォルダやjsフォルダと同じ場所で大丈夫です。
④ cssに下記のコードを書いて読み込みます。これでフォントの設定は完了です。
@font-face {
font-family: ’Optima Italic’;
src: local('Optima Italic'), url('../fonts/Optima_Italic.woff') format('woff');
src: local('Optima Italic'), url('../fonts/Optima_Italic.TTF') format('truetype');
}
.font-optima {
font-family: ’Optima Italic’;
}
参考にしたサイト https://onedarling.site/programming/wordpress/webfont/