search

ColorlibHQ / shapely

Free multipurpose WordPress theme built using Bootstrap
https://colorlib.com/wp/themes/shapely/
62 stars 61 forks source link

Optimize font loading techniques #299

Closed martijn19811 closed 2 years ago

martijn19811 commented 4 years ago

Right now, the Google Fonts theme font Raleway is inserted in the HTML like this: <link rel=stylesheet id=shapely-fonts-css href='//fonts.googleapis.com/css?family=Raleway%3A100%2C300%2C400%2C500%2C600%2C700&#038;ver=5.3.2' type=text/css media=all>

For performance reasons it'd better do add display=swap as a parameter (https://addyosmani.com/blog/google-fonts-font-display/).

This theme also uses @font-face in the CSS for Font Awesome and Glyphicons Halflings. Please add the following property to the @font-face block of both fonts in the CSS: font-display: block. 'Swap' would not work here, as they're icons and not normal fonts, so an immediate fallback wouldn't be possible. Font-display: block would still improve the PageSpeed score

This will fix all PageSpeed issues that still occur with this theme:

mahendrapratap4022 commented 2 years ago

Hi @martijn19811 We have added your request for a display swap in https://github.com/ColorlibHQ/shapely/pull/316 and for font-display: block where @font-face is used you can customize it in your end because @font-face is used in standard font awesome and bootstrap file so we can not change it. Thanks