38

My Ruby on Rails app hates custom fonts and I don't know why. Here are some of the errors and troubleshooting that I have gone through.

First, there were devastating display errors that only happened on Google Chrome on a PC. The text will overlap, paragraphs within the same div will have different widths, buttons will have shortened width, a copy will shift to the right on the page...to the point where some of the sites are unusable. I finally figured out that the browser seemed to not be understanding the font correctly. If I used websafe fonts like Arial and Georgia, the issues went away. So I thought that maybe the @font-face fonts that live on my server were corrupt. The Chrome issue also only appeared to happen on later versions of Chrome (20 and up). The weirdest part about this is that it only happens intermittently. Sometimes the page displays fine and sometimes it looks crazy. This has occurred on multiple computers and cache clearing does not seem to affect the error.

I then integrated Typekit from Adobe to serve the fonts instead from their server. Now the display errors are gone, but all Windows browsers ignore the typekit font and display the fallback fonts instead. That's IE, Firefox, and Chrome on Windows, various versions.

The site is part Ruby on Rails, part PHP (WordPress), and these issues only happen on the Ruby on Rails pages. The font files that I thought were corrupt are the same font files that work beautifully on the PHP side of the site.

Here are some screenshots of the initial Chrome issue with the server hosted fonts.

The site currently has the server hosted fonts live (with the Chrome error). A page on the site where this is happening: http://levoleague.com/jobs

Any ideas on why my app rejects fonts?

Paragraphs running off of page

Text overlapping

Tds overlapping

Nonsense characters in drop-down

tru.d
  • 555
  • 2
  • 6
  • 23
Brenda
  • 835
  • 8
  • 11
  • 14
    I'm voting to close this question as off-topic because the problem is 4 years, regarding a browser 30 major versions behind and the problem is no longer reproductible. – lucasg Jun 21 '17 at 18:05
  • 1
    I’m voting to close this question because it's too old and not relevant anymore. – Benjamin Bouchet Feb 11 '21 at 09:21

1 Answers1

-1

Looks like it's a CSS issue and you need overflow-wrap: break-word;

Dorian
  • 7,749
  • 4
  • 38
  • 57