{"id":4132,"date":"2020-05-23T19:54:47","date_gmt":"2020-05-23T19:54:47","guid":{"rendered":"https:\/\/the7kennisbank.nl\/?p=4132"},"modified":"2020-05-23T19:54:47","modified_gmt":"2020-05-23T19:54:47","slug":"add-custom-font","status":"publish","type":"post","link":"https:\/\/the7kennisbank.nl\/en\/dream-theme-support-portal\/add-custom-font\/","title":{"rendered":"Add custom font"},"content":{"rendered":"

Add custom font<\/p>\n

\n
\n

1)<\/strong> 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<\/a><\/p>\n

2)<\/strong>Then add @font-face in Theme Option > Advacned > Custom CSS this way:<\/p>\n

@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');}<\/pre>\n
3)<\/strong> Add new font to the Theme options font list<\/p>\n
Please add the following code into the end of your child theme<\/strong> functions.php file:<\/p>\n
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 );<\/pre>\n
Where is my-font-family<\/strong> , it is a font-family that you have set in the font-face<\/em> css, and my-font-name<\/strong> it is a font name that you will see in the theme font list.<\/p>\n
Now This font is available in Theme Options > Typography > font list.<\/p>\n
Note: If you want to specify font with a weight you can do this using the following code notation in add_custom_font() function.<\/p>\n
$fonts['Gruppo:500'] = 'Gruppo(500)'; \/\/for 500 weight$fonts['Gruppo:700'] = 'Gruppo(700)'; \/\/for 700 weight<\/pre>\n
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.<\/p>\n
body, p, h1, h2 {
<\/br>font-family: 'Gruppo' !important;
<\/br><\/code><\/p>\n
Adding Adobe Typekit font<\/strong><\/p>\n
1)<\/strong> Add the script provided by typekit to Theme options -> Advanced -> Custom JavaScript.<\/p>\n
2)<\/strong> Follow step 3 above.<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
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…<\/p>\n","protected":false},"author":2,"featured_media":4470,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[30,31],"tags":[],"class_list":["post-4132","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dream-theme-support-portal","category-knowledgebase","category-30","category-31","description-off"],"acf":[],"_links":{"self":[{"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/posts\/4132","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/comments?post=4132"}],"version-history":[{"count":1,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/posts\/4132\/revisions"}],"predecessor-version":[{"id":4233,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/posts\/4132\/revisions\/4233"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/media\/4470"}],"wp:attachment":[{"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/media?parent=4132"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/categories?post=4132"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/tags?post=4132"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}