Customizing Font: Incorporating Adobe Typekit

  • Author
    Posts
  • #3289418

    Trying to be able to use my adobe Garamond pro Typekit font in my page in the CSS input for the page.

    The blog I need help with is behindthetint088.com.

    #3290663

    charleybea
    Member

    Hello @crohnsanonymous,

    It looks like you’re using the Professional Business theme which doesn’t have the option to edit the fonts using Typekit in the Customize area of your site.

    I tried an alternative that works, but this is assuming you have your own account with Adobe so you can create a Web Project AND that you have the ability to edit the CSS on your WordPress site (on a Premium, Business or eCommerce plan).

    First create a new Web Project for the Garamond Pro font on Adobe by going to this page and signing in. Click on the </> to add the font to a Web Project. You’ll be prompted to Create a new project or add to existing project as well as marking which fonts you want to include.

    Once you’ve created the Web Project, you’ll need to grab the @import code by going to this page where you’ll see your Web Projects. Look for

    If you’d like to use fonts in HTML email, use the @import link.

    and click on the @import link wording to show the code you need to copy. Just copy the line of code between the <style></style> and go to your Customizer and click on the CSS tab.

    Paste the @import code at the very top. From there, you should be able to adjust the fonts as needed using CSS. Specifically for Garamond Pro, you’ll use this font family CSS: font-family: adobe-garamond-pro, serif;

    If it helps, you can see my test screenshot after following the same instructions using a script style font instead: https://www.awesomescreenshot.com/image/3950397/0f3c90949882791f9c1c58bb2a7cd434

    I hope this is helpful! Let me know if you have any questions :)

The topic ‘Customizing Font: Incorporating Adobe Typekit’ is closed to new replies.