# Optimize font loading techniques

**URL:** <https://colorlibsupport.com/t/optimize-font-loading-techniques/24877>\
**Category:** Shapely\
**Created:** [January 11, 2020, 10:43am UTC](https://colorlibsupport.com/t/optimize-font-loading-techniques/24877 "2020-01-11T10:43:58Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![martijn1981](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/m/34f0e0/32.png) [@martijn1981](https://colorlibsupport.com/u/martijn1981)\
**Post date:** [January 11, 2020, 10:43am UTC](https://colorlibsupport.com/t/optimize-font-loading-techniques/24877/1 "2020-01-11T10:43:58Z")

</div>

Hi,

There are several ways the Pagespeed score of Shapely websites can easily be higher. Here is one I’d like you to al least consider

- Please add a `display=swap` parameter to the Google Fonts Raleway link ([https://addyosmani.com/blog/google-fonts-font-display/](https://addyosmani.com/blog/google-fonts-font-display/))

---

<div class="post-metadata">

**Author:** ![martijn1981](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/m/34f0e0/32.png) [@martijn1981](https://colorlibsupport.com/u/martijn1981)\
**Post date:** [January 12, 2020, 6:56am UTC](https://colorlibsupport.com/t/optimize-font-loading-techniques/24877/2 "2020-01-12T06:56:30Z")

</div>

Also, please add `rel=preload` to the link itself, to properly prioritize the loading of the font:

[https://developers.google.com/web/updates/2016/03/link-rel-preload](https://developers.google.com/web/updates/2016/03/link-rel-preload)

---

<div class="post-metadata">

**Author:** ![colorlibsupport](https://colorlibsupport.com/user_avatar/colorlibsupport.com/colorlibsupport/32/1494_2.png) [@colorlibsupport](https://colorlibsupport.com/u/colorlibsupport)\
**Post date:** [January 13, 2020, 9:56am UTC](https://colorlibsupport.com/t/optimize-font-loading-techniques/24877/3 "2020-01-13T09:56:51Z")

</div>

Hello Martijn

Thank you for the suggestion, I will redirect your ticket to our developer, can’t promise anything they will decide implement it or not 🙂

---

<div class="post-metadata">

**Author:** ![martijn1981](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/m/34f0e0/32.png) [@martijn1981](https://colorlibsupport.com/u/martijn1981)\
**Post date:** [January 13, 2020, 10:50am UTC](https://colorlibsupport.com/t/optimize-font-loading-techniques/24877/4 "2020-01-13T10:50:27Z")

</div>

Hello,

thank you for all your efforts. Reading back, this could be made a bit clearer. Below there’s a summary of all the things that need to be done, including explanations. If you could forward that, that’d be great! Thanks 🙂

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&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/](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:**

- Eliminate render-blocking resources
- Ensure text remains visible during webfont load

---

<div class="post-metadata">

**Author:** ![martijn1981](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/m/34f0e0/32.png) [@martijn1981](https://colorlibsupport.com/u/martijn1981)\
**Post date:** [January 13, 2020, 12:57pm UTC](https://colorlibsupport.com/t/optimize-font-loading-techniques/24877/5 "2020-01-13T12:57:33Z")

</div>

Hope the above is clear enough. It would be awesome, because the PageSpeed score would drastically improve for every site using this theme. Again, many thanks!

---

<div class="post-metadata">

**Author:** ![colorlibsupport](https://colorlibsupport.com/user_avatar/colorlibsupport.com/colorlibsupport/32/1494_2.png) [@colorlibsupport](https://colorlibsupport.com/u/colorlibsupport)\
**Post date:** [January 14, 2020, 7:53am UTC](https://colorlibsupport.com/t/optimize-font-loading-techniques/24877/6 "2020-01-14T07:53:20Z")

</div>

Ah, Martijn thank you so much for your effort, it’s highly appreciated and yes, indeed now it’s clear 🙂