Skip to main content
BW_Ellis
BW_Ellis
Known Participant
February 11, 2014
Answered

Problems with Adobe Typekit

  • February 11, 2014
  • 2 replies
  • 6923 views

Hello,

I am trying to get fonts from Typekit to work across browsers and I am having difficulties. I am trying to use Trajan Pro 3 on a site and the fonts are not rendering properly in Chrome & Firefox on the PC. The reason I am using Typekit is to solve this problem without using Google.

Thus far I am not impressed with the Typekit Editor interface or methodology, but that aside it does not seem to work. The site in question is here:

http://adeptdigital-llc.com/Haynes/

This is a sample site I want to make live in a few days and I cannot get the font to render properly in Chrome and FF on the PC yet it seems to work everywhere else.

Any thoughts?

Thanks,

Brett

    This topic has been closed for replies.
    Correct answer liz, Adobe Type

    Interestin, I will take a look. BTW, it seems to work with other fonts, so if this is an issue we can safely say it is with the Trajan Pro 3 font more so than anything else.


    Hello Brett,

    >> Thank you for the efforts but you are looking at the page using the Mac version of Chrome. The fonts have no issues rendering on the Mac. You must use a PC to test this for PC users.

    I'm sorry for not going into more detail in my reply: this was meant to demonstrate that the font files are working correctly. Here is the same screenshot from Chrome on Windows 7, for your comparison:

    (Again, with the text size increased to show that it is Trajan Pro 3.)

    If the font still doesn't load for you, it would be helpful if you would provide a page that uses Trajan Pro 3 by default so that the Typekit team can more easily debug the display issue.

    Unrelated to the loading issues, you will likely see rendering artifacts in Trajan Pro 3 at 14px.  Typekit serves Trajan Pro 3 with PostScript outlines for smooth rendering at large sizes on Windows, as explained in this blog post:

    http://blog.typekit.com/2012/03/21/inscriptional-faces-from-adobe-type/

    Although lots of designers use Trajan at smaller sizes, it wasn't designed to be used that way. If you check out the browser samples for Trajan Pro 3, you will see the there are rendering issues in Windows below about 30px: https://typekit.com/fonts/trajan-pro-3#browser-samples

    You might try something like Minion instead. See the example (with code) in that same blog post.

    Or, if Minion Pro is not to your liking, there similar serifs in the library that are recommended for paragraph use:

    https://typekit.com/fonts?classification=serif&contrast=regular&recommended-for=paragraphs&weight=regular&width=regular

    These fonts that have been hand-picked by Typekit's staff for their technical and aesthetic excellence, and they render excellently across all browsers and devices, including Windows.

    I hope that this helps; let me know if you have any other questions.

    -- liz

    2 replies

    MiguelSousa
    Community Manager
    MiguelSousaCommunity Manager
    Community Manager
    February 11, 2014

    Trajan is a headline font, and as such it was not configured to render well at small sizes. You need to use a bigger font size or choose an appropriate font for body text.

    BW_Ellis
    BW_EllisAuthor
    Known Participant
    February 11, 2014

    Thanks,

    I did, but since the image above shows Trajan Pro 3 as a body text you may want to revisit that comment. I know stylistically the font should be used as headline only and I try to tell my clients that but at the end of the discussion it was what he wanted.

    I have used it as the text font on business cards, letterhead, brochures, and a host of other applications. The fact that the font renders on the Mac without issues should also tell you that the problem is not with the inherit shape or design of the letters. No this is a programming issue, plain and simple. If the developers at Adobe can get it to work on the Mac yet not on the PC, either they are not finished with the font or something in the PC font rendering tools (not on Internet Explorer, it works fine there).

    In any event, I am expected to supply the client's requests on all browsers, if not I may loose the client. Why doesn't Chrome and Firefox follow the same requirements? Why not Adobe? Why is this even an issue when with the Trajan Sans font I currently have up does not present the issue?

    If Adobe is selling perfection, they must be held to the standard they set for themselves. All of our businesses rely upon it.

    B
    Adobe Employee
    benw525841597154115
    Adobe Employee
    February 11, 2014

    Hi, I head up customer support for Adobe Typekit. I've reviewed this thread with several of my colleagues and we stand behind the advice that Liz gave you.

    Trajan wasn't designed to be used for running body text. There's some more information about this in our blog post announcing it: http://blog.typekit.com/2012/03/21/inscriptional-faces-from-adobe-type/

    As for how the font renders on the Mac as opposed to Windows, this is due to the completely different font rendering engines used by each OS. Improvements continue to be made here but for now, it's best to use Trajan as a heading font for consistent results across platforms. Perhaps take a look at Minion for a body text font with a similar feel.

    Font rendering on screens and across platforms can get pretty complicated. we have a series of blog posts that you might find useful: http://blog.typekit.com/category/type-rendering/

    I hope this helps. Let us know if you need anything else.

    Cheers,

    Ben

    BW_Ellis
    BW_EllisAuthor
    Known Participant
    February 11, 2014

    Found the problem.

    The Trajan Pro 3 Font is not configured properly. Seems like Adobe didn't get that one right. Any other font I try works just fine, just the one my client wanted is the one that doesn't work properly. Figures...

      liz, Adobe Type
      Community Manager
      liz, Adobe TypeCommunity Manager
      Community Manager
      February 11, 2014

      Hello,

      I'm sorry that you ran into trouble with this.  Trajan Pro 3 is loading into your webpage correctly from Typekit, and can be applied by setting the font family name to:

      font-family: "trajan-pro-3",sans-serif;

        

      In the screenshot below, I have made this change in the web developer tools in Chrome and increased the font size, to make it easier to see the Trajan Pro 3 is being applied.  Would you please give it another try, and let me know if you still cannot get it to work?

      Thank you,

      -- liz

      liz, Adobe Type
      Community Manager
      liz, Adobe TypeCommunity Manager
      Community Manager
      February 11, 2014

      One more note: using "text-rendering: optimizeLegibility;" on a site with @font-face can cause unpredictable results on Windows.  The only workaround is to use another value - e.g. optimizespeed - or to remove the rule entirely.

      You may also need to edit this section of your CSS, in order for the fonts to be displayed correctly:

      body {
          background-color: #7F716D;

          color: #000000;

          font-size: 16px;

          line-height: 1;

          margin: 0 auto;

          padding: 10px 0 0;

          text-rendering: optimizelegibility;

          width: 1000px;

      }

      If that doesn't solve the problem, feel free to post a test page that uses Trajan Pro 3 and I'd be happy to take another look.  Best,

      -- liz

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices