adisaktijrs / hexo-theme-minima

A lightweight dark/light theme for Hexo.js
https://adisaktijrs.github.io/minima
MIT License
220 stars 51 forks source link

Google Pagespeed recommendation - font loading #14

Closed navjotjsingh closed 3 years ago

navjotjsingh commented 3 years ago

As I was checking Pagespeed stats, Google hits me with this warning

I believe it should be a simple fix?

adisaktijrs commented 3 years ago

Hi, sure we can quick-fix it by adding font-display: swap; to @font-face on Minima custom.css file.

@font-face {
  font-family: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/dm-serif-display-v4-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('DM Serif Display Regular'), local('DMSerifDisplay-Regular'),
       url('../fonts/dm-serif-display-v4-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/dm-serif-display-v4-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/dm-serif-display-v4-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/dm-serif-display-v4-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/dm-serif-display-v4-latin-regular.svg#DMSerifDisplay') format('svg'); /* Legacy iOS */

  font-display: swap; /* Add font-display */
}

/* inter-regular - latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/inter-v2-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/inter-v2-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/inter-v2-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/inter-v2-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/inter-v2-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/inter-v2-latin-regular.svg#Inter') format('svg'); /* Legacy iOS */

  font-display: swap; /* Add font-display */
}

Note: It will use/show the system font first before the main font is being loaded. Thank you

navjotjsingh commented 3 years ago

Created a pull request for the same.