-
AuthorPosts
-
August 26, 2016 at 9:32 am #678020
Hi,
Please take a look at the test page in Private area.> In this page, I want to have a custom font (Dinar) for the button.
–
This is what I had already done to make that possible:
1>> I have already upload 2 custom fonts in Enfold-Child folder, names are “IRANSans” + “Dinar” and I also added @font-face commands for these fonts in custom.css file in Enfold; exactly like the below code:@font-face { font-family: 'IRANSans'; src: url('http://inomax.ir/wp-content/webfonts/IRANSansweb.eot'); src: url('http://inomax.ir/wp-content/webfonts/IRANSansweb.eot?#iefix') format('embedded-opentype'), url('http://inomax.ir/wp-content/webfonts/IRANSansweb.woff2') format('woff2'), url('http://inomax.ir/wp-content/webfonts/IRANSansweb.woff') format('woff'), url('http://inomax.ir/wp-content/webfonts/IRANSansweb.ttf') format('truetype'), url('http://inomax.ir/wp-content/webfonts/IRANSansweb.svg#IRANSans') format('svg'); } fieldset label { font-family: "IRANSans" !important; } @font-face { font-family: 'Dinar'; src: url('http://inomax.ir/wp-content/webfonts/dinar.eot'); src: url('http://inomax.ir/wp-content/webfonts/dinar.eot?#iefix') format('embedded-opentype'), url('http://inomax.ir/wp-content/webfonts/dinar.woff2') format('woff2'), url('http://inomax.ir/wp-content/webfonts/dinar.woff') format('woff'), url('http://inomax.ir/wp-content/webfonts/dinar.ttf') format('truetype'), url('http://inomax.ir/wp-content/webfonts/dinar.svg#IRANSans') format('svg'); }
2>> “IRANSans” is now shows properly in the whole of the website, there is no problem with this font.
3>> But for the button, I applied custom css class to that button element, the class name was choose as “test-pg-title”
4>> I then add this below code to the Quick Css part:#top .test-pg-title a .avia_iconbox_title { font-family: 'Dinar' !important; }
But, the “button” is still doesn’t show the desired font, “Dinar”.
Please let me know.
Regards,
SadeghAugust 30, 2016 at 5:27 am #679263Hey Sadegh!
Thank you for using Enfold.
We got the following errors in the console. Please follow this documentation. http://kriesi.at/documentation/enfold/enable-cors/
http://www.inomax.ir/wp-content/themes/enfold-child/webfonts/dinar.woff2 Failed to load resource: the server responded with a status of 404 (Not Found)
2016-08-30 11:22:55.189 http://www.inomax.ir/wp-content/themes/enfold-child/webfonts/dinar.woff Failed to load resource: the server responded with a status of 404 (Not Found)
2016-08-30 11:22:56.359 http://www.inomax.ir/wp-content/themes/enfold-child/webfonts/dinar.ttf Failed to load resource: the server responded with a status of 404 (Not Found)
2016-08-30 11:22:57.352 (index):1 Redirect at origin ‘http://inomax.ir’ has been blocked from loading by Cross-Origin Resource Sharing policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://www.inomax.ir’ is therefore not allowed access.
2016-08-30 11:22:58.048 (index):1 Redirect at origin ‘http://inomax.ir’ has been blocked from loading by Cross-Origin Resource Sharing policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://www.inomax.ir’ is therefore not allowed access.
2016-08-30 11:22:58.801 (index):1 Redirect at origin ‘http://inomax.ir’ has been blocked from loading by Cross-Origin Resource Sharing policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://www.inomax.ir’ is therefore not allowed access.Best regards,
IsmaelAugust 30, 2016 at 2:11 pm #679433Hi Ismael,
I already added that code to the .htaccess file. But still, it doesn’t work at all.
<FilesMatch "\.(ttf|otf|woff)$"> <IfModule mod_headers.c> Header set Access-Control-Allow-Origin "*" </IfModule> </FilesMatch>
an image from .htaccess :
an image from webfonts folder in cpanel:
Regards,
Sadegh- This reply was modified 8 years, 3 months ago by Sadegh.
August 30, 2016 at 3:16 pm #679495Hey!
Please change your CSS code to following one
@font-face { font-family: 'IRANSans'; src: url('webfonts/IRANSansweb.eot'); src: url('webfonts/IRANSansweb.eot?#iefix') format('embedded-opentype'), url('webfonts/IRANSansweb.woff2') format('woff2'), url('webfonts/IRANSansweb.woff') format('woff'), url('webfonts/IRANSansweb.ttf') format('truetype'), url('webfonts/IRANSansweb.svg#IRANSans') format('svg'); } fieldset label { font-family: "IRANSans" !important; } @font-face { font-family: 'Dinar'; src: url('webfonts/dinar.eot'); src: url('webfonts/dinar.eot?#iefix') format('embedded-opentype'), url('webfonts/dinar.woff2') format('woff2'), url('webfonts/dinar.woff') format('woff'), url('webfonts/dinar.ttf') format('truetype'), url('webfonts/dinar.svg#IRANSans') format('svg'); }
Cheers!
YigitAugust 30, 2016 at 3:41 pm #679519Hey Yigit,
Thanks a lot, the problem is solved.
(another font -Koodak- has been uploaded for another try, and it cleared out that they have converted “Dinar” font wrongly into .eot/.woff/.ttf/.svg – sorry for that)(you may now close the thread please)
Regards,
Sadegh -
AuthorPosts
- The topic ‘custom font in custom css class’ is closed to new replies.