Merge pull request #1003 from gchq/dev/update-bailo-header-font

added pacifico as an npm import

frontend/package.json

@@ -18,6 +18,7 @@
     "@emotion/react": "^11.11.0",
     "@emotion/server": "^11.11.0",
     "@emotion/styled": "^11.11.0",
+    "@fontsource/pacifico": "^5.0.8",
     "@mdx-js/loader": "^2.3.0",
     "@mdx-js/react": "^2.3.0",
     "@mui/icons-material": "^5.11.16",

frontend/src/wrapper/TopNavigation.tsx

@@ -1,3 +1,5 @@
+import '@fontsource/pacifico'
+
 import { Add, Settings } from '@mui/icons-material'
 import DarkModeIcon from '@mui/icons-material/DarkMode'
 import LogoutIcon from '@mui/icons-material/Logout'
@@ -18,7 +20,6 @@ import {
 } from '@mui/material'
 import MuiAppBar, { AppBarProps as MuiAppBarProps } from '@mui/material/AppBar'
 import { styled, useTheme } from '@mui/material/styles'
-import { Pacifico } from 'next/font/google'
 import { useRouter } from 'next/router'
 import { CSSProperties, MouseEvent, useContext, useState } from 'react'
 
@@ -59,8 +60,6 @@ const AppBar = styled(MuiAppBar, {
   }),
 }))
 
-const pacifico = Pacifico({ subsets: ['latin'], weight: '400' })
-
 // This is currently only being used by the beta wrapper
 export default function TopNavigation({
   drawerOpen = false,
@@ -128,7 +127,7 @@ export default function TopNavigation({
           <Box sx={{ width: 'max-content', cursor: 'pointer', px: 1 }}>
             <Link href='/beta' color='inherit' underline='none' style={{ color: 'inherit', textDecoration: 'inherit' }}>
               <Typography variant='h5' component='div'>
-                <span className={pacifico.className}>Bailo</span>
+                <span style={{ fontFamily: 'Pacifico' }}>Bailo</span>
                 {betaAdornment}
               </Typography>
             </Link>