Loading google fonts
I'm trying to load a google font with the <Link> component but it doesn't seem to be working
<Link href="https://fonts.googleapis.com/css2?family=Cedarville+Cursive&family=Recursive:wght@300;400;500;600;700;800&display=swap" rel="stylesheet" />
It puts an <a> tag in the body with link=true as an attribute but nothing the font is not working.
61 Replies
Are you putting it in the html head or body?
I put it in the root.tsx file in the <Head> element
I solved it by using an @import rule in the root.css instead. Using the <Link> component to add the font is definitely not working.
I don't think you should use <Link> for that - there are a lot of ways how to do it - but you want to start loading the font as soon as possible, instead of waiting for the first render after the framework is loaded to initialize the loading anyway.
At least IMHO
@.high1 What would be your recommendation?
@hokage7410 take a look at this article, https://web.dev/font-best-practices/, there's a lot of information there. But, whatever you decide, do not load the fonts using a component - this means that the loading of fonts would have to wait for the framework to linitialize, load and render the content, which is probably not something you want to do. It's perfectly fine to place loading in index.html.
Thanks for the response @.high1 , I appreciate it.
Personally I recommend using font source since you have control over font caching and other stuff
And you can see how fonts affect your bundle size and stuff
Why would you bundle fonts?
Anyway, there's also a nice article here which goes more in depth:
https://sia.codes/posts/making-google-fonts-faster/
Making Google Fonts Faster in 2022
If you use Google Fonts, a few additional steps can lead to much faster load times. Learn about preconnect, optimal placement, font display, preload, and more in this post.
I have more control over the font and it actually leads to better performance for my use case
Not like, the font is in the JS
But instead of pulling it from Google fonts, it's from my host
It also reduced the bundle size and is easier to work with
I don't see how bundling fonts could be beneficial for performance - self hosting is a different thing.
If you really want to avoid FOUT, you self host and preload.
That's... What I do
Seems that preloading with @fontsource is still an open issue
https://github.com/fontsource/fontsource/issues/83
GitHub
Preload Fonts · Issue #83 · fontsource/fontsource
Using fontsource, how can one preload a font as to prevent a flash of faux-text? import React from "react"; import { Helmet } from "react-helmet"; import &qu...
I know that this discussion has strayed, but if you want to use google fonts with Links, in my own project a structure such as this works fine (in root.tsx)
This is what Google Fonts will show when you select a family, and is a good way to do it. If you do not want to rely on Google CDN, or want to prevent possible flash of unstyled text, you can host the fonts yourself - deploy them with your app, and preload. There's a solution on how to do that in FontSource issue in https://github.com/fontsource/fontsource/issues/83#issuecomment-1340186032. But whatever you do, do not load the fonts using framework components - start loading as soon as possible. Using this solution, fonts would be deployed alongside with the app - I would not say bundled, just deployed in assets folder along with the other resources.
GitHub
Preload Fonts · Issue #83 · fontsource/fontsource
Using fontsource, how can one preload a font as to prevent a flash of faux-text? import React from "react"; import { Helmet } from "react-helmet"; import &qu...
Would you say that the approach I showed loads the fonts using framework components? If so, As far as I can tell, since solid-start server-side renders, I don't believe there should be any drawback in performance in having those links there. (In terms of loading from Google's font CDN)
No, not at all
The issue started with OP using <Link > to download fonts
Your solution is index.html, and loads the fonts asynchronously, AFAIK.
Yeah 👍
@.high1 however they do mention that they place it in the <Head> element of the root.tsx, so it should be the same
<Link href="https://fonts.googleapis.com/css2?family=Cedarville+Cursive&family=Recursive:wght@300;400;500;600;700;800&display=swap" rel="stylesheet" />
I was talking about this
But again, head is a framework element
Right?
mhm
but it gets server-side rendered
SO, you need to download the framework first
nono-solid-start will generate that default html, then hydrate it per page
so the client gets all the head and body html rendered from the server, then hydrates with javascript-so no loss of performance in font loading.
True, that's something that I haven't been thinking of - but I would just use one approach, which would work the same both client and server wise.
Whenever I actually make a request, the html that is returned is as follows:
That's using index.html or Head component?
head component
in fact, an index.html does not exist in my project at all
Yep, so it's SSR
yeah
Hope the docs explain this
Should be there somewhere
SolidStart enables you to render your application in different ways depending on what's best for your use case: Client-side rendering (CSR) Server-side rendering (SSR) Streaming SSR Static site generation (SSG)I'm not sure how this behaves in client-side rendering however as I haven't had reason to touch it
Haven't had the chance to try it, but I assume that Head component deals with this transparently for the user.
Yes-in fact, all of the components are server-side rendering, and the benefit of <Head> and <Link> and etc. is the ability to change the head values within sub routes
SolidStart Beta Docuentation
SolidStart Beta Documentation
Early release documentation and resources for SolidStart Beta
So e.g. would change the title in the head
I assume that <Link > component is for routing, right?
<Link> is for <link>
<A> is for routing
Ouch, my assumption was bad
so just all of the default tags you would have, to add the reactivity that solid provides, you capitalize the name
(or rather solid-start provides those components)
Yep, this is a special case when you must do this the Component way
Or not the special case, think that this will become the preferred way to write applications.
Mhm-I really prefer solid-start to any other framework I've used
Then I need to correct myself - when using Solid Start, you should use <Link /> to load fonts
The instructions in the docs are clear:
https://start.solidjs.com/core-concepts/head-and-metadata
SolidStart Beta Docuentation
SolidStart Beta Documentation
Early release documentation and resources for SolidStart Beta
one thing I am wondering though is how the original question presents the <Link> transforms into "an <a> tag in the body with link=true as an attribute"
afaik that shouldn't be
This should be in root.tsx
And should be a link element
^ mentions here that it was
Hm, and that's working for you?
yup
Hm, my bad
Can't really say what could be the issue there
In this case, you should use framework components, as you don't really have a starting point like index.html, and there's actually a step here which handles meta elements - so, one should just replace what Google Fonts give them with capitalizes version, if I'm reading the docs right
Which is what you have done @razboy20
Yeah
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
It depends, really - if you have a good hosting on a CDN, it makes sense to host your own files. The first option is also valid, and perfectly fine - but there could be a rare case when you just don't get the files because Google's own CDN is down.
I'll repeat the link that I've posted already - https://sia.codes/posts/making-google-fonts-faster/
Making Google Fonts Faster in 2022
If you use Google Fonts, a few additional steps can lead to much faster load times. Learn about preconnect, optimal placement, font display, preload, and more in this post.
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
If your app is on a CDN, you are good to go - this way, with preloading, you should avoid FOUT also, which is possible when using Google CDN.
Took a look at root.tsx/css - LGTM.
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Sounds good. Maybe it would make sense to use the variable font variant, if it's available.
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Nope
web.dev
Introduction to variable fonts on the web
How variable fonts work, how typographers implement variable fonts, and how to work with variable fonts in CSS.
Cloudflare is much faster than vercel in my experience
At least with sveltekit
Hi everyone
I see this post, and I'm trying to figure out how to load Google Fonts to my first project (to learn SolidJS)
Any suggestion?