@next/font fallback fonts order fix (#43633)

The fallback fonts are applied in the wrong order which can cause the
generated fallback font not to get applied.

ref:
[slack](https://vercel.slack.com/archives/C03S8ED1DKM/p1669834408302339?thread_ts=1669765718.933099&cid=C03S8ED1DKM)

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have a helpful link attached, see
[`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md)

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the
feature request has been accepted for implementation before opening a
PR.
- [ ] Related issues linked using `fixes #number`
- [ ]
[e2e](https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs)
tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have a helpful link attached, see
[`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md)

## Documentation / Examples

- [ ] Make sure the linting passes by running `pnpm build && pnpm lint`
- [ ] The "examples guidelines" are followed from [our contributing
doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)

packages/next/build/webpack/loaders/next-font-loader/postcss-font-loader.ts

@@ -115,8 +115,8 @@ const postcssFontLoaderPlugn = ({
       const isRange = (value: string) => value.trim().includes(' ')
       const formattedFontFamilies = [
         formatFamily(fontFamily),
-        ...fallbackFonts,
         ...(adjustFontFallbackFamily ? [adjustFontFallbackFamily] : []),
+        ...fallbackFonts,
       ].join(', ')
       // Add class with family, weight and style
       const classRule = new postcss.Rule({ selector: '.className' })

test/e2e/next-font/app/pages/with-fallback.js

@@ -2,6 +2,7 @@ import { Open_Sans } from '@next/font/google'
 const openSans = Open_Sans({
   fallback: ['system-ui', 'Arial'],
   variable: '--open-sans',
+  adjustFontFallback: false,
 })
 
 export default function WithFonts() {

test/e2e/next-font/index.test.ts

@@ -108,7 +108,7 @@ describe('@next/font/google', () => {
         className: expect.stringMatching(/__className_.{6}/),
         style: {
           fontFamily: expect.stringMatching(
-            /^'__myFont1_.{6}', system-ui, '__myFont1_Fallback_.{6}'$/
+            /^'__myFont1_.{6}', '__myFont1_Fallback_.{6}', system-ui$/
           ),
           fontStyle: 'italic',
           fontWeight: 100,
@@ -275,27 +275,21 @@ describe('@next/font/google', () => {
         await browser.eval(
           'getComputedStyle(document.querySelector("#with-fallback-fonts-classname")).fontFamily'
         )
-      ).toMatch(
-        /^__Open_Sans_.{6}, system-ui, Arial, __Open_Sans_Fallback_.{6}$/
-      )
+      ).toMatch(/^__Open_Sans_.{6}, system-ui, Arial$/)
 
       // .style
       expect(
         await browser.eval(
           'getComputedStyle(document.querySelector("#with-fallback-fonts-style")).fontFamily'
         )
-      ).toMatch(
-        /^__Open_Sans_.{6}, system-ui, Arial, __Open_Sans_Fallback_.{6}$/
-      )
+      ).toMatch(/^__Open_Sans_.{6}, system-ui, Arial$/)
 
       // .variable
       expect(
         await browser.eval(
           'getComputedStyle(document.querySelector("#with-fallback-fonts-variable")).fontFamily'
         )
-      ).toMatch(
-        /^__Open_Sans_.{6}, system-ui, Arial, __Open_Sans_Fallback_.{6}$/
-      )
+      ).toMatch(/^__Open_Sans_.{6}, system-ui, Arial$/)
     })
   })