How To Call Locally Fonts For FontAwesome & Woodmart Font

Hello, folksI am getting an error for 2 fonts in page insights which are generating 2 different requests. Here is the link:

/themes/woodmart/fonts/fontawesome-webfont.woff2?v=4.7.0
/wp-content/themes/woodmart/fonts/woodmart-font.woff

Both the fonts are already in the local theme directory I am planning to call those as

@font-face {
font-family: ‘Arvo’;
font-display: auto;
src: local(‘Arvo’), url(https://fonts.gstatic.com/s/arvo/v9/rC7kKhY-eUDY-ucISTIf5PesZW2xOQ-xsNqO47m55DA.woff2) format(‘woff2’);
}

method suggest by Google its self here is a link:

https://developers.google.com/web/updates/2016/02/font-display.

I guess this is something related to the core theme. Can you please tell me how can I resolve this issue?

https://www.de-marca.com

I am planning to achieve 100/100 Page insight score as my client is referring page insight as page speed test tool. Want 100% score.

Hi,

Sorry, but your question is not quite clear for us. What errors do you mean?
Please, disable all external plugins first so we can check it.

Regards

Sorry for been unclear:

Here is what trying to say:
Ensure text remains visible during webfont load

…fonts/fontawesome-webfont.woff2?v=4.7.0(www.de-marca.com)
…fonts/woodmart-font.woff(www.de-marca.com)

What I have search so far tell that you can solve this issue with:

@font-face {
font-family: ‘Arvo’;
font-display: auto;
src: local(‘Arvo’), url(https://fonts.gstatic.com/s/arvo/v9/rC7kKhY-eUDY-ucISTIf5PesZW2xOQ-xsNqO47m55DA.woff2) format(‘woff2’);
}

Or is there any way to disable the above mention 2 fonts.?

Basically I want to disable 2 fonts from the theme which are:

…fonts/fontawesome-webfont.woff2?v=4.7.0(www.de-marca.com)
…fonts/woodmart-font.woff(www.de-marca.com)

Can you guide me how can I do this?

Font awesome seems to be loaded by plugins and we don’t know where you can customize the code exactly. Our WoodMart font is required for vecor icons on your website and doesn’t have a @font-face so the code can’t be applied there.

Regards

Hello,

I would like to agree (to OP). If there is anyway to get the @font-face to work that would be great as I have a few seconds extra loading time because of this. I don’t want to change the font but if I do will that make the ‘vector icons’ not operate?

Screenshot to show: http://digitdoublerapparel.com/imgs/webfont.png and the link it explains on: https://developers.google.com/web/updates/2016/02/font-display

Thanks!

Sorry, but they can’t be disabled since you will lose all the icons in our theme. If you want to do this, you will have to customize theme CSS files but we don’t have an instruction for this.

I have disabled all the external google fonts using auto optimized WordPress plugin but these 2 are causing real trouble. It’s making my website 2-second delay and my client is comparing this store performance with amazon 😛

Can you help me with any further issue showed by page insights
https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.de-marca.com&tab=desktop

Would be great if any one can help me out for further optimization

What exact problem do you mean? We don’t see any issues related to our theme now. Sorry, but website optimization is not in our theme support scope.

Just want to update that I appreciate the speed optimizations with the new v4 of the theme.

Having plugins deactivated and features like this (font-display) implemented has helped my site speed up some (and improve on PageSpeed Insights by ~35 points!).

I chose SWAP on Google Fonts & FALLBACK on Icon Fonts – this gave me the pass for all rendering fonts (had to do icon fonts as well or it still showed font awesome lagging). But your mileage may vary, so you may need to chose something else. Attached is the PS Insights passed diagnostic.

Thanks for implementing this 🙂

Attachments:

You must be logged in to view attached files.

Great, we are glad that it works for you.

[Author]

Posts