Adding Adobe typekit to my website

This works for me: Create a web project with the fonts you want to use in your adobe account (you will get a stylesheet link). Add the following to your themes function.php. Then you can select the font in the dropdown of the theme settings.

/* Adobe typekit font */
add_action( ‘init’, ‘enfold_customization_switch_fonts’ );
function enfold_customization_switch_fonts() {
global $avia;
$avia->style->print_extra_output = false;
}

add_filter( ‘avf_google_heading_font’, ‘avia_add_heading_font’);
function avia_add_heading_font($fonts)
{
$fonts[‘Font Name One’] = ‘Font Name One’;
$fonts[‘Font Name Two’] = ‘Font Name Two’;
return $fonts;
}
add_filter( ‘avf_google_content_font’, ‘avia_add_content_font’);
function avia_add_content_font($fonts)
{
$fonts[‘Font Name One’] = ‘Font Name One’;
$fonts[‘Font Name Two’] = ‘Font Name Two’;
return $fonts;
}

add_filter( ‘wp_head’, ‘enfold_customization_add_scripts’ );
function enfold_customization_add_scripts(){
?>
<link rel=”stylesheet” href=”https://use.typekit.net/xxxxxxxxx.css”>
<?php
}

Hi! I’m trying to use Typekit on my website, I created a web project with Typekit and got the link for the stylesheet and use it when I copy the code shown above into the functions.php file in my enfold theme folder. But when loading the page I get an error loading it saying something went wrong.

I use a child theme if that changes anything ?

The code in my Functions.php

<?php
function insert_dividers(){
?>
<script>
(function($){
	$('.avia-section.divider.waves').append('<svg version="1.1" id="Waves" class="bottom" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1500 200" preserveAspectRatio="none"><style type="text/css">.wav0{fill:#FFFFFF;}.wav1{opacity:0.15;fill:#339996;}.wav2{opacity:0.3;fill:#6FAEB0;}</style><g><path class="wav0" d="M1404.5,15.3c-214.5-23.4-430-20-644.1,10.2l-31.1,4.4C609.1,46.8,488.5,55.2,367.8,55.3h-5.4 C241.5,55.1,120.5,46.4,0,29.3v26v29.3V200h1500V81V55.3V25.7L1404.5,15.3z"/><path class="wav1" d="M739.6,149.7l31.1,3.8c242.7,28.7,486.6,28.5,729.3-0.5v4.8c-242.7,29-486.6,29.1-729.3,0.4l-31.1-3.8 C525.3,129,310,126.2,95.5,145.9L0,154.7v-4.8l95.5-8.7C310.1,121.5,525.3,124.4,739.6,149.7z"/><path class="wav2" d="M760.4,25.5l-31.1,4.4C486.7,63.9,242.6,63.8,0,29.3v55.3c242.6,34.5,486.7,34.6,729.3,0.5l31.1-4.4 c214.2-30.1,429.6-33.5,644.1-10.2L1500,81V25.7l-95.5-10.4C1190-8.1,974.6-4.7,760.4,25.5z"/><path class="wav2" d="M760.4,25.5l-31.1,4.4C486.7,63.9,242.6,63.8,0,29.3V81l95.5-10.4c214.5-23.4,430-20,644.1,10.2l31.1,4.4 c242.6,34.1,486.7,33.9,729.3-0.5v-59l-95.5-10.4C1190-8.1,974.6-4.7,760.4,25.5z"/></g></svg>');
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'insert_dividers');

/* Adobe typekit font */
add_action( ‘init’, ‘enfold_customization_switch_fonts’ );
function enfold_customization_switch_fonts() {
global $avia;
$avia->style->print_extra_output = false;
}

add_filter( ‘avf_google_heading_font’, ‘avia_add_heading_font’);
function avia_add_heading_font($fonts)
{
$fonts[‘Font Name One’] = ‘Font Name One’;
$fonts[‘Font Name Two’] = ‘Font Name Two’;
return $fonts;
}
add_filter( ‘avf_google_content_font’, ‘avia_add_content_font’);
function avia_add_content_font($fonts)
{
$fonts[‘Font Name One’] = ‘Font Name One’;
$fonts[‘Font Name Two’] = ‘Font Name Two’;
return $fonts;
}

add_filter( ‘wp_head’, ‘enfold_customization_add_scripts’ );
function enfold_customization_add_scripts(){
?>
<link rel="stylesheet" href="https://use.typekit.net/owf3vvn.css">
<?php
}
/*
* Add your own functions here. You can also copy some of the theme functions into this file. 
* WordPress will use those functions instead of the original functions then.
*/

Thank you!

Installing Adobe fonts to work with enfold:
I have used another user’s template, but I was getting errors when implementing his solution. It turned out that all the quotation marks used in the solution was not of the correct style. I replaced all the single and double quotation marks in a text editor with the correct ones.

Here is a short overview before updating the functions.php in the child theme of enfold
1) Activate a font in adobe fonts by sliding the toggle switch of the font you want to use. The slider will turn blue.
2) Look for the </> opposite the slider and click on it.
3) Add the font to a project by tapping the down arrow button and create a new one or add to an existing project.
4) Save > and a new window will pop up. At the top of the window you will see: <link rel=”stylesheet” href=”https://use.typekit.net/xyxyxyx.css”&gt;
take note of the code before .css”> yours will be unique.
5) Take note of the font name and the weight. I copied and pasted it into my text editor, where required. Replace your font and font weight where I used freight-sans in step (7) and use the code in step (4) at the bottom of the php code in (7).
6) The text editor on this forum changes all the single and double quotation marks to the wrong format. You would need to manually edit everyone one in a text editor for the code in (7) to work

