FontAwesome not loading / showing weired signs from global.css

[DRMasterChief]

Hello,  i have a strange thing with FontAwesome  - this is not loading since we have moved to an other faster hosting plan.  It only shows weired signs in the Frontoffice,  e.g. at button cart, contact and so on.  Pls. refer to the picture.

The 'old' hosting plan was with Apache and MySQL,  the new is with nginx and MariaDB on SSD drives.  Not sure if this can be a reason?  The move was directly with copying all files and import DB via phpMyAdmin. 

We are not using the standard theme,  but when i change the frontend theme to default, the FontAwesome will NOT be loaded either.

I have checked path and files again and again and the files are stored correctly,  i also have tried various permissions, without any effect.  In  global.css  there is the following call:

src: url ("../ fonts / font-awesome / fontawesome-webfont.eot? v = 4.6.3");

src: url ("../ fonts / font-awesome / fontawesome-webfont.eot? # iefix & v = 4.6.3") format ("embedded-opentype"), url ("../ fonts / font-awesome / fontawesome -webfont.woff2? v = 4.6.3 ") format (" woff2 "), url (" ../ fonts / font-awesome / fontawesome-webfont.woff? v = 4.6.3 ") format (" woff ") , url ("../ fonts / font-awesome / fontawesome-webfont.ttf? v = 4.6.3") format ("truetype"), url ("../ fonts / font-awesome / fontawesome-webfont.svg ? v = 4.6.3 # fontawesomeregular ") format (" svg ");

 

and the direct path on server is:  /public_html/shop/themes/community-theme-default/fonts/font-awesome

So this file is also offered for download when called up in the browser and is therefore found (the other file extensions too):

mydomain.xyz/themes/community-theme-default/fonts/font-awesome/fontawesome-webfont.eot
mydomain.xyz/themes/community-theme-default/fonts/font-awesome/fontawesome-webfont.woff2
etc.

We have deleted or emptied the .htaccess  too,  but with no success or other result.  Do you have any idea or solution?!  thank you

Edited March 31, 2020 by DRMasterChief

[datakick]

What does javascript error console says?

 

[DRMasterChief]

nothing,  no error, no warning  😰

[datakick]

What content-type is returned for these font resources? Browser might not load fonts if the resourse is served with invalid or incorrect content type.

[DRMasterChief]

When i type in the direct path into the browser, then the files are been downloaded.  Could there be something in the .htaccess which goes wrong  (AddFile e.g.)? 

[datakick]

3 minutes ago, DRMasterChief said:

When i type in the direct path into the browser, then the files are been downloaded.  Could there be something in the .htaccess which goes wrong  (AddFile e.g.)? 

You wrote you are using nginx --> .htaccess is therefore irrelevant  (unless you have apache behind nginx, which would be kinda weird)

You didn't respond to my question -- what content type is the font resource served with? Look into network tab

[DRMasterChief]

it seems to be font:   (but preview is weired, not sure if this is normal for this type of file) 

 

Edited March 31, 2020 by DRMasterChief

[DRMasterChief]

and here another site with 3 fonts: 

 

[datakick]

I still don't see the what is inside Content-Type header 🙂

[DRMasterChief]

uff,  this is all i get from my Chrome.   The fonts should be  loaded from local hosting source,  not via online / webservice ! 

 

Edited March 31, 2020 by DRMasterChief

[datakick]

Content type should be font/woff2. You should adjust your nginx configuration accordingly.

 

[DRMasterChief]

and this is from startpage,  there is no content-type showing !! 

[DRMasterChief]

Server is  Litespeed .  I can set  Apache Handle in CPanel control panel, is this correct or useful for this? 

 

Edited March 31, 2020 by DRMasterChief

[DRMasterChief]

Hello,

now i have checked with 'old' hosting  (there are no such problems there).  The Chrome dev tools give the same content type  and this tb site works fine.  So now ?!? 

 

[toplakd]

Can you also check MIME Types (should be next to Apache handlers in Cpanel)

 

[DRMasterChief]

Hello @toplakd ,  i have checked this in CPanel and it is correct  (same as your picture).

Could this error caused by anything in DB and utf-8  (or wrong settings for utf-8 when DB was transfered)? 

