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: http://gldev.staging.wpengine.com
Original Site: http://growingleaders.com
I found the solution.
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
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.
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: https://mywebsite.com/wp-content/themes/storefront/assets/css/base/icons.css 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...
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...