Custom DIVI Fonts - Self Host in Child-theme

PHOTO EMBED

Fri May 20 2022 13:25:55 GMT+0000 (UTC)

Saved by @beckbeck #php #css #divi

/*Multiple Custom DIVI FONTS - In this Example INTER & Poppins 500 & 700*/
/* Get font & CSS from https://google-webfonts-helper.herokuapp.com/fonts */
/*File structure in this example is: 
/* CSS: root-> assets -> css -> fonts.css
/ FONT FILES: root -> assets -> fonts -> 2 folders, inter & poppins

/* This code goes in functions.php - Child-theme*/
add_filter('et_websafe_fonts', 'load_divi_custom_font',10,2);
function load_divi_custom_font($fonts) {
  wp_enqueue_style( 'divi-child', get_stylesheet_directory_uri() . '/assets/css/fonts.css' );
  // Add multiple fonts to Divi's font menu to acces them within DIVI
  $custom_font = array('Poppins' => array(
    'styles'        => '500,700',
    'character_set' => 'latin',
    'type'          => 'sans-serif',
    'standard'      => 1
  ),
  'Inter' => array(
    'styles'        => '500,700',
    'character_set' => 'latin',
    'type'          => 'sans-serif',
    'standard'      => 1
  ));

  return array_merge($custom_font,$fonts);
}

/*CSS for child-theme*/
/* poppins-500 - latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/poppins/poppins-v20-latin-500.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/poppins/poppins-v20-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/poppins/poppins-v20-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/poppins/poppins-v20-latin-500.woff') format('woff'), /* Modern Browsers */
       url('../fonts/poppins/poppins-v20-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/poppins/poppins-v20-latin-500.svg#Poppins') format('svg'); /* Legacy iOS */
  font-display : swap;
}
/* poppins-700 - latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/poppins/poppins-v20-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/poppins/poppins-v20-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/poppins/poppins-v20-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/poppins/poppins-v20-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/poppins/poppins-v20-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/poppins/poppins-v20-latin-700.svg#Poppins') format('svg'); /* Legacy iOS */
  font-display : swap;
}
/* inter-700 - latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/inter/inter-v11-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/inter/inter-v11-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/inter/inter-v11-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/inter/inter-v11-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/inter/inter-v11-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/inter/inter-v11-latin-700.svg#Inter') format('svg'); /* Legacy iOS */
  font-display : swap;
}
/* inter-500 - latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/inter/inter-v11-latin-500.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/inter/inter-v11-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/inter/inter-v11-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/inter/inter-v11-latin-500.woff') format('woff'), /* Modern Browsers */
       url('../fonts/inter/inter-v11-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/inter/inter-v11-latin-500.svg#Inter') format('svg'); /* Legacy iOS */
  font-display : swap;
}
content_copyCOPY

Adding Custom, self hosted, fonts to DIVI theme Builder