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('http://www.example.com/wp-content/themes/child/fonts/GoodDog.ttf');
}
oh! thank you! I will try it! 🙂
Hi
i’m trying to upload
Garamond Pro-Regular on fontsquirrel
but there’s a problem
Adobe has requested that their font
Adobe Garamond Pro Bold Bold be blacklisted by the Generator.
You will not be able to convert this font.
can you help me please
sorry for my english
Its a premium font by Typekit https://typekit.com/fonts/adobe-garamond-pro
thank you
I can’t use it?
Why?
I can’t upload it on fontsquirrel
You will need to choose your fonts before uploading to font squirrel.
The plugin is a separate solution which doesn’t require any installation of custom fonts.
Hi , really nice articule im trying to put Kravitz font which i downloaded from dafont in to the h1 headings in the site : http://www.sushiworld.info .
First i try the plugin you recommend font-uploader , i uploaded and chose the font for headings and nothing happens.
Then i check the style.css at the ristorante theme that i use, and it says make changes on style.less.css so i upload the font into the folder where are the default theme fonts and tryed something like this :
@font-face {
font-family: Kravitz;
src: url(‘fonts/KRAVT___.TTF’);
}
h1 {
font-family: Kravitz;
}
and it didnt work . im a begginer at coding but i like to learn 🙂 . Thanks in advanced
You need to use this tool first to create a package http://www.fontsquirrel.com/tools/webfont-generator
Hi Brad~
I’m trying to install two fonts from google to the functions.php file (after years of using the @import way). There is already a code in the file for one font, but not sure how to add the second?
This is the code:
//* Enqueue Lato Google font
add_action( ‘wp_enqueue_scripts’, ‘sp_load_google_fonts’ );
function sp_load_google_fonts() {
wp_enqueue_style( ‘google-font-lato’, ‘//fonts.googleapis.com/css?family=Lato:300,700’, array(), CHILD_THEME_VERSION );
}
I’m trying to change the fonts to Quattrocento+Sans:400,400italic,700,700italic|Delius
Any insight on this?
Thanks so much!
Hello Karla
Try one of these:
Or you can enqueue them separately
Thank you, Brad! That worked 🙂 So appreciate that you took the time to help with this!