{"id":190,"date":"2024-11-13T16:24:04","date_gmt":"2024-11-13T21:24:04","guid":{"rendered":"https:\/\/zenteno.org\/tech-talks\/?p=190"},"modified":"2024-11-13T16:44:06","modified_gmt":"2024-11-13T21:44:06","slug":"next-js-change-font-family","status":"publish","type":"post","link":"https:\/\/zenteno.org\/tech-talks\/next-js-change-font-family\/","title":{"rendered":"Next.js – change font family"},"content":{"rendered":"\n

To change the font of your Next.js app efficiently, you can use the following methods:<\/p>\n\n\n\n

\n\n\n\n

1. Use the Built-in next\/font<\/code> Module<\/strong><\/h3>\n\n\n\n

Next.js provides the next\/font<\/code> module for optimizing and managing fonts. It allows you to include Google Fonts or local fonts with performance enhancements, like automatic font subset optimization.<\/p>\n\n\n\n

Steps for Google Fonts<\/strong><\/h4>\n\n\n\n
    \n
  1. Install the Font Package:<\/strong><\/li>\n<\/ol>\n\n\n\n
       npm install @next\/font<\/code><\/pre>\n\n\n\n
      \n
    1. Use a Google Font in Your App:<\/strong>
      Modify your layout.js<\/code> or pages\/_app.js<\/code> file:<\/li>\n<\/ol>\n\n\n\n
         import { Inter } from 'next\/font\/google';\n\n   const inter = Inter({ subsets: ['latin'] });\n\n   export default function RootLayout({ children }) {\n       return (\n           <html lang=\"en\">\n               <body className={inter.className}>{children}<\/body>\n           <\/html>\n       );\n   }<\/code><\/pre>\n\n\n\n
        \n
      1. Apply the Font Globally:<\/strong><\/li>\n<\/ol>\n\n\n\n
          \n
        • The inter.className<\/code> automatically applies the font style globally.<\/li>\n<\/ul>\n\n\n\n
          \n\n\n\n
          Steps for Custom or Local Fonts<\/strong><\/h4>\n\n\n\n
          If you have a custom font file, you can use the next\/font\/local<\/code> import:<\/p>\n\n\n\n
            \n
          1. Store Your Font File:<\/strong>
            Place your font files in the public\/fonts<\/code> folder.<\/li>\n\n\n\n
          2. Use the Font in Your Code:<\/strong><\/li>\n<\/ol>\n\n\n\n
               import localFont from 'next\/font\/local';\n\n   const myFont = localFont({\n       src: '.\/fonts\/MyFont-Regular.woff2',\n       variable: '--font-myfont',\n   });\n\n   export default function RootLayout({ children }) {\n       return (\n           <html lang=\"en\">\n               <body className={myFont.className}>{children}<\/body>\n           <\/html>\n       );\n   }<\/code><\/pre>\n\n\n\n
              \n
            1. CSS Custom Properties for Further Styling:<\/strong>
              You can define a variable for the font (e.g., --font-myfont<\/code>) and use it in your global CSS:<\/li>\n<\/ol>\n\n\n\n
                 :root {\n       --font-myfont: 'MyFont', sans-serif;\n   }\n\n   body {\n       font-family: var(--font-myfont);\n   }<\/code><\/pre>\n\n\n\n
              \n\n\n\n
              2. Use a CSS Framework (e.g., Tailwind CSS)<\/strong><\/h3>\n\n\n\n
              If you are using Tailwind CSS, you can configure your font in tailwind.config.js<\/code>:<\/p>\n\n\n\n
                \n
              1. Install the Font via Tailwind or Manually Add It:<\/strong><\/li>\n<\/ol>\n\n\n\n
                   npm install @tailwindcss\/typography<\/code><\/pre>\n\n\n\n
                  \n
                1. Modify the Tailwind Configuration:<\/strong><\/li>\n<\/ol>\n\n\n\n
                     module.exports = {\n       theme: {\n           extend: {\n               fontFamily: {\n                   sans: ['Inter', 'sans-serif'],\n               },\n           },\n       },\n       plugins: [require('@tailwindcss\/typography')],\n   };<\/code><\/pre>\n\n\n\n
                    \n
                  1. Apply the Font:<\/strong>
                    Use font-sans<\/code> in your components or globally in the html<\/code> or body<\/code> tags.<\/li>\n<\/ol>\n\n\n\n
                    \n\n\n\n
                    3. Use Global CSS<\/strong><\/h3>\n\n\n\n
                    If you want to manage fonts directly in a CSS file:<\/p>\n\n\n\n
                      \n
                    1. Add a Global CSS File:<\/strong>
                      Create a styles\/globals.css<\/code> file if it doesn\u2019t exist.<\/li>\n\n\n\n
                    2. Import the Font Using @import<\/code> in CSS:<\/strong><\/li>\n<\/ol>\n\n\n\n
                         @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;700&display=swap');\n\n   body {\n       font-family: 'Inter', sans-serif;\n   }<\/code><\/pre>\n\n\n\n
                        \n
                      1. Import the CSS File in _app.js<\/code>:<\/strong><\/li>\n<\/ol>\n\n\n\n
                           import '..\/styles\/globals.css';\n\n   export default function MyApp({ Component, pageProps }) {\n       return <Component {...pageProps} \/>;\n   }<\/code><\/pre>\n\n\n\n
                        \n\n\n\n
                        Comparison of Methods<\/strong><\/h3>\n\n\n\n
                        Method<\/th>Performance<\/th>Ease of Use<\/th>Notes<\/th><\/tr><\/thead>
                        next\/font<\/code><\/td>\u2705 Best<\/td>\u2705 Easy<\/td>Built-in optimization, font subsetting, ideal for most cases<\/td><\/tr>
                        Tailwind CSS Framework<\/td>\u2705 Good<\/td>\u2705 Easy<\/td>Works well if using Tailwind, but adds dependency<\/td><\/tr>
                        Global CSS with Google<\/td>\u26a0\ufe0f Okay<\/td>\u2705 Easy<\/td>No optimization; rely on Google Fonts’ CDN<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
                        Recommendation<\/strong><\/h3>\n\n\n\n
                        The next\/font<\/code><\/strong> module is the most efficient way to manage fonts in Next.js, offering optimal performance and seamless integration. Use it unless you have a specific reason to manage fonts differently.<\/p>\n","protected":false},"excerpt":{"rendered":"
                        To change the font of your Next.js app efficiently, you can use the following methods: 1. Use the Built-in next\/font Module Next.js provides the next\/font module for optimizing and managing fonts. It allows you to include Google Fonts or local fonts with performance enhancements, like automatic font subset optimization. Steps for Google Fonts Steps for […]<\/p>\n","protected":false},"author":1,"featured_media":191,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,62],"tags":[],"class_list":["post-190","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tech","category-web-development"],"yoast_head":"\nNext.js - change font family - My Tech Talks with ChatGPT<\/title>\n<meta name=\"description\" content=\"Learn how to efficiently change fonts in your Next.js app using the built-in `next\/font` module, Tailwind CSS, or global CSS.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/zenteno.org\/tech-talks\/next-js-change-font-family\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Next.js - change font family - My Tech Talks with ChatGPT\" \/>\n<meta property=\"og:description\" content=\"Learn how to efficiently change fonts in your Next.js app using the built-in `next\/font` module, Tailwind CSS, or global CSS.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/zenteno.org\/tech-talks\/next-js-change-font-family\/\" \/>\n<meta property=\"og:site_name\" content=\"My Tech Talks with ChatGPT\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-13T21:24:04+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-13T21:44:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/zenteno.org\/tech-talks\/wp-content\/uploads\/2024\/11\/create-an-anime-version-of-an-old-screen-computer-showing-many-different-font-family-styles-171186960-1.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"1024\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"adminwp\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"adminwp\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/zenteno.org\/tech-talks\/next-js-change-font-family\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/zenteno.org\/tech-talks\/next-js-change-font-family\/\"},\"author\":{\"name\":\"adminwp\",\"@id\":\"https:\/\/zenteno.org\/tech-talks\/#\/schema\/person\/b6442e8a5e39de0647f2ecf534e18580\"},\"headline\":\"Next.js – change font family\",\"datePublished\":\"2024-11-13T21:24:04+00:00\",\"dateModified\":\"2024-11-13T21:44:06+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/zenteno.org\/tech-talks\/next-js-change-font-family\/\"},\"wordCount\":303,\"publisher\":{\"@id\":\"https:\/\/zenteno.org\/tech-talks\/#\/schema\/person\/b6442e8a5e39de0647f2ecf534e18580\"},\"image\":{\"@id\":\"https:\/\/zenteno.org\/tech-talks\/next-js-change-font-family\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/zenteno.org\/tech-talks\/wp-content\/uploads\/2024\/11\/create-an-anime-version-of-an-old-screen-computer-showing-many-different-font-family-styles-171186960-1.jpeg\",\"articleSection\":[\"Technology\",\"Web Development\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/zenteno.org\/tech-talks\/next-js-change-font-family\/\",\"url\":\"https:\/\/zenteno.org\/tech-talks\/next-js-change-font-family\/\",\"name\":\"Next.js - change font family - My Tech Talks with ChatGPT\",\"isPartOf\":{\"@id\":\"https:\/\/zenteno.org\/tech-talks\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/zenteno.org\/tech-talks\/next-js-change-font-family\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/zenteno.org\/tech-talks\/next-js-change-font-family\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/zenteno.org\/tech-talks\/wp-content\/uploads\/2024\/11\/create-an-anime-version-of-an-old-screen-computer-showing-many-different-font-family-styles-171186960-1.jpeg\",\"datePublished\":\"2024-11-13T21:24:04+00:00\",\"dateModified\":\"2024-11-13T21:44:06+00:00\",\"description\":\"Learn how to efficiently change fonts in your Next.js app using the built-in `next\/font` module, Tailwind CSS, or global CSS.\",\"breadcrumb\":{\"@id\":\"https:\/\/zenteno.org\/tech-talks\/next-js-change-font-family\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/zenteno.org\/tech-talks\/next-js-change-font-family\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/zenteno.org\/tech-talks\/next-js-change-font-family\/#primaryimage\",\"url\":\"https:\/\/zenteno.org\/tech-talks\/wp-content\/uploads\/2024\/11\/create-an-anime-version-of-an-old-screen-computer-showing-many-different-font-family-styles-171186960-1.jpeg\",\"contentUrl\":\"https:\/\/zenteno.org\/tech-talks\/wp-content\/uploads\/2024\/11\/create-an-anime-version-of-an-old-screen-computer-showing-many-different-font-family-styles-171186960-1.jpeg\",\"width\":1024,\"height\":1024},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/zenteno.org\/tech-talks\/next-js-change-font-family\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/zenteno.org\/tech-talks\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Next.js – change font family\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/zenteno.org\/tech-talks\/#website\",\"url\":\"https:\/\/zenteno.org\/tech-talks\/\",\"name\":\"My Tech Talks with ChatGPT\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/zenteno.org\/tech-talks\/#\/schema\/person\/b6442e8a5e39de0647f2ecf534e18580\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/zenteno.org\/tech-talks\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/zenteno.org\/tech-talks\/#\/schema\/person\/b6442e8a5e39de0647f2ecf534e18580\",\"name\":\"adminwp\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/zenteno.org\/tech-talks\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/zenteno.org\/tech-talks\/wp-content\/uploads\/2024\/10\/IMG_1739.jpg\",\"contentUrl\":\"https:\/\/zenteno.org\/tech-talks\/wp-content\/uploads\/2024\/10\/IMG_1739.jpg\",\"width\":512,\"height\":512,\"caption\":\"adminwp\"},\"logo\":{\"@id\":\"https:\/\/zenteno.org\/tech-talks\/#\/schema\/person\/image\/\"},\"sameAs\":[\"http:\/\/localhost:4000\"],\"url\":\"https:\/\/zenteno.org\/tech-talks\/author\/adminwp\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Next.js - change font family - My Tech Talks with ChatGPT","description":"Learn how to efficiently change fonts in your Next.js app using the built-in `next\/font` module, Tailwind CSS, or global CSS.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/zenteno.org\/tech-talks\/next-js-change-font-family\/","og_locale":"en_US","og_type":"article","og_title":"Next.js - change font family - My Tech Talks with ChatGPT","og_description":"Learn how to efficiently change fonts in your Next.js app using the built-in `next\/font` module, Tailwind CSS, or global CSS.","og_url":"https:\/\/zenteno.org\/tech-talks\/next-js-change-font-family\/","og_site_name":"My Tech Talks with ChatGPT","article_published_time":"2024-11-13T21:24:04+00:00","article_modified_time":"2024-11-13T21:44:06+00:00","og_image":[{"width":1024,"height":1024,"url":"https:\/\/zenteno.org\/tech-talks\/wp-content\/uploads\/2024\/11\/create-an-anime-version-of-an-old-screen-computer-showing-many-different-font-family-styles-171186960-1.jpeg","type":"image\/jpeg"}],"author":"adminwp","twitter_card":"summary_large_image","twitter_misc":{"Written by":"adminwp","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/zenteno.org\/tech-talks\/next-js-change-font-family\/#article","isPartOf":{"@id":"https:\/\/zenteno.org\/tech-talks\/next-js-change-font-family\/"},"author":{"name":"adminwp","@id":"https:\/\/zenteno.org\/tech-talks\/#\/schema\/person\/b6442e8a5e39de0647f2ecf534e18580"},"headline":"Next.js – change font family","datePublished":"2024-11-13T21:24:04+00:00","dateModified":"2024-11-13T21:44:06+00:00","mainEntityOfPage":{"@id":"https:\/\/zenteno.org\/tech-talks\/next-js-change-font-family\/"},"wordCount":303,"publisher":{"@id":"https:\/\/zenteno.org\/tech-talks\/#\/schema\/person\/b6442e8a5e39de0647f2ecf534e18580"},"image":{"@id":"https:\/\/zenteno.org\/tech-talks\/next-js-change-font-family\/#primaryimage"},"thumbnailUrl":"https:\/\/zenteno.org\/tech-talks\/wp-content\/uploads\/2024\/11\/create-an-anime-version-of-an-old-screen-computer-showing-many-different-font-family-styles-171186960-1.jpeg","articleSection":["Technology","Web Development"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/zenteno.org\/tech-talks\/next-js-change-font-family\/","url":"https:\/\/zenteno.org\/tech-talks\/next-js-change-font-family\/","name":"Next.js - change font family - My Tech Talks with ChatGPT","isPartOf":{"@id":"https:\/\/zenteno.org\/tech-talks\/#website"},"primaryImageOfPage":{"@id":"https:\/\/zenteno.org\/tech-talks\/next-js-change-font-family\/#primaryimage"},"image":{"@id":"https:\/\/zenteno.org\/tech-talks\/next-js-change-font-family\/#primaryimage"},"thumbnailUrl":"https:\/\/zenteno.org\/tech-talks\/wp-content\/uploads\/2024\/11\/create-an-anime-version-of-an-old-screen-computer-showing-many-different-font-family-styles-171186960-1.jpeg","datePublished":"2024-11-13T21:24:04+00:00","dateModified":"2024-11-13T21:44:06+00:00","description":"Learn how to efficiently change fonts in your Next.js app using the built-in `next\/font` module, Tailwind CSS, or global CSS.","breadcrumb":{"@id":"https:\/\/zenteno.org\/tech-talks\/next-js-change-font-family\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/zenteno.org\/tech-talks\/next-js-change-font-family\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/zenteno.org\/tech-talks\/next-js-change-font-family\/#primaryimage","url":"https:\/\/zenteno.org\/tech-talks\/wp-content\/uploads\/2024\/11\/create-an-anime-version-of-an-old-screen-computer-showing-many-different-font-family-styles-171186960-1.jpeg","contentUrl":"https:\/\/zenteno.org\/tech-talks\/wp-content\/uploads\/2024\/11\/create-an-anime-version-of-an-old-screen-computer-showing-many-different-font-family-styles-171186960-1.jpeg","width":1024,"height":1024},{"@type":"BreadcrumbList","@id":"https:\/\/zenteno.org\/tech-talks\/next-js-change-font-family\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/zenteno.org\/tech-talks\/"},{"@type":"ListItem","position":2,"name":"Next.js – change font family"}]},{"@type":"WebSite","@id":"https:\/\/zenteno.org\/tech-talks\/#website","url":"https:\/\/zenteno.org\/tech-talks\/","name":"My Tech Talks with ChatGPT","description":"","publisher":{"@id":"https:\/\/zenteno.org\/tech-talks\/#\/schema\/person\/b6442e8a5e39de0647f2ecf534e18580"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/zenteno.org\/tech-talks\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/zenteno.org\/tech-talks\/#\/schema\/person\/b6442e8a5e39de0647f2ecf534e18580","name":"adminwp","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/zenteno.org\/tech-talks\/#\/schema\/person\/image\/","url":"https:\/\/zenteno.org\/tech-talks\/wp-content\/uploads\/2024\/10\/IMG_1739.jpg","contentUrl":"https:\/\/zenteno.org\/tech-talks\/wp-content\/uploads\/2024\/10\/IMG_1739.jpg","width":512,"height":512,"caption":"adminwp"},"logo":{"@id":"https:\/\/zenteno.org\/tech-talks\/#\/schema\/person\/image\/"},"sameAs":["http:\/\/localhost:4000"],"url":"https:\/\/zenteno.org\/tech-talks\/author\/adminwp\/"}]}},"_links":{"self":[{"href":"https:\/\/zenteno.org\/tech-talks\/wp-json\/wp\/v2\/posts\/190","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zenteno.org\/tech-talks\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/zenteno.org\/tech-talks\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/zenteno.org\/tech-talks\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zenteno.org\/tech-talks\/wp-json\/wp\/v2\/comments?post=190"}],"version-history":[{"count":1,"href":"https:\/\/zenteno.org\/tech-talks\/wp-json\/wp\/v2\/posts\/190\/revisions"}],"predecessor-version":[{"id":192,"href":"https:\/\/zenteno.org\/tech-talks\/wp-json\/wp\/v2\/posts\/190\/revisions\/192"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/zenteno.org\/tech-talks\/wp-json\/wp\/v2\/media\/191"}],"wp:attachment":[{"href":"https:\/\/zenteno.org\/tech-talks\/wp-json\/wp\/v2\/media?parent=190"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zenteno.org\/tech-talks\/wp-json\/wp\/v2\/categories?post=190"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zenteno.org\/tech-talks\/wp-json\/wp\/v2\/tags?post=190"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}