The Support Forums will be in read-only mode for a scheduled maintenance window on 01 September 2016 14:00 UTC - 20:00 UTC. More information.

Problems with @font-face (5 posts)

  1. Aldarabd
    Posted 3 years ago #

    I have wordpress installed locally and I am working in the css theme.
    I would like to have a very thin font in the header but when I make the font-size bigger it also gets bolder (much much bolder than in photoshop at the same size).

    I tried to change the font-weight but doesn't work. The code is

    #header {
    	background: #fff;
    	padding: 30px 5px 40px 5px;
    	font-family: 'josefin_sans', sans-serif;

    I use @font-face to personalized the font.

    @font-face {
        font-family: 'josefin_sans';
        src: url('fonts/josefinsansstd-light-webfont.eot');
        src: url('fonts/josefinsansstd-light-webfont.eot?#iefix') format('embedded-opentype'),
             url('fonts/josefinsansstd-light-webfont.woff') format('woff'),
             url('fonts/josefinsansstd-light-webfont.ttf') format('truetype'),
             url('fonts/josefinsansstd-light-webfont.svg#josefin_sans_stdlight') format('svg');

    Hope any of you help me!
    Thanks, Aldara.

  2. esmi
    Forum Moderator
    Posted 3 years ago #

    There's no real answer to this. Most fonts become slightly bolder as they are enlarged. Perhaps you just need to look for another font?.

  3. Aldarabd
    Posted 3 years ago #

    Well it doesn't become slightly bolder, it gets much, much, much bolder :( than in photoshop and this is the third font I tried!
    This is very weird, it is the first time this happens to me.
    Thank your for your quick answer!

  4. Andrew Nevins
    Forum moderator
    Posted 3 years ago #

    Can you post here a screenshot of the boldness issue and say which font size it is?

    Then we can compare to the font's demonstration page as to whether it's an issue with the font itself.

  5. esmi
    Forum Moderator
    Posted 3 years ago #

    A link to the actual page where this "bolding" is happening might also be helpful - just in case you've missed another bit of CSS that's causing the problem.

Topic Closed

This topic has been closed to new replies.

About this Topic