安裝Google字型到Next.js 教學

JayLinXR-avatar-img
JayLinXR
發佈於軟體開發
更新 發佈閱讀 1 分鐘

當你有客製化的字型在Google Font裡面，但是又不知道如何導入到Next.js嗎?

這一集教大家如何從Google Font導入Next.js和做一個導覽列


影片教學


注:此為Next.js 12版本，後續會推出新版本教學，別忘記記得追蹤呦


總結

  • Google Font具有眾多免費字型，Next.js 13 自動加入Module只要引入即可使用


更多相關教學文章持續更新，請別忘記追蹤呦

JayLinXR YT: https://www.youtube.com/@jaylinxr

JayLinXR IG: https://www.instagram.com/jaylin_xr/





JayLinXR軟體開發
留言
avatar-img
JayLinXR
13會員
39內容數
設計 + 程式，是一個出版對設計和程式的學習影片和教學文章，目的是為了讓大家能加快學習最新技術以及設計相關題目去思考如何改變產品的設計體驗。 請追蹤JayLinXR獲得最新消息: https://www.youtube.com/@jaylinxr
JayLinXR的其他內容
2024/05/22
使用 React Marquee 創建流暢的跑馬燈效果
React Marquee是一個輕量級的React library，可以在網頁上創建流暢的跑馬燈效果。本文提供快速教學和講解，教大家如何安裝、使用React跑馬燈library官方網站。另外，也分享了額外的資源和相關教學文章。希望透過以上講解和影片教學，能幫助大家瞭解這個library。
Thumbnail
2024/05/22
使用 React Marquee 創建流暢的跑馬燈效果
React Marquee是一個輕量級的React library，可以在網頁上創建流暢的跑馬燈效果。本文提供快速教學和講解，教大家如何安裝、使用React跑馬燈library官方網站。另外，也分享了額外的資源和相關教學文章。希望透過以上講解和影片教學，能幫助大家瞭解這個library。
Thumbnail
2024/05/03
Vite前端工具加入Tailwindcss教學
本文介紹如何使用Vite建立前端開發初始檔案，並加入Tailwindcss的教學。透過指令和配置檔，讓你能快速建立個人專案的開發環境，並學習如何加入全域的Tailwindcss樣式。還有影片教學、資源連結和更多相關教學文章等，幫助你進一步學習。
Thumbnail
2024/05/03
Vite前端工具加入Tailwindcss教學
本文介紹如何使用Vite建立前端開發初始檔案，並加入Tailwindcss的教學。透過指令和配置檔，讓你能快速建立個人專案的開發環境，並學習如何加入全域的Tailwindcss樣式。還有影片教學、資源連結和更多相關教學文章等，幫助你進一步學習。
Thumbnail
2024/04/27
使用Vite工具創建開發初始檔案的教學
這一集用最新的Vite工具去創建初始檔案。Vite用於創建和構建Web應用程序，具有快速的啟動時間、即時熱更新、小型體積、支持多種框架和可擴展性等優點。
Thumbnail
2024/04/27
使用Vite工具創建開發初始檔案的教學
這一集用最新的Vite工具去創建初始檔案。Vite用於創建和構建Web應用程序，具有快速的啟動時間、即時熱更新、小型體積、支持多種框架和可擴展性等優點。
Thumbnail
看更多
你可能也想看
Thumbnail
avatar-avatar
黛•Adele的生活隨筆
開車族必辦神卡！加油補給輕鬆賺回饋，限時倒數！玉山 Unicard 最高 7.5% 回饋放大你的旅程！
我每週都會為自己設計一趟小旅行，像是給日常的一個深呼吸。準備著簡單的行李，在導航上設定好今天想去的地方，播放一張剛好符合心情的歌單，一場逃離日常的小旅行就此展開。 說走就走的自由很浪漫，但背後的現實是，從加油、路途中補給、到抵達目的地的小花費，每一筆都需要精打細算，才能不讓放鬆變成負擔。好在有玉山
#玉山銀行#玉山Unicard#信用卡
Thumbnail
avatar-avatar
黛•Adele的生活隨筆
開車族必辦神卡！加油補給輕鬆賺回饋，限時倒數！玉山 Unicard 最高 7.5% 回饋放大你的旅程！
我每週都會為自己設計一趟小旅行，像是給日常的一個深呼吸。準備著簡單的行李，在導航上設定好今天想去的地方，播放一張剛好符合心情的歌單，一場逃離日常的小旅行就此展開。 說走就走的自由很浪漫，但背後的現實是，從加油、路途中補給、到抵達目的地的小花費，每一筆都需要精打細算，才能不讓放鬆變成負擔。好在有玉山
#玉山銀行#玉山Unicard#信用卡
Thumbnail
avatar-avatar
小芝女看天下
【小資族真心推】用玉山Unicard，把每個月日常消費變成 7.5% 回饋！
本文介紹玉山銀行推出的玉山 Unicard，是一張非常符合「小資族、學生、上班族都好上手」的高回饋信用卡！三種回饋方案自由切換，行動支付、百貨、旅遊、百大指定通路全面涵蓋，新戶最高享 7.5% 回饋。回饋透明、操作簡單，非常推薦學生、小資族與上班族。
#玉山銀行#玉山Unicard#信用卡
Thumbnail
avatar-avatar
小芝女看天下
【小資族真心推】用玉山Unicard，把每個月日常消費變成 7.5% 回饋！
本文介紹玉山銀行推出的玉山 Unicard，是一張非常符合「小資族、學生、上班族都好上手」的高回饋信用卡！三種回饋方案自由切換，行動支付、百貨、旅遊、百大指定通路全面涵蓋，新戶最高享 7.5% 回饋。回饋透明、操作簡單，非常推薦學生、小資族與上班族。
#玉山銀行#玉山Unicard#信用卡
Thumbnail
avatar-avatar
週報時光機的沙龍
吃飯沒帶錢包讓信用卡誕生了？體驗玉山Unicard，把握倒數機會在百大指定消費輕鬆消費，享有最高7.5%回饋！
信用卡如今已是現代人日常消費的必需品。回顧其誕生，竟源於一段用餐忘記帶錢的窘境。本文將帶您瞭解信用卡的故事，並介紹「玉山Unicard」，一張涵蓋百大通路、提供彈性回饋的信用卡，尤其適合追求方便與高回饋的消費者。文章將分享誠品生活、全盈+PAY等實際使用情境，並提供新戶申辦優惠資訊。
#玉山銀行#玉山Unicard#信用卡
Thumbnail
avatar-avatar
週報時光機的沙龍
吃飯沒帶錢包讓信用卡誕生了？體驗玉山Unicard，把握倒數機會在百大指定消費輕鬆消費，享有最高7.5%回饋！
信用卡如今已是現代人日常消費的必需品。回顧其誕生，竟源於一段用餐忘記帶錢的窘境。本文將帶您瞭解信用卡的故事，並介紹「玉山Unicard」，一張涵蓋百大通路、提供彈性回饋的信用卡，尤其適合追求方便與高回饋的消費者。文章將分享誠品生活、全盈+PAY等實際使用情境，並提供新戶申辦優惠資訊。
#玉山銀行#玉山Unicard#信用卡
Thumbnail
avatar-avatar
窩 World
玉山 Unicard 開箱實測：百大指定消費自由選，綁定 LINE Pay 回饋最有感！
玉山銀行新推出的Unicard信用卡你發現了嗎？主打可透過玉山Wallet App，每月自由切換簡單選、任意選及UP選三種方案，讓你依照消費習慣擁有不同的回饋方案。其中我自己很喜歡它百大指定消費中的Line Pay行動支付，能讓我以最簡單的方式獲得最高的回饋！同時文中更分享我實測的眉角，快來看下去！
#信用卡#回饋#玉山Unicard
Thumbnail
avatar-avatar
窩 World
玉山 Unicard 開箱實測：百大指定消費自由選，綁定 LINE Pay 回饋最有感！
玉山銀行新推出的Unicard信用卡你發現了嗎？主打可透過玉山Wallet App，每月自由切換簡單選、任意選及UP選三種方案，讓你依照消費習慣擁有不同的回饋方案。其中我自己很喜歡它百大指定消費中的Line Pay行動支付，能讓我以最簡單的方式獲得最高的回饋！同時文中更分享我實測的眉角，快來看下去！
#信用卡#回饋#玉山Unicard
Thumbnail
avatar-avatar
Michael楊
Javascript入門-Day3：環境建置
本章目的是為讀者提供有關如何設置JavaScript開發環境的知識，包括在瀏覽器、Node.js和各種編輯器和IDE中編寫和運行JavaScript的信息。此外，本章還介紹了如何架設本地開發伺服器以模擬實際的網頁環境。這些知識對於希望開發前端應用或後端服務的JavaScript開發者來說都是必要的。
#Javascript
Thumbnail
avatar-avatar
Michael楊
Javascript入門-Day3：環境建置
本章目的是為讀者提供有關如何設置JavaScript開發環境的知識，包括在瀏覽器、Node.js和各種編輯器和IDE中編寫和運行JavaScript的信息。此外，本章還介紹了如何架設本地開發伺服器以模擬實際的網頁環境。這些知識對於希望開發前端應用或後端服務的JavaScript開發者來說都是必要的。
#Javascript
Thumbnail
avatar-avatar
Ray 貓 Realms
揭秘 JavaScript：V8 引擎如何啟動你的程式碼
如果你曾經撰寫過網頁，那你一定接觸過 JavaScript 無論是在 NodeJs 或是瀏覽器中運行。 但你有沒有想過，我們寫下的 JS 程式碼，這些看似單純的英文和符號，是如何被轉化為機器能夠理解和執行的程式呢？ 今天，讓我們一起深入了解其中的核心主角 ——Google 開發的開源 Java
#程式#引擎#Google
Thumbnail
avatar-avatar
Ray 貓 Realms
揭秘 JavaScript：V8 引擎如何啟動你的程式碼
如果你曾經撰寫過網頁，那你一定接觸過 JavaScript 無論是在 NodeJs 或是瀏覽器中運行。 但你有沒有想過，我們寫下的 JS 程式碼，這些看似單純的英文和符號，是如何被轉化為機器能夠理解和執行的程式呢？ 今天，讓我們一起深入了解其中的核心主角 ——Google 開發的開源 Java
#程式#引擎#Google
Thumbnail
avatar-avatar
傑米的沙龍
CodePen 引入 Google Fonts 的 3 種方法
網頁中經常需要引入外部資源，其中字型更是不可或缺，好看的字體會為網頁質感大加分，免費的網頁字型資源以 Google Fonts 最為常見，今天就來使用 Codepen 試看看如何引入字型吧。
#網頁#資源
Thumbnail
avatar-avatar
傑米的沙龍
CodePen 引入 Google Fonts 的 3 種方法
網頁中經常需要引入外部資源，其中字型更是不可或缺，好看的字體會為網頁質感大加分，免費的網頁字型資源以 Google Fonts 最為常見，今天就來使用 Codepen 試看看如何引入字型吧。
#網頁#資源
Thumbnail
avatar-avatar
JayLinXR
學習React.js - 如何開發一個組件(Component)
React.js 是一個熱門的library，JayLin今天講解React核心概念以及利用一個小案例概括理論部分
#學習#程式#軟體工程師
Thumbnail
avatar-avatar
JayLinXR
學習React.js - 如何開發一個組件(Component)
React.js 是一個熱門的library，JayLin今天講解React核心概念以及利用一個小案例概括理論部分
#學習#程式#軟體工程師
Thumbnail
avatar-avatar
JayLinXR
JayLin教你如何部署你的網站Next.js到Vercel，讓別人看的你的網頁
當你做好你的網站後，教大家把你的網站部署到雲端伺服器Vercel
#網站#伺服器#教學
Thumbnail
avatar-avatar
JayLinXR
JayLin教你如何部署你的網站Next.js到Vercel，讓別人看的你的網頁
當你做好你的網站後，教大家把你的網站部署到雲端伺服器Vercel
#網站#伺服器#教學
Thumbnail
avatar-avatar
JayLinXR
學習image 圖片元件在Next.js並做一個簡單的作品集(Portfolio)
這集介紹Next Image Module模組和CSS3如何定位在Next.js Framework
#學習#教學#程式
Thumbnail
avatar-avatar
JayLinXR
學習image 圖片元件在Next.js並做一個簡單的作品集(Portfolio)
這集介紹Next Image Module模組和CSS3如何定位在Next.js Framework
#學習#教學#程式
Thumbnail
avatar-avatar
JayLinXR
深入了解_App檔案上設置在Next.js功能並且做一個Footer 頁腳
Next.js 架構是怎麼構成的呢?這次教學視頻和文章來帶大家了解_app.js or layout.js
#教學#文章#nextjs
Thumbnail
avatar-avatar
JayLinXR
深入了解_App檔案上設置在Next.js功能並且做一個Footer 頁腳
Next.js 架構是怎麼構成的呢?這次教學視頻和文章來帶大家了解_app.js or layout.js
#教學#文章#nextjs
Thumbnail
avatar-avatar
JayLinXR
安裝Google字型到Next.js 教學
當你有客製化的字型在Google Font裡面，但是又不知道如何導入到Next.js嗎? 這一集教大家如何從Google Font導入Next.js和做一個導覽列
#教學#軟體#設計
Thumbnail
avatar-avatar
JayLinXR
安裝Google字型到Next.js 教學
當你有客製化的字型在Google Font裡面，但是又不知道如何導入到Next.js嗎? 這一集教大家如何從Google Font導入Next.js和做一個導覽列
#教學#軟體#設計
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News