0

I am using the Caveat font for my headers on a page, however the Caveat font only shows up after I refresh the page.

.title {
  font-family: 'Caveat' !important;
  color: #b8b8b8;
  font-size: 12vw;
  position: absolute;
  top: -25%;
  left: 5%;
  z-index: 100 !important;
}

.second-title {
 font-family: 'Caveat' !important;
 color: #b8b8b8;
 font-size: 12vw;
 position: absolute;
 top: -50%;
 left: 5%;
 z-index: 100 !important;
}

When I restart my local server and then go directly to the page (site.com/about.html for example) it seems to work, but if I restart the server go to the page through a link on the home page, it still has the issue of the font not loading unless I refresh the page.

None of the other fonts or pages seem to have this issue.

SJK
  • 135
  • 1
  • 10
  • Could you show us how you set Caveat up? – A Haworth Jan 18 '21 at 05:42
  • I have in the head of the page. – SJK Jan 18 '21 at 05:46
  • It sounds as though something is being rendered before the font is fully loaded. Does the most recent answer (from @fluffy) on [link]https://stackoverflow.com/questions/4712242/wait-for-fonts-to-load-before-rendering-web-page help? Also, do you have a before your link? It helps speed things up. – A Haworth Jan 18 '21 at 06:12

0 Answers0