Tagged: typekit
-
AuthorPosts
-
January 22, 2020 at 5:42 pm #1177238
Dear Team,
Can somebody please provide me with a method (which actually works) how to add the Adobe Typekit to Enfold theme?
Thank you very much in advance!
Kind regards,
ErnaJanuary 23, 2020 at 9:57 am #1177480Hey Erna,
I’m not sure to be honest with you, did you get any instructions with the kit?
Best regards,
RikardMay 5, 2020 at 3:47 pm #1210000This 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
}May 6, 2020 at 6:31 am #1210230Hi,
Thanks for sharing your solution @sklhdfklshdfl, it’s much appreciated :-)
Best regards,
RikardJune 9, 2020 at 5:49 pm #1220913Hi! 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!
June 12, 2020 at 6:42 pm #1222148Hi paullindqvist,
Most of the single quotes are wrong. You need to change this
‘ and ’
to
'
Best regards,
VictoriaOctober 23, 2020 at 2:14 am #1255116Installing 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”>
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 work7)
/* 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”>
<?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.
October 28, 2020 at 7:03 pm #1256435Hi fivepixels,
Thank you for sharing!
Best regards,
VictoriaNovember 29, 2020 at 9:51 am #1263756Hello 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.htmlCan 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.
December 2, 2020 at 8:38 am #1264429Hello? Is there anybody who can help me / us?
I tried 2 of the font integration plugins, but they didn’t work with enfold.
If I must change the code, not only with quick css, rather in the php I will do this.December 2, 2020 at 11:58 am #1264463Hi,
@nullhorn: You can only use the filters above for Google fonts, so if you have a custom font such as an Adobe font, you have to use the @font-face rule to manually add it to the site, or the wp_register_style and wp_enqueue_style function.// https://www.isitwp.com/use-google-fonts-with-wp_register_style-wp_enqueue_style/
// https://www.w3schools.com/cssref/css3_pr_font-face_rule.aspIf you need further help, please do not hesitate to open a new thread. We will close this one for now.
Best regards,
IsmaelDecember 2, 2020 at 12:27 pm #1264476Hello again,
? in the reply #1255116 fivepixels wrote a manual to “Installing Adobe fonts to work with enfold”.
I understand the text so that i can implement my own adobe fonts in enfold. Did I get something wrong?
I thought fivepixels does the same with his freight sans.What do you mean with filter?
My php knowlegde is not so good.
I can see the function add_filter in the code from fivepixels but I thought it is to add new fonts to the enfold list.OK I look at the 2 links from you and than I test it.
December 2, 2020 at 2:35 pm #1264506Now it workx, I paste the code
<link rel="stylesheet" href="https://use.typekit.net/xph8fda.css">
in the costum.cssand than I change the h1 tag with the Quick CSS Tool in Enfold.
December 3, 2020 at 7:46 pm #1264842Hi nullhorn,
Glad you got it working for you! :)
If you need further assistance please let us know.
Best regards,
Victoria -
AuthorPosts
- You must be logged in to reply to this topic.