Salient provides a wide selection of Google Fonts built directly into its typography settings, but what if your brand requires something different?
Google fonts give you great variety of options to choose from if you don’t have to have specific fonts on your site, but if you need something specific, how do you handle that? A lot of people use Adobe fonts these days in their branding, so how do you match your branding if only Google fonts are available?
You could do some fancy coding or hire a developer to do it for you… or you can use a plugin! We found a plugin that doesn’t natively work with Salient, but we’ll walk you through how to integrate it with the Salient typography so you can use the Adobe fonts as easily as the Google ones!
Step 1: Install and Activate the Custom Adobe Fonts (Typekit) plugin
Step 2: Create an Adobe website project
Log into fonts.adobe.com, find the font/s you would like to use, create a web project, and save it. Then go to your web projects and find the Project ID associated with the project you just created.
Step 3: Link Your Project to the Plugin
To link your Adobe web project to the plugin, go to Appearance > Adobe Fonts. Now, add your web Project ID from the step above.
Step 4: Add a Simple Code Snippet to Pull the Fonts into Salient
Now you will add a simple code snippet to integrate those fonts you just added into the Typography section of the Salient settings. You can do this in a few different ways. You can add a plugin like Code Snippets or WPCode; or you can add this php to a child theme. If you are not familiar with using child themes, we would highly suggest using a code snippets plugin like those listed above.
Once this code is added, save and activate it for the whole site, then navigate to your Typography settings. Now the font/s you added should come up in the dropdown just like the Google fonts!
function salient_redux_typekit_fonts() {
$kit_info = get_option('custom-typekit-fonts');
$fonts_typekit = array();
if (!empty($kit_info)) {
foreach ($kit_info['custom-typekit-font-details'] as $fontArr) {
$fontCssName = $fontArr['css_names'][0];
$fonts_typekit['Typekit Fonts'][$fontCssName] = $fontCssName;
}
}
return $fonts_typekit;
}
add_filter("redux/salient_redux/field/typography/custom_fonts", "salient_redux_typekit_fonts");
