安裝Google字型到Next.js 教學

更新於 2024/05/17閱讀時間約 1 分鐘
當你有客製化的字型在Google Font裡面,但是又不知道如何導入到Next.js嗎?
這一集教大家如何從Google Font導入Next.js和做一個導覽列

影片教學

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

總結

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

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

即將進入廣告,捲動後可繼續閱讀
為什麼會看到廣告
avatar-img
12會員
33內容數
設計 + 程式,是一個出版對設計和程式的學習影片和教學文章,目的是為了讓大家能加快學習最新技術以及設計相關題目去思考如何改變產品的設計體驗。 請追蹤JayLinXR獲得最新消息: https://www.youtube.com/@jaylinxr
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
JayLinXR 的其他內容
建置好前端後, MERN全端工程師教學在這裡 想學習MongoDB和Express可以來這裡學習
教大家如何用TailwindCSS來做現代蠻流行的DarkMode和LightMode之間轉換😃 註: 最後面"dark"請改為"black",錄製太快沒有看到有錯誤
動態導覽列為增加使用者經驗UX,要如何在Tailwind CSS上實現呢?這次JayLin來帶大家做一個動態導覽列(Animation Navigation)
TaiwlildCSS已成為主流技術在2023年https://roadmap.sh/frontend 擁有良好的設計系統(Design System)以及CSS-In-JS增加讀取速度 和不需要創建CSS檔案即可以用class去做Styling
這集跟大家初步介紹Next.js和如何安裝與設置最後製作一個作品集(Portfolio) 如果對設計有興趣的朋友們可以看以下連結文章來學習Figma設計軟件 https://vocus.cc/article/645c733dfd89780001ffe890
Todo App是一個很好學習程式語言的專案開始,JayLin來帶大家手把手用TypeScript | React | TailwildCSS 來做一個小專案
建置好前端後, MERN全端工程師教學在這裡 想學習MongoDB和Express可以來這裡學習
教大家如何用TailwindCSS來做現代蠻流行的DarkMode和LightMode之間轉換😃 註: 最後面"dark"請改為"black",錄製太快沒有看到有錯誤
動態導覽列為增加使用者經驗UX,要如何在Tailwind CSS上實現呢?這次JayLin來帶大家做一個動態導覽列(Animation Navigation)
TaiwlildCSS已成為主流技術在2023年https://roadmap.sh/frontend 擁有良好的設計系統(Design System)以及CSS-In-JS增加讀取速度 和不需要創建CSS檔案即可以用class去做Styling
這集跟大家初步介紹Next.js和如何安裝與設置最後製作一個作品集(Portfolio) 如果對設計有興趣的朋友們可以看以下連結文章來學習Figma設計軟件 https://vocus.cc/article/645c733dfd89780001ffe890
Todo App是一個很好學習程式語言的專案開始,JayLin來帶大家手把手用TypeScript | React | TailwildCSS 來做一個小專案
你可能也想看
Google News 追蹤
Thumbnail
*合作聲明與警語: 本文係由國泰世華銀行邀稿。 證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務,定期定額(股)服務由國泰綜合證券提供。   剛出社會的時候,很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天,都會聽到各種市場動態、理財話題,像是:聯準會降息或是近期哪些科
Thumbnail
因為最近想嘗試編碼風格,於是就選了一套比較"不嚴格"的輔助工具來摸索。 編輯器 VS CODE 框架 VUE3 打包工具 VITE 編碼風格 Standard 環境 version { "nodejs":"v18.18.0", "npm":"9.8.1" }
Thumbnail
GitLab 是一個 DevOps、基於 Web 的免費開源平台 Git 儲存庫,為開發人員提供了所有必要的功能。它是一個用於開發 DevOps 應用程式的一體式平台。 GitLab 允許您執行原始碼管理、監控、安全性和專案規劃任務。 Update system packages: sudo
Thumbnail
本文教授如何安裝Ubuntu伺服器,建議選擇偶數版本如22.04, 20.04, 18.04等LTS版本以獲得穩定的未來性支撐。
Thumbnail
GA4是Google繼Google Analytics(GA)後推出的網站分析工具,Google已於2023年6月底關閉GA資料收集,無論用過GA或亦無,都應該了解GA4的安裝、設定與功能,並介紹GSC,讓企業藉由GA4與GSC進行SEO成效分析。
前言 前幾篇聊到作業系統、Docker 跟 Android 容器的準備,再來就是替 Android 容器開啟 Google Play 套件並安裝待測 App 供後續手動或者自動測試使用。
以前我一直以爲安裝Nvidia Driver比Ubuntu 還困難一點,現在只要幾個步驟就可以了 加入rpmfusion 系統更新 安裝nVidia 重開機
上篇是我常使用的gnome相關軟體,那這篇就會簡單介紹我常用的其他類軟體 firefox Firefox是一款自訂性強大的網頁瀏覽器,由Mozilla基金會開發和維護,在chrome還沒發表出來,就很多人在用,firefox支援附加元件,可以額外加入其他開發者的附加元件來增加firefox的功能。f
由於我是選擇最小化安裝Fedora系統所以本身不帶任何桌面軟體,所以要安裝的軟體有點多,不過我也一一認識了那些軟體,我就一一簡單介紹吧。 nautilus nautilus是gnome 內置的檔案管理器,提供了檔案管理器的基礎功能,如瀏覽、檔案複製、貼上、檔案查詢。有多種檔案視圖的切換,如清單、列表
Thumbnail
距離 GA3 轉換至新版 GA4,你只剩下不到三個月的時間!別再猶豫,現在就開始轉換的工作。這篇文章,TenMax 將統整 GA4 更新差異、實用功能、備份須知,以及其他你該瞭解的事情。
Thumbnail
*合作聲明與警語: 本文係由國泰世華銀行邀稿。 證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務,定期定額(股)服務由國泰綜合證券提供。   剛出社會的時候,很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天,都會聽到各種市場動態、理財話題,像是:聯準會降息或是近期哪些科
Thumbnail
因為最近想嘗試編碼風格,於是就選了一套比較"不嚴格"的輔助工具來摸索。 編輯器 VS CODE 框架 VUE3 打包工具 VITE 編碼風格 Standard 環境 version { "nodejs":"v18.18.0", "npm":"9.8.1" }
Thumbnail
GitLab 是一個 DevOps、基於 Web 的免費開源平台 Git 儲存庫,為開發人員提供了所有必要的功能。它是一個用於開發 DevOps 應用程式的一體式平台。 GitLab 允許您執行原始碼管理、監控、安全性和專案規劃任務。 Update system packages: sudo
Thumbnail
本文教授如何安裝Ubuntu伺服器,建議選擇偶數版本如22.04, 20.04, 18.04等LTS版本以獲得穩定的未來性支撐。
Thumbnail
GA4是Google繼Google Analytics(GA)後推出的網站分析工具,Google已於2023年6月底關閉GA資料收集,無論用過GA或亦無,都應該了解GA4的安裝、設定與功能,並介紹GSC,讓企業藉由GA4與GSC進行SEO成效分析。
前言 前幾篇聊到作業系統、Docker 跟 Android 容器的準備,再來就是替 Android 容器開啟 Google Play 套件並安裝待測 App 供後續手動或者自動測試使用。
以前我一直以爲安裝Nvidia Driver比Ubuntu 還困難一點,現在只要幾個步驟就可以了 加入rpmfusion 系統更新 安裝nVidia 重開機
上篇是我常使用的gnome相關軟體,那這篇就會簡單介紹我常用的其他類軟體 firefox Firefox是一款自訂性強大的網頁瀏覽器,由Mozilla基金會開發和維護,在chrome還沒發表出來,就很多人在用,firefox支援附加元件,可以額外加入其他開發者的附加元件來增加firefox的功能。f
由於我是選擇最小化安裝Fedora系統所以本身不帶任何桌面軟體,所以要安裝的軟體有點多,不過我也一一認識了那些軟體,我就一一簡單介紹吧。 nautilus nautilus是gnome 內置的檔案管理器,提供了檔案管理器的基礎功能,如瀏覽、檔案複製、貼上、檔案查詢。有多種檔案視圖的切換,如清單、列表
Thumbnail
距離 GA3 轉換至新版 GA4,你只剩下不到三個月的時間!別再猶豫,現在就開始轉換的工作。這篇文章,TenMax 將統整 GA4 更新差異、實用功能、備份須知,以及其他你該瞭解的事情。