Web fonts can help you project your brand or finesse your site design, but there's more than one way to use them. Web fonts are a great way to add custom fonts to your website. These fonts may not be available on a user’s system, so you need to include them in your project by hosting them or referencing them via a CDN. Learn how to include web fonts in a Next.js website using these two methods. Us
こんにちは!DA(データアナリティクス)事業本部 サービスソリューション部の大高です。 ウェブシステムでアイコンを表示させたい場合に活用できるアイコンライブリとしてFont Awesomeというライブリがあります。 このFont AwesomeをNext.jsで利用してみたので、利用方法をまとめたいと思います。 前提条件 今回試した環境は以下のとおりです。 Node.js 16.17.0 Next.js 12.2.5 また、パッケージマネージャには yarn を利用しています。 セットアップ 以下のドキュメントを参考にセットアップを行っていきます。 まずはプロジェクトに以下のようにパッケージのセットアップを行います。 # コアパッケージの導入 yarn add @fortawesome/fontawesome-svg-core # アイコンパッケージの導入 yarn add @fortaw
追記) v10.2からデフォルトでGoogle Fontsの最適化が行われるように Next.js v10.2から自動でWebフォントの最適化が行われるようになりました。v10.2時点ではGoogle Fontsにのみ対応しているとのことです。特に設定は不要で、いつも通りGoogle Fontsを読み込めばOKです。 ↓ 詳細 これより下の解説は古い内容になります。実装の参考にしないようお願いします。 以前、Next.jsのリポジトリを眺めていたときにFont Optimizationsというプルリクエストを見つけました。 2020年12月時点ではExperimantalな機能のようですが、v10.0.4で既に使えるようになっていたので試してみました。 :::message alertz Next.js v10.0.4でのドキュメントに則っていない記録になります。 ::: Font Opt
Vue.jsの人気がすごいですね。 いくつかの企業はすでにVue.jsを使い始めており、一部はメインのプロダクトに、一部は二次的なプロジェクトに使用しています。 Vue.jsへの関心が高まる中、人気が高いフレームワーク、そしてVue.jsをすでに採用している企業サイトを紹介します。 画像: vuejs.org Google, Apple and Other Users of Vue.js by Luca Spezzano 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Vue.jsはGoogleも採用している 人気が高いフレームワークは? Vue.jsを信頼している10大企業 まとめ Vue.jsはGoogleも採用している 先日、Googleの人材募集サイトにアクセスした際に私が注目したのは、Chromeの機能拡張でVue.j
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く