Hey again,

I'm kinda new to WP and Webdevelopment. I'd like to use this font for h2 but keep getting error messages.

I followed these two steps:

(1) Upload fonts via FTP to css/fonts/ inside of salient child theme

(2) Add custom CSS in Wordpress:

@font-face {   font-family: 'ITCAVANTGARDEBOLD';   src: url('css/fonts/itc_avant_garde_gothic_lt_bold-webfont.eot');   src: url('css/fonts/itc_avant_garde_gothic_lt_bold-webfont.eot?#iefix') format('embedded-opentype'),        url('css/fonts/itc_avant_garde_gothic_lt_bold-webfont.woff2') format('woff2'),        url('css/fonts/itc_avant_garde_gothic_lt_bold-webfont.woff') format('woff'),        url('css/fonts/itc_avant_garde_gothic_lt_bold-webfont.ttf')  format('truetype'),        url('css/fonts/itc_avant_garde_gothic_lt_bold-webfont.svg#svgFontName') format('svg'); }

h2 { font-family: 'ITCAVANTGARDEBOLD'!important; }

- - - - - - - - - -

Now

PROBLEM 1: My CSS seems to ignore my changes (they are struck through in browser, see screenshot).

PROBLEM 2: CSS seems to be unable to locate the fonts (see screenshot).

What am I doing wrong?

Thank you but the third link doesn't work, this would be the interesting part (using @font-face):

https://premium.wpmudev.org/blog/custom-fonts-css/

Can you fix this?

Thank you so much.

Hi Tahir

I think davidduering is referring to that the link you provided to wpmudev is broken.

I'm trying to add a custom font to, but I need more instructions on how to add a custom @font-face.

I have applied the @font-face styling in the custom CSS section in Salient, and it's working fine when i hardcode the font into style.css. 

After that I applied the code you provided to function.php, and specified the correct font name.

The font is appearing in the Font Family field, but I can't access the different font weights and preview of the font is incorrect.

So can you make a more detailed guide to adding a custom font-face?

/Thomas