Font Face Weight Render Issue

I'm in the process of migrating a website from an existing CMS over to WordPress. They use font-face for their primary type on the site. I've copied over the font files and replicated the CSS file but it appears that the font on the dev site is not rendering the same that it did on the initial site (dev site has lighter weighted font).

Anyone have an idea why this may be?

Dev Site:

Original Site:


I found the solution.

Apparently having text-rendering:optimizeLegibility; in your code causes webkit to render the font thinner than FireFox. Once that was removed from the HTML & body CSS, the font renders the same weight cross-broswer.

There are several differences on the Dev page compared to the original. If you look at the CSS file called screen.css it is a quite different file on the two sites, that is one of the reasons the fonts differ. Furthermore there are 13 CSS files linked to the original page and 15 to the Dev page. Also the scripts differ, so I wouldn't be surprised if there are even bigger discrepancies than the font rendering.

Copying a WP site can sometimes be more tricky than just copying files. I would suggest you use a good migrating tool. There are some out there.

Your dev site has a lighter font appearance because it uses

 -webkit-font-smoothing: antialiased;

which makes fonts appear lighter. This is done quite often for exactly this purpose, though doing so is somewhat problematic

The rule is applied on line 19 of your compiled CSS file, applied to all elements.

Tags: Wordpress / Css / Font Face

Similar questions

Font not displaying in my WordPress site. I used @font-face to add it in the css directly
I have the following issue with my uploaded font Celestina on the hosting. I added a @font-face link in the css of my WordPress site. However, when loaded in the browser for some reason the font is not downloaded by Chrome, FF, Safari and can't be seen. The direct link works ... Can you please help me? Thanks
Custom font (not using @font-face) won't load on HTTPS protocol
I am trying to fix an issue where my custom font (ArcaMojora) is not loading on HTTPS protocol and I have seen a ton of fixes everywhere for code that uses @font-face. After searching vigorously through my WP theme files I realized that my theme (Kleanity) doesn't use @font-face at all but rather below code. How can I adjust the code so that the cu...
Dequeue local Font Awesome loaded with @font-face by parent theme
I use Storefront theme. In the following location: there is a lot of Font Awesome CSS like this: There also is a declaration preceded by comment: I would like to dequeue / deregister this local Font Awesome and replace it with Font Awesome from CDN source. I tried this: An...
@font face, calling a font-family works for one class but not for another, why?
as described in the heading. I spent some time on implementing a specific font on a client's website. I implemented the font mostly on all the css classes where I need it. Somehow on the "a" class which defines the menu links it doesn't work calling the font. Why? See screenshot 1 and 2. On the class "div.powered-by" (which is a...
Strange font-style / font-weight on CPT list columns screen
As you can see below, for some reason the "Author" column displays extremely strange (like non-anti aliased) in Chrome. I added the snippet from the dev tools bar to show that I can't see any difference. Do you know why this happens?
increasing font weight of my cufon font
For my Wordpress website, I have added the cufon plugin and uploaded my font. The code (shown below) is what I put in the cufon plugin box to have my uploaded font show. The font is quite faint and there is no "bold" version of the font. I would really appreciate help for the following that I just can't figure out: Replacing my navbar menu font wit...

Also ask

We use cookies to deliver the best possible experience on our website. By continuing to use this site, accepting or closing this box, you consent to our use of cookies. To learn more, visit our privacy policy.