Why my webpage shakes after adding google font link in my html head tag?

I created a webpage in the Vs code. Then I choose a font from google-font and embedded its link in the head tag of HTML. Then added font family in CSS. It worked properly. As I was testing the webpage in a live sever extension. **I noticed whenever I write a single character in CSS, the page shakes a lot. When I stop writing code, shaking stops. During shaking Font becomes bigger, smaller, darker e.t.c without reason although I did nothing abut font .what is the problem behind this? How to stop this shaking?

It’s probably because you have code live synchronization enabled i.e. when you modify any CSS/HTML in your code editor and hit ‘save’, your browser will immediately reload the page in order to apply the changes you made to the code. And since you are importing Google fonts in the header of your HTML file, everytime the browser reloads the page it will also take some time to load your Google fonts - so first the browser displays your texts using default font, then the browser downloads and applies your Google font replacing the default one.

To solve this try not importing your Google font in the header, but instead download raw files of your selected Google font into your local environment and use @font-face in CSS to apply them → GUIDE here: css-tricks .com/snippets/css/using-font-face/

Thanks for your answer. I just solved this problem using a method. As I was using vs code. I set up an autosave option. The autosave delay option was set to 100 milliseconds. When I converted it to 1000 milliseconds, it worked without shaking the page.