User Typekit.com for Fonts

I'd like to use Adobe Typekit for my fonts, because our font is not included in google fonts. https://typekit.com/fonts/proxima-nova
How would I do that?

  • Adam Czajczyk

    Hello Fab,

    I hope you're well today and thank you for your question!

    This can be done though you will not be able to "visually select" these fonts in Upfront Builder so you will want to use CSS to apply them to the elements on the page.

    Here's how to do this:

    1. First select your fonts on Typekit page and add them to your set
    2. the "set" will give you a "default JavaScript" code that should be added to the site; this code will be very similar to this:

    <script src="https://use.typekit.net/yug2uzo.js"></script>
    <script>try{Typekit.load({ async: true });}catch(e){}</script>

    Please pay attention whether it's suggested to add this code to the "<head>" tag or before "</body" tag as it will affect further step.

    3. Access the theme that you are building with FTP by going to the "/wp-content/themes/theme-name" folder on your server

    4. Edit the "functions.php" file with the "clean text" editor (such as e.g. Notepad++, Sublime, any dev IDE editor)

    5. At the very bottom of the existing code, below line similar to this one

    Theme_name::serve();

    add this code

    # custom TypeKit fonts

    function custom_typekit_fonts_include() {
    	?>
    	TYPEKIT_JS_CODE
    	<?php
    }
    add_action('wp_head','custom_typekit_fonts_include');

    where "TYPEKIT_JS_CODE" should be replaced with JS code that you obtained in step 2.

    If in step 2 it said "Make sure it goes into the <head> tag" that's all; If it suggested to put code before "</body>" tag replace the "wp_head" in "add_action" line with "wp_footer".

    6. Save the file.

    Now to make use of these fonts you will want to either edit "Default" preset for the element that should use your custom fonts or to create a new preset; then use "Edit Preset CSS" option and specify fonts to use there using CSS rules suggested by Typekit in "Details" tab for given font.

    Best regards,
    Adam

  • Dimitris

    Hey there Fab,

    hope you're doing good and don't mind chiming in! :slight_smile:

    ist there any way for me to extend Upfront to be able to select the fonts I did put in the Typekit Webpack?

    You can add additional font choices by "hacking" your theme a bit. In settings.php file, you can add something like:
    'additional_fonts' => '[{family:"test font", variants:["regular", "italic", "700 italic"]}]',
    in settings array.

    Fonts still needs to be enqueued like Adam mentioned in his previous reply, but adding that line would add font family and variants to UF interface i.e. dropdowns for font family will have "test font" and dropdowns for variants will have "regular", "italic" and "bold italic".

    Variants can be any combination of numbers like 100, 200, ... 900 (those are weights) and words like "normal", "italic" and "oblique" so: "100 oblique", "500 italic", "700 normal" are all valid values for variants. Also "test font" has to be exact name of the font family that should show in CSS.

    Warm regards,
    Dimitris

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.