Here’s the most basic example which you place at the start of your child themes style.css file:

@font-face {
font-family: Adobe Garamond Pro;
src: url('fonts/agp.otf');
}

The above CSS rule assumes you have added your font file in a folder named fonts, in your child theme folder.

If you add your font files in your child themes root directory, the CSS rule would look like this as the path is different :

@font-face {
font-family: Adobe Garamond Pro;
src: url('agp.otf');
}
And then you simply create a new folder named fonts in your child theme folder and upload the font file to that folder.

Here’s an example of how to use a new font in your theme. This code is placed at the end of the child themes style.css file and will make all h3 sub headings use the new custom font, Adobe Garamond Pro.

h3 {
font-family: Adobe Garamond Pro;
}
Font Generator
Here’s an online font face generator which you can also use to generate a entire kit which includes everything you need to install fonts in your theme.

This is what the CSS code will look like once you upload and convert your font files using the generator.

@font-face {
font-family: 'trashhandregular';
src: url('trashhand.eot');
src: url('trashhand.eot?#iefix') format('embedded-opentype'),
url('trashhand.woff') format('woff'),
url('trashhand.ttf') format('truetype'),
url('trashhand.svg#trashhandregular') format('svg');
font-weight: normal;
font-style: normal;
}
This is how the CSS code will look if you simply upload the file without using the generator depending on the number of fonts you want to use:

@font-face {
font-family: GoodDog;
src: url('https://www.example.com/wp-content/themes/child/fonts/GoodDog.ttf');
}