Add custom font
1) Upload font files to your website, for example, into …/wp-content/uploads/fonts/ or your child theme folder, make sure you are uploading Webfonts, you can generate Webfont files here
2)Then add @font-face in Theme Option > Advacned > Custom CSS this way:
@font-face {font-family: 'Gruppo';src: url('/wp-content/uploads/fonts/Gruppo_reg.eot');src: url('/wp-content/uploads/fonts/Gruppo_reg.eot') format('embedded-opentype'),url('/wp-content/uploads/fonts/Gruppo_reg.woff') format('woff'),url('/wp-content/uploads/fonts/Gruppo_reg.ttf') format('truetype'),url('/wp-content/uploads/fonts/gruppo_reg.svg#Gruppo') format('svg');}
3) Add new font to the Theme options font list
Please add the following code into the end of your child theme functions.php file:
function add_custom_font( $fonts ) {$fonts['Gruppo'] = 'Gruppo';//to add more fonts, just define they like this//$fonts['my-font-family'] = 'my-font-name';return $fonts;}add_filter( 'presscore_options_get_safe_fonts', 'add_custom_font' ,30 , 1 );
Where is my-font-family , it is a font-family that you have set in the font-face css, and my-font-name it is a font name that you will see in the theme font list.
Now This font is available in Theme Options > Typography > font list.
Note: If you want to specify font with a weight you can do this using the following code notation in add_custom_font() function.
$fonts['Gruppo:500'] = 'Gruppo(500)'; //for 500 weight$fonts['Gruppo:700'] = 'Gruppo(700)'; //for 700 weight
Alternatively (instead of step 3), you can also apply font using custom CSS like this, but you will have to apply it to many different selectors depends on your requirements.
body, p, h1, h2 {
font-family: 'Gruppo' !important;
Adding Adobe Typekit font
1) Add the script provided by typekit to Theme options -> Advanced -> Custom JavaScript.
2) Follow step 3 above.