Tagged: font
-
AuthorPosts
-
February 19, 2023 at 10:17 pm #1398567
Dear Kriesi-Team,
I added two fonts (gothic and gothic-bold) using @font-face as described in this topic: https://kriesi.at/support/topic/font-does-not-show-on-website/. But the fonts are not showing (on Safari, Firefox and Chrome).
The idea is to have main font gothic for all copy and all headings gothic-bold.
Here is the code in the child theme css:
@font-face {
font-family: ‘gothic’;
src: url(‘wp-content/uploads/avia_fonts/type_fonts/gothic.ttf’) format(‘truetype’);
}@font-face {
font-family: ‘gothic-bold’;
src: url(‘wp-content/uploads/avia_fonts/type_fonts/gothic-bold.ttf’) format(‘truetype’);
}body {
font-family: ‘gothic’, Fallback, sans-serif;
font-weight: normal;
}.av-special-heading-tag {
font-family: ‘gothic-bold’, Fallback, sans-serif;
font-weight: normal;
}I don’t know what I am doing wrong.
Can you please support. THANK YOU
February 19, 2023 at 10:51 pm #1398570Hey Jables,
I assume that you uploaded them via FTP, please check the file name for gothic-bold.ttf as it is a 404.
I was able to get gothic.ttf to load by changing the url but not gothic-bold.ttf
I see you are not using SSL, do you plan to?
I adjusted your css because body is too weak as a css rule, this works for most of your plain text not including headers:body #wrap_all #main { font-family: 'gothic', sans-serif; font-weight: normal; }
For your special heading this css is better:
#main h1.av-special-heading-tag { font-family: 'gothic-bold', sans-serif; font-weight: normal; }
Best regards,
MikeFebruary 20, 2023 at 7:49 am #1398582Hi Mike,
Thank you for the quick response.
You were right, the url for gothic-bold was instead “-” with “_”.
I did all the changes in CSS but it’s still not working. I also cleared the cache.Any idea?
Thank you
JablesPS.: Yes, I am planing to use SSL when the website goes online.
February 20, 2023 at 12:38 pm #1398612Hi,
Thanks for the feedback, please note that you need to have the full url in your stylesheet because you have two different url’s in your
WordPress ▸ Settings ▸ General ▸ Site Address
WordPress ▸ Settings ▸ General ▸ WordPress Address
when you only use /wp-content/uploads/avia_fonts/type_fonts/gothic.ttf in your css @font-face the correct address in not used, I corrected this for you and now the gothic.ttf is loading correctly.
But gothic_bold.ttf or gothic-bold.ttf is not correct, it still gives a 404, please include FTP access so we can see what the path & file name for the bold version of the font is a correct your @font-face cssBest regards,
MikeFebruary 22, 2023 at 4:46 pm #1398909Awesome it worked.
It was the URL and the wrong CSS.
Thank you a lot!February 22, 2023 at 6:51 pm #1398926Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.Best regards,
Mike -
AuthorPosts
- The topic ‘Font not showing after adding using @font-face’ is closed to new replies.