Help with my portfolio page: Should I link to or import Google fonts?

[kernix]

I am importing a cursive Google font in my stylesheet, and I am using that for one element - my “logo” in the top left of the header which is just my initials.

I keep seeing that element “jump” whenever I visit the page. Would it be better to add a link into the head section rather than importing it? Here is a link to my portfolio page. Focus on the top left when you first go there - does “j.k.” skip or jump for you?

Also, is there a section in Chrome dev tools that will show me what is going on? Is it a ‘painting’ issue? What exactly causes that?

[saurabhv749]

cursive get’s applied as it takes a while to load too many fonts.
that’s why there is jump.

importing with scripts may do the trick first try to import ‘dancing script’.

[kernix]

Right now this is what I have:

@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@500;700&family=Lora:wght@400;500&family=Open+Sans:wght@400;500&display=swap');

Looks like I am importing 3 different fonts. So should I have a separate import for just the cursive font before an import for the other two?

[saurabhv749]

I downloaded the fonts from google and extracted them inside fonts folder

and it worked, try this out.

[kernix]

Let me try that because I saw the same issue with import and link.

[kernix]

I tried the @font-face thing and that didn’t seem to have a positive change either.

[saurabhv749]

I have found preload link types on MDN
then modified head to preload fonts

which just changed the order of assets to load here is final result

fonts are requested to load first, and here is netlify link
It loads with all fonts loaded so no change-font-family effect with 1MBPS download speed (throttled)
https://boring-blackwell-00657a.netlify.app/
In the end it’s on visitor’s internet

[kernix]

I removed “&display=swap” from the end of the link listing the fonts and that worked because using it means your site will always show the fallback font until the google font loads. And that is what was happening - the “cursive” style was being applied. I got a response in a subreddit that “removing “swap” is the quickest way to fix it but is mildly worse for SEO”, but I don’t care about SEO since it is a portfolio page meant to at least get me interviews.

I added the display=swap back in and changed preconnectto preload for the first two links and that also prevented the flash of the fallback “cursive”. Now it’s a question of which method to use.

Why did you duplicate my portfolio on Netlify? That seems to be a lot of work just to test out the preload value.

[saurabhv749]

I’m glad you found the right tweaks.

@kernix

That seems to be a lot of work just to test out the preload value.

because it was working in localhost very well just to test if it’s also the case on hosted site .

[kernix]

Got it - thanks for the help!