font flickering until it is loaded
Tagged: google font
- This topic has 15 replies, 3 voices, and was last updated 3 years, 9 months ago by
Zex.
-
AuthorPosts
-
December 30, 2019 at 4:07 pm #22443
maru
Participantim using agama pro for a client website and i see a flickering navigation because i use open sans condensed and until the font loads, default font is shown and looks not nice at all.
i was just wondering how to cache fonts on the browser, so that only the first time the flickering will occur but not every time when i change page etc.
Please advise how to improve that. Thank you in advance
December 30, 2019 at 4:35 pm #22446Zex
ModeratorHello, maru!
That could happen if you use Linked web fonts instead of the fonts which come with the theme.
Since the Open sans condensed font already is included in the theme, I suggest you use it.
Can you give me the address to the website?
Regards
December 31, 2019 at 6:38 am #22464maru
ParticipantHi,
im using the fonts used in the theme. My website is password protected because it is not finished yet. i will see if i can create an user for you.
Agama Pro uses Google fonts but i dont see a request to google apis for requesting them, i saw they are downloaded in the upload folder. am i right?
Best
December 31, 2019 at 12:25 pm #22476Zex
ModeratorHello, maru!
In that case, you can try two things in my opinion:
1. Host Google Fonts Locally, using the “OMGF” plugin.
Or Insert the fonts manually: Host Google Fonts Locally On WordPress: The Manual Method2. Try to Turn on the “Preloader”
https://prnt.sc/qhvftkIt would be great if I could log into your backend to see the problem on my own.
Regards
December 31, 2019 at 2:17 pm #22480maru
ParticipantHi Zex,
does Agama Pro request the google fonts from Google? as i told you before i dont see the request. I just see under fonts the fonts are being loaded from /upload folder inside wp-content/uploads/1Ptrg8zYS_SKggPNwJYtWqhPBg-14.woff
Am i wrong?is there a way i can send you a screenshot?
December 31, 2019 at 2:43 pm #22482Zex
ModeratorHello, maru!
We use the Kirki framework to get fonts from Google, so the fonts are not stored locally.
As I wrote to you in the previous post, you can try to Host the Google Fonts Locally, to avoid the flickering.PS: I personally using the Lightshot chrome extension to share the screenshots.
Regards
January 20, 2020 at 5:42 pm #23333maru
Participantfor storing fonts locally i need to disable the calls to googles api. Is this possible?
i see also the line <link href=’https://fonts.gstatic.com’ crossorigin rel=’preconnect’ /> in the source code…can i remove also that one?January 21, 2020 at 10:24 am #23399Jerry
KeymasterHello @maru,
There is a workaround to load custom fonts into the theme Kirki framework.
Check the example (you need some coding qualifications to do it yourself):
https://github.com/aristath/kirki/issues/1807#issuecomment-372140472
Regards
January 22, 2020 at 5:31 pm #23450maru
ParticipantHello Jerry, sorry for the second thread i opened.
There is this question that i need to get an answer because im working for a big client in germany and i want to recommend to buy Agama Pro but here the Data Protection is very important and i really need to disabled google fonts AND google maps. First because they dont need it and second we dont want to send data outside. So my questions is, can i disabled google fonts and google maps completely also this line that i see in the code?
<link href=”https://fonts.gstatic.com” crossorigin=”” rel=”preconnect”>
Please let me know as soon as possible.
Thank youBest,
MarinaJanuary 22, 2020 at 5:34 pm #23451maru
Participantim planning to buy a font to replace google font and add it on the css from the child theme i created.
January 22, 2020 at 6:39 pm #23454Jerry
KeymasterYou can try to disable Google fonts via your child theme by adding the next filter to the functions.php file:
add_filter( 'kirki/enqueue_google_fonts', '__return_empty_array' );
The above filter should stop google fonts enqueueing.
Best Regards
January 24, 2020 at 10:37 am #23526maru
ParticipantJerry then
1) is it possible to remove all calls to google requesting the fonts isnt it?
2) what about <link href=’https://fonts.gstatic.com’ crossorigin rel=’preconnect’ /> ?sorry to ask same thing many times, but it is still not clear, because i got different answers.
January 24, 2020 at 11:29 am #23529January 25, 2020 at 6:08 am #23560maru
ParticipantHello Jerry, it worked! thank you so much!
so now i could buy one font or host one google font in my own server, right?January 25, 2020 at 2:00 pm #23577maru
ParticipantI hosted 2 google fonts in the server and accessed those and all works fine!. You can close this thread if you want. Thank you for your help much appreciated.
-
AuthorPosts
- You must be logged in to reply to this topic.