Photoshop Question posted in
The official user guide can be found here.

Google Web fonts (css) is not same as in photoshop

I downloaded fonts from google web fonts to use my psd project it’s okey so far.but in my html my google web fonts look different as you see below images;

my psd
enter image description here

and my html
enter image description here

font-size

font-family

line-height

font-weight
all same as photoshop but fonts look different…

and I added body 

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

but nothing change..

by the way my font is Hind Fonts

Tags:

3

Answers


  1. 0

    All browsers will render fonts slightly differently regardless, font rendering is also is dependent on your OS.

    Another thing that can effect how your fonts look is how the designer has set the text anti-aliasing in Photoshop. Text anti-aliasing is controlled here on your top menu bar (with text tool selected):

    enter image description here

    Below is the Hind font set with 5 different anti-alias settings:

    enter image description here

    Note how, in particular, the strong anti-aliasing setting changes the look of the actual font glyphs. Without seeing your actual code it is difficult to compare and diagnose any issue beyond what could be caused outside of Photoshop

    Login or Signup to reply.
  2. 0
    1. You must keep in mind that every browser renders font differently. Photoshop has a lot more font functionality than a web browser. Each browser and OS has a distinct rendering engine as well, so even if you could get it the same in one browser/OS combination, it would look different in another.

    2. You can fix font rendering slightly using text-rendering. This
      property provides information to the rendering engine about what to
      optimize for when rendering text.

      It’s not defined in any CSS standard – it’s just an SVG property.
      However, Gecko/WebKit/Blink browsers let you apply this property to
      HTML elements.

      Some font files contain additional information about how the font
      should be rendered and optimizeLegibility makes use of this
      information

      so you can use:

      .yourText {
  text-rendering: optimizeLegibility;
}
    3. You can try and use options like font-stretch: normal; or font-weight:normal; maybe they will help you atleast a little.
    Login or Signup to reply.
  3. 0

    Are you sure that you just didn’t set the browser’s view zoom to somewhat below 100%? It seams like that.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search