Tagged: 

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #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,
    Erna

    #1177480

    Hey Erna,

    I’m not sure to be honest with you, did you get any instructions with the kit?

    Best regards,
    Rikard

    #1210000

    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
    }

    #1210230

    Hi,

    Thanks for sharing your solution @sklhdfklshdfl, it’s much appreciated :-)

    Best regards,
    Rikard

    #1220913

    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!

    #1222148

    Hi paullindqvist,

    Most of the single quotes are wrong. You need to change this

    ‘ and ’

    to

    '

    Best regards,
    Victoria

    #1255116

    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.
    #1256435

    Hi fivepixels,

    Thank you for sharing!

    Best regards,
    Victoria

    #1263756

    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.
    #1264429

    Hello? 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.

    #1264463

    Hi,


    @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.asp

    If you need further help, please do not hesitate to open a new thread. We will close this one for now.

    Best regards,
    Ismael

    #1264476

    Hello 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.

    #1264506

    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.

    #1264842

    Hi nullhorn,

    Glad you got it working for you! :)

    If you need further assistance please let us know.

    Best regards,
    Victoria

Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.