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
thetarnav
thetarnav2y ago
Are you putting it in the html head or body?
Ho-kage
Ho-kageOP2y ago
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.
high1
high12y ago
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
Ho-kage
Ho-kageOP2y ago
@.high1 What would be your recommendation?
high1
high12y ago
@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.
Ho-kage
Ho-kageOP2y ago
Thanks for the response @.high1 , I appreciate it.
A Badly Drawn Wobbler
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
high1
high12y ago
Why would you bundle fonts?
high1
high12y ago
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.
A Badly Drawn Wobbler
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
high1
high12y ago
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.
A Badly Drawn Wobbler
That's... What I do
high1
high12y ago
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 &quot;react&quot;; import { Helmet } from &quot;react-helmet&quot;; import &qu...
Razboy20
Razboy202y ago
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)
<Head>
<Title>Some Project</Title>
<Meta charset="utf-8" />
<Meta name="viewport" content="width=device-width, initial-scale=1" />
<Link rel="preconnect" href="https://fonts.googleapis.com" />
<Link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
<Link
href="https://fonts.googleapis.com/css2?family=Cedarville+Cursive&family=Recursive:wght@300;400;500;600;700;800&display=swap"
rel="stylesheet"
/>
</Head>
<Head>
<Title>Some Project</Title>
<Meta charset="utf-8" />
<Meta name="viewport" content="width=device-width, initial-scale=1" />
<Link rel="preconnect" href="https://fonts.googleapis.com" />
<Link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
<Link
href="https://fonts.googleapis.com/css2?family=Cedarville+Cursive&family=Recursive:wght@300;400;500;600;700;800&display=swap"
rel="stylesheet"
/>
</Head>
high1
high12y ago
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 &quot;react&quot;; import { Helmet } from &quot;react-helmet&quot;; import &qu...
Razboy20
Razboy202y ago
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)
high1
high12y ago
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.
Razboy20
Razboy202y ago
Yeah 👍 @.high1 however they do mention that they place it in the <Head> element of the root.tsx, so it should be the same
high1
high12y ago
<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?
Razboy20
Razboy202y ago
mhm but it gets server-side rendered
high1
high12y ago
SO, you need to download the framework first
Razboy20
Razboy202y ago
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.
high1
high12y ago
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.
Razboy20
Razboy202y ago
Whenever I actually make a request, the html that is returned is as follows:
<!DOCTYPE html><html lang="en" ><head ><title data-sm="0-0-0-0-0-0-0-0-0-0-0-0">Some app</title><meta data-sm="0-0-0-0-0-0-0-0-0-0-1-0" charset="utf-8"/><meta data-sm="0-0-0-0-0-0-0-0-0-0-2-0" name="viewport" content="width=device-width, initial-scale=1"/><link data-sm="0-0-0-0-0-0-0-0-0-0-3-0" rel="preconnect" href="https://fonts.googleapis.com"/><link data-sm="0-0-0-0-0-0-0-0-0-0-4-0" rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous"/><link data-sm="0-0-0-0-0-0-0-0-0-0-5-0" href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap" rel="stylesheet"/> ... etc.
<!DOCTYPE html><html lang="en" ><head ><title data-sm="0-0-0-0-0-0-0-0-0-0-0-0">Some app</title><meta data-sm="0-0-0-0-0-0-0-0-0-0-1-0" charset="utf-8"/><meta data-sm="0-0-0-0-0-0-0-0-0-0-2-0" name="viewport" content="width=device-width, initial-scale=1"/><link data-sm="0-0-0-0-0-0-0-0-0-0-3-0" rel="preconnect" href="https://fonts.googleapis.com"/><link data-sm="0-0-0-0-0-0-0-0-0-0-4-0" rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous"/><link data-sm="0-0-0-0-0-0-0-0-0-0-5-0" href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap" rel="stylesheet"/> ... etc.
high1
high12y ago
That's using index.html or Head component?
Razboy20
Razboy202y ago
head component in fact, an index.html does not exist in my project at all
high1
high12y ago
Yep, so it's SSR
Razboy20
Razboy202y ago
yeah
high1
high12y ago
Hope the docs explain this Should be there somewhere
Razboy20
Razboy202y ago
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
high1
high12y ago
Haven't had the chance to try it, but I assume that Head component deals with this transparently for the user.
Razboy20
Razboy202y ago
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
Razboy20
Razboy202y ago
SolidStart Beta Docuentation
SolidStart Beta Documentation
Early release documentation and resources for SolidStart Beta
Razboy20
Razboy202y ago
So e.g. would change the title in the head
high1
high12y ago
I assume that <Link > component is for routing, right?
Razboy20
Razboy202y ago
<Link> is for <link> <A> is for routing
high1
high12y ago
Ouch, my assumption was bad
Razboy20
Razboy202y ago
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)
high1
high12y ago
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.
Razboy20
Razboy202y ago
Mhm-I really prefer solid-start to any other framework I've used
high1
high12y ago
Then I need to correct myself - when using Solid Start, you should use <Link /> to load fonts
high1
high12y ago
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
Razboy20
Razboy202y ago
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
high1
high12y ago
This should be in root.tsx And should be a link element
Razboy20
Razboy202y ago
^ mentions here that it was
high1
high12y ago
Hm, and that's working for you?
Razboy20
Razboy202y ago
yup
high1
high12y ago
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
Razboy20
Razboy202y ago
Yeah
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
high1
high12y ago
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.
high1
high12y ago
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
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
high1
high12y ago
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
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
high1
high12y ago
Sounds good. Maybe it would make sense to use the variable font variant, if it's available.
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
high1
high12y ago
Nope
high1
high12y ago
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.
A Badly Drawn Wobbler
Cloudflare is much faster than vercel in my experience At least with sveltekit
Daniel Sousa @TutoDS
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?
Want results from more Discord servers?
Add your server