7)
/* Adobe typekit font */
add_action( ‘init’, ‘enfold_customization_switch_fonts’ );
function enfold_customization_switch_fonts() {
global $avia;
$avia->style->print_extra_output = false;
}

add_filter( ‘avf_google_heading_font’, ‘avia_add_heading_font’);
function avia_add_heading_font($fonts)
{
$fonts[‘Freight Sans Pro’] = ‘freight-sans-pro:400’;
$fonts[‘Freight Sans Compressed Pro’] = ‘freight-sans-compressed-pro:500’;
return $fonts;
}
add_filter( ‘avf_google_content_font’, ‘avia_add_content_font’);
function avia_add_content_font($fonts)
{
$fonts[‘Freight Sans Pro’] = ‘freight-sans-pro:400’;
$fonts[‘Freight Sans Compressed Pro’] = ‘freight-sans-compressed-pro:500’;
}

add_filter( ‘wp_head’, ‘enfold_customization_add_scripts’ );
function enfold_customization_add_scripts(){
?>
<link rel=”stylesheet” href=”https://use.typekit.net/xxxxxxx.css”&gt;
<?php
}

8) Save the code in (7) with your info in a file named Functions.php by using a text editor and FTP the file to the folder of your enfold child installation.
public_html/the path where you installed wordpress/wp-content/themes/enfold_child
9) this new Functions.php file will only work if your child theme is the template that you activated in your wordpress themes dashboard
10) the fonts appeared for me at the bottom of the list of fonts available to chose from in enfold dashboard

• This reply was modified 4 years ago by fivepixels.

Hello Fivepixels,

can you tell me, where can I see the new Adobe Fonts? I think, i see the fonts at the Backend – Enfold – General Styling – register fonts.
But there is no Adobe Font now. I go to Design – Theme-Editor and choose the funtions-enfold.php and at the end I add my Code.
When I tried to change the functions.php then the whole system breaks down, so I think the functions-enfold.php is the right file to add the code.

/* Adobe typekit font */
add_action( 'init', 'enfold_customization_switch_fonts' );
function enfold_customization_switch_fonts() {
global $avia;
$avia->style->print_extra_output = false;
}

add_filter( 'avf_google_heading_font', 'avia_add_heading_font');
function avia_add_heading_font($fonts)
{
$fonts['JAF Domus100'] = 'jaf-domus:100';
$fonts['JAF Domus200'] = 'jaf-domus:200';
$fonts['JAF Domus300'] = 'jaf-domus:300';
$fonts['JAF Domus400'] = 'jaf-domus:400';
$fonts['JAF Domus500'] = 'jaf-domus:500';
$fonts['JAF Domus600'] = 'jaf-domus:600';
$fonts['JAF Domus700'] = 'jaf-domus:700';
$fonts['JAF Domus800'] = 'jaf-domus:800';
return $fonts;
}

add_filter( 'avf_google_content_font', 'avia_add_content_font');
function avia_add_content_font($fonts)
{
$fonts['JAF Domus100'] = 'jaf-domus:100';
$fonts['JAF Domus200'] = 'jaf-domus:200';
$fonts['JAF Domus300'] = 'jaf-domus:300';
$fonts['JAF Domus400'] = 'jaf-domus:400';
$fonts['JAF Domus500'] = 'jaf-domus:500';
$fonts['JAF Domus600'] = 'jaf-domus:600';
$fonts['JAF Domus700'] = 'jaf-domus:700';
$fonts['JAF Domus800'] = 'jaf-domus:800';
return $fonts;
}

add_filter( 'wp_head', 'enfold_customization_add_scripts' );
function enfold_customization_add_scripts(){
?>
<link rel="stylesheet" href="https://use.typekit.net/xph8fda.css">
<?php
}

Is this not right? I only chance the font-name.
Yes the fonts is activated and they works, you can see it here:
https://ftp.flo-haaf.de/test_domus.html

Can you tell me, why I don’t see the new Adobe Fonts?

Thx a lot
Flo

• This reply was modified 3 years, 11 months ago by nullhorn.

Now it workx, I paste the code
<link rel="stylesheet" href="https://use.typekit.net/xph8fda.css">
in the costum.css

and than I change the h1 tag with the Quick CSS Tool in Enfold.