Basically I need to load specific font load with lesser loading time on website. I am using @font-face to add the specific font on my site. It works well, but it is consuming lots of time to load on site.
At loading time, the website's content is shown without conversion (in coded language), which is not good for the site's security.
Any idea to load it with lesser loading time?
- Load the stylesheet at the head of your document. That way, it's parsed first.
- Reduce the characters/glyphs of your font to lessen the size. If you just do English, there's no need to load the additional foreign characters.
- Use a CDN. This can also apply to images, stylesheets and scripts.
- Fonts can be embedded to the CSS as Base64. The stylesheet will be larger, but will reduce HTTP requests.
- Most importantly, cache your resources. If they are not going to change it any time in the near future, consider setting the right headers to cache it forever.