# Add custom font

You can add any fonts you want. However, in this guideline, we will guide you how to add font SofiaPro to the theme.  

When adding custom font, you need to make some changes first. Make sure you name all the folders follow the image below. 

*If you use other font, just change the name of the folder containing your font to the font name.*

![](https://3192842155-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCGEvkIGZQql1dvbXwu25%2Fuploads%2FEFoue6W2djUbDoWTEhrX%2FScreenshot%20at%20Aug%2022%2016-59-36.png?alt=media\&token=34f5ec97-c631-482e-bca6-9549a99a576b)

**NOTE**: The font name must have connect symbol "-"\
The white space like "Shapiro 25 Super Fly Text" will cause problem.

<figure><img src="https://3192842155-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCGEvkIGZQql1dvbXwu25%2Fuploads%2F49hJZDfXq8ska1QowVz9%2Fcustom-font-filename-1.png?alt=media&#x26;token=fd887ad2-97fa-4259-b0b9-5f5371df85d2" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3192842155-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCGEvkIGZQql1dvbXwu25%2Fuploads%2FNFAdtmdSoZasQtJeJIrO%2Fcustom-font-filename-2.png?alt=media&#x26;token=20b1a682-debd-4532-b466-5724c6e0ba88" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
**Steps:**

**Step 1:** Add font SofiaPro to child theme folder: **minimog-child/assets/fonts/sofia-pro**

**Step 2:** Add this following code to folder **minimog-child/functions.php**:
{% endhint %}

```
/**
* This is sample code to add custom font in Minimog
* This filter add your custom fonts to dropdown list using in Customize.
*
* @since Minimog 1.8.5
*/
add_filter('minimog/fonts/additional_fonts', 'minimog_child_add_custom_fonts');
function minimog_child_add_custom_fonts($additional_fonts) {
  // For eg: Custom Font name: SofiaPro.

  if( ! isset( $additional_fonts['SofiaPro'] )) {
     $additional_fonts['SofiaPro'] = 'SofiaPro, sans-serif';
  }

  return $additional_fonts;
}

/**
* This filter add your custom fonts to dropdown list using in Elementor Editor.
*/
add_filter( 'elementor/fonts/additional_fonts', 'add_custom_fonts', 10, 999 );
function add_custom_fonts( $fonts ) {
    $additional_fonts = [
        'SofiaPro' => 'minimog',
    ];
    return array_merge( $fonts, $additional_fonts );
}

/**
* This filter embed your font file to frontend.
*/
add_filter('minimog/custom_fonts/enqueue', 'minimog_child_enqueue_custom_fonts');
function minimog_child_enqueue_custom_fonts($font_family) {
  if ( strpos( $font_family, 'SofiaPro' ) !== false ) {
     /**
      * For eg: Font file locate at: minimog-child/assets/fonts/sofia-pro/font-sofia-pro.min.css
      */
     wp_enqueue_style( 'font-sofia-pro', get_stylesheet_directory_uri() . '/assets/fonts/sofia-pro/font-sofia-pro.min.css', null, null );
  }
}
```