edit:  now i have rechecked all DB tables,  some of them are  utf8_generel_ci ,   most are  utf8mb4_unicode_ci .  I have set all tables in the new hosting to the same as old hosting,  but no success  😩

Edited April 1, 2020 by DRMasterChief

[DRMasterChief]

Hi,  still no success here. I do a backup with MySQLDumper, which usually is flawless, then import this into the new hosting.  Still the same.  Also checked the collations and tried different. 

Think i have to install tb from ground,  then install Theme too.  But i have a lot of customized files  (Frontend and translations),  how to find and copy them? 

[datakick]

12 minutes ago, DRMasterChief said:

Hi,  still no success here. I do a backup with MySQLDumper, which usually is flawless, then import this into the new hosting.  Still the same.  Also checked the collations and tried different. 

Think i have to install tb from ground,  then install Theme too.  But i have a lot of customized files  (Frontend and translations),  how to find and copy them? 

I don't think this has anything to do with tb, but it's misconfiguration of server. I really believe that if you fix content-type it will work correctly. Content type tells browser how to interpret file. If server send invalid, or unknow, type then browser just don't know what to do with the file. 

Note: in your last screenshot you are displaying content type for woff file type, not for woff2

Note2: specification is very clear about mime type: https://www.w3.org/TR/WOFF2/#IMT

According to specification, woff2 mime type is font/woff2. Your server sends application/font-woff2

 

[DRMasterChief]

Hello @datakick  thank you for your idea and reply,  glad about this.

But... please see my posting from   Tuesday at 10:38 PM  and the picture.  The 'old' hosting shows the same in Chrome and this works without these problems.

Please give me some minutes,  at the moment i will do a fresh installation of tb in the same hosting in a separate folder and database, lets see how this is then.  Maybe i have to contact the hoster then again,  with informaiton about your link  for mime type. 

Edited April 3, 2020 by DRMasterChief

[datakick]

25 minutes ago, DRMasterChief said:

But... please see my posting from   Tuesday at 10:38 PM  and the picture.  The 'old' hosting shows the same in Chrome and this works without these problems.

see my previous note -- your screenshots shows loading of *.woff, not *.woff2 -- these are different formats, with different content types

[DRMasterChief]

Have done a new picture, please have a look at this  (from old / current hosting),  woff would be  'enough' for the symbols,  but there is also a woff2  which is loaded and seems to be correct on the old hosting.

On the 'new' hosting,  the Open Sans font   is not be loaded at all,  wtf  ? 

 

[toplakd]

14 minutes ago, DRMasterChief said:

On the 'new' hosting,  the Open Sans font   is not be loaded at all,  wtf  ?

Because of this:

This is the main source of the problem. There are lot of infos on google regarding not loading fonts/js/css due to wrong mime types.

Edited April 3, 2020 by toplakd

[DRMasterChief]

Hello,  i have contacted the support from hoster.  They told me, that in   .htaccess  the data is already included:

...
AddType application/font-woff .woff
AddType application/font-woff2 .woff2
...

but no success,  also not with the fresh clean install of tb. 

[toplakd]

There is nothing wrong with tb.

Read datakick posts once again, about correct mime types.

Your server is sending wrong mime for fonts and they are therefore not displayed.

Edited April 3, 2020 by toplakd

[DRMasterChief]

Dont get me wrong,  i also think that there is no problem with  tb  🙂

The hoster will give me an account on an Apache server,  i will install and test my migration then and hope the best! 

[toplakd]

11 hours ago, DRMasterChief said:

Hello,  i have contacted the support from hoster.  They told me, that in   .htaccess  the data is already included:

...
AddType application/font-woff .woff
AddType application/font-woff2 .woff2
...

but no success,  also not with the fresh clean install of tb. 

It should say:

AddType font/woff .woff
AddType font/woff2 .woff2

https://github.com/fontello/fontello/wiki/How-to-setup-server-to-serve-fonts

However, i just tried and deleted my .htaccess on stock tb instalation and generated one through Preferences/Seo & URLs/Generate .htaccess file

Generated file does indeed have

AddType application/font-woff .woff
AddType application/font-woff2 .woff2

Edited April 4, 2020 by toplakd