Comments (5)
joe-bell
commented on May 24, 2024
@ceruberu before I look into this, please can you complete the following:
- Update this issue to follow the "Bug Report" Template
- Provide a complete reproduction of your issue
from next-google-fonts.
ceruberu
commented on May 24, 2024
@joe-bell Is this good enough? Thanks
Describe the bug
A clear and concise description of what the bug is.
Not working in mobile
To Reproduce
Steps to reproduce the behavior:
my _app.js
import { useEffect } from 'react'
import Head from 'next/head'
import { IntlProvider } from "react-intl"
import { useRouter } from "next/router"
import GoogleFonts from "next-google-fonts";
import * as locales from "../content/locale"
import * as gtag from '../lib/gtag'
import "../styles/globals.css"
function MyApp({ Component, pageProps }) {
const router = useRouter()
const { locale, defaultLocale, pathname, events } = router;
const localeCopy = locales[locale]
const messages = localeCopy[pathname]
useEffect(() => {
const handleRouteChange = (url) => {
gtag.pageview(url)
}
router.events.on('routeChangeComplete', handleRouteChange)
return () => {
router.events.off('routeChangeComplete', handleRouteChange)
}
}, [router.events])
return (
<IntlProvider
locale={locale}
defaultLocale={defaultLocale}
messages={messages}
>
<Head>
<GoogleFonts href="https://fonts.googleapis.com/css2?family=Prompt:wght@400;700&display=swap" />
<meta key="viewport" name="viewport" content="initial-scale=1, width=device-width" />
</Head>
<Component {...pageProps} />
</IntlProvider>
)
}
export default MyApp
my global.scc
html,
body {
height: 100%;
padding: 0;
margin: 0;
font-family: Prompt, Enriqueta-Regular, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}
Expected behavior
A clear and concise description of what you expected to happen.
same font for both desktop and mobile
Screenshots
If applicable, add screenshots to help explain your problem.
my desktop
my mobile
Desktop (please complete the following information):
- OS: [e.g. iOS] ios
- Browser [e.g. chrome, safari] chrome
- Version [e.g. 22]
Smartphone (please complete the following information):
- Device: [e.g. iPhone6] samsung note10, iphone8
- OS: [e.g. iOS8.1]
- Browser [e.g. stock browser, safari] chrome, samsungexplorer, safari
- Version [e.g. 22]
from next-google-fonts.
joe-bell
commented on May 24, 2024
Thanks @ceruberu!
In your example you're calling GoogleFonts inside Head, this is not supported; the setup guide in the README should help to get you started (note the use of Fragment). To be honest though I'm not sure that's the issue here/not convinced this is to do with next-google-fonts 😕
If you want me to look further I will still need a full reproduction (e.g. CodeSandbox)
from next-google-fonts.
ceruberu
commented on May 24, 2024
Oh I see that next-google-fonts are already nested inside next/head
<IntlProvider
locale={locale}
defaultLocale={defaultLocale}
messages={messages}
>
<GoogleFonts href="https://fonts.googleapis.com/css2?family=Prompt:wght@400;700&display=swap" />
<Head>
<meta key="viewport" name="viewport" content="initial-scale=1, width=device-width" />
</Head>
<Component {...pageProps} />
putting it outside head made it working in mobile
So actually the browser was getting font from my mac itself, because I had it installed already.
Now just wondering if loading multiple next/heads is fine.
Thanks @joe-bell
from next-google-fonts.
joe-bell
commented on May 24, 2024
No worries! Rendering multiple next/heads is totally fine
I'll close this as it looks like your issue has been resolved
from next-google-fonts.
Related Issues (12)
- v1.3.0 breaks - React.jsx: type is invalid HOT 3
- this package has incorrect peer dependency HOT 1
- Duplicate preload stylesheet tags HOT 6
- New version prevents multiple `<GoogleFonts>` tags HOT 2
- react-google-fonts HOT 1
- How to Use on All Pages HOT 3
- Not working on Safari HOT 7
- Guidance on using this alongside vanilla `next/head` HOT 5
- Head (`next/document`) not support passing NextHead (`next/head`) as a child. HOT 5
- Support for NextJS 10 automatic Google Font Optimization HOT 5
- why not useLayoutEffect hook ? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from next-google-fonts.