Tagged: 

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #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

    #1398570

    Hey 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,
    Mike

    #1398582

    Hi 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
    Jables

    PS.: Yes, I am planing to use SSL when the website goes online.

    #1398612

    Hi,
    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 css

    Best regards,
    Mike

    #1398909

    Awesome it worked.
    It was the URL and the wrong CSS.
    Thank you a lot!

    #1398926

    Hi,
    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

Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Font not showing after adding using @font-face’ is closed to new replies.