Issue with installing web font

Question

So I'm having a problem installing new font to this site
http://shop3.afsaionco.cafe24.com/

This is what I did ...

1. I uploaded font files into ftp
(I made sure I linked the font into correct location & correct name)

2.I linked font files into css

@font-face{
    font-family:"AvantGardeGothicITC W01 Demi";
    src:url("/_wg/library/font/09084aa9-ea01-41e8-a48b-f50a0140a5f8.eot?#iefix");
    src:url("/_wg/library/font/09084aa9-ea01-41e8-a48b-f50a0140a5f8.eot?#iefix") format("eot"),
        url("/_wg/library/font/0d291d38-c6e0-490d-87d0-44a67459b66f.woff2") format("woff2"),
        url("/_wg/library/font/8f2d8a6d-bbd7-4e31-b0ae-e8463f00e5d8.woff") format("woff"),
        url("/_wg/library/font/e75a3380-27b0-4f88-9425-d3c364b421cb.ttf") format("truetype");
}
@font-face{
    font-family:"AvantGardeGothicITC W01 Dm Obl";
    src:url("/_wg/library/font/9f7a56d2-23f0-4dc7-a542-bd22a588ecd2.eot?#iefix");
    src:url("/_wg/library/font/9f7a56d2-23f0-4dc7-a542-bd22a588ecd2.eot?#iefix") format("eot"),
        url("/_wg/library/font/b4cb7559-dc94-43a6-b71a-a8ecc727118a.woff2") format("woff2"),
        url("/_wg/library/font/d76bf03a-2f4b-4567-9ab5-5766957e5a4d.woff") format("woff"),
        url("/_wg/library/font/3ae1178d-3fc1-4efb-b644-e99ef3f39a09.ttf") format("truetype");
}
@font-face{
    font-family:"AvantGardeGothicITC W01 Book";
    src:url("/_wg/library/font/a98bdca9-ab20-41a6-98f3-ed6bb54ed69e.eot?#iefix");
    src:url("/_wg/library/font/a98bdca9-ab20-41a6-98f3-ed6bb54ed69e.eot?#iefix") format("eot"),
        url("/_wg/library/font/5b13893e-ac07-4b49-b0e4-355de4e4df8d.woff2") format("woff2"),
        url("/_wg/library/font/a9e70966-2348-4c54-ace1-7f809fcee055.woff") format("woff"),
        url("/_wg/library/font/9cb9e06e-0507-4768-ad8f-cba7f3ec98b6.ttf") format("truetype");
}
@font-face{
    font-family:"AvantGardeGothicITC W01 Bk Obl";
    src:url("/_wg/library/font/2e5d7ec4-040b-4dc0-a849-68d6d09ed47c.eot?#iefix");
    src:url("/_wg/library/font/2e5d7ec4-040b-4dc0-a849-68d6d09ed47c.eot?#iefix") format("eot"),
        url("/_wg/library/font/4cb92b29-fd12-480a-8bce-3199256d07a5.woff2") format("woff2"),
        url("/_wg/library/font/e9d0be45-fe56-4db5-aad8-8ce6916f9aca.woff") format("woff"),
        url("/_wg/library/font/0ee45fbd-9079-4aa6-aab0-316074ca2b56.ttf") format("truetype");
}

3. Then I added the font into common.css file

html { width:100%; height:100%; font-family:"AvantGardeGothicITC W01 Demi", "AvantGardeGothicITC W01 Dm Obl", "AvantGardeGothicITC W01 Book", "AvantGardeGothicITC W01 Bk Obl"}

body,code { font:0.75em "AvantGardeGothicITC W01 Demi", "AvantGardeGothicITC W01 Dm Obl", "AvantGardeGothicITC W01 Book", "AvantGardeGothicITC W01 Bk Obl", sans-serif; color:#353535; background:#fff; }

Like so...

However, It is still linking to some random deafault.css file I can't even locate. Why is the site refusing so much to use the font I downloaded and keep applying default font? (The problem is occuring both in internet explorer and chrome)

Please help!!!!

Sam Pearson Sam Pearson · Accepted Answer · 2018-07-18T08:53:50

CSS cascades (Cascading Stylesheet) so your custom CSS is probably being loaded before your default.css file.

The easiest way would be to remove the font rules from the default CSS. I wouldn't advise it but you could get around it by adding !important to the end of each rule e.g

html { width:100%; height:100%; font-family:"AvantGardeGothicITC W01 Demi", "AvantGardeGothicITC W01 Dm Obl", "AvantGardeGothicITC W01 Book", "AvantGardeGothicITC W01 Bk Obl" !important}

body,code { font:0.75em "AvantGardeGothicITC W01 Demi", "AvantGardeGothicITC W01 Dm Obl", "AvantGardeGothicITC W01 Book", "AvantGardeGothicITC W01 Bk Obl", sans-serif !important; color:#353535; background:#fff; }

Issue with installing web font

1 Answers