Grow your CSS skills. Land your dream job.

Italicized fallback

  • jmc
    # November 26, 2012 at 7:27 am

    In my current project, I am working with an imported serif font that inherently has an italic skew to it. I would like to set the fallback font to georgia, but I would like to apply the italic version of Georgia as the fallback, rather than it’s normal display.

    Is there any way I can apply Italics to just one of my fallbacks? or is there a way I can call upon the italic display of Georgia within the css?

    (I wish I could be as helpful on the forums as most of you seem to be, but I am still pretty new to all this!)

    # November 26, 2012 at 8:04 am

    What is the font that you are using that is italic?

    jmc
    # November 26, 2012 at 8:40 am

    I am using a font from lost type called [pigeon](http://www.losttype.com/font/?name=pigeon “”). The font itself, to me at least, looks to be inherently italicized. needless to say, it does bear a similarity to italic Georgia, hence why I would like to set that as the fall back.

    # November 26, 2012 at 9:38 am

    I can’t see any way of doing this (other than using a Georgia Italic font).

    I suppose it **might** be possible to do something with JS though.

    # November 26, 2012 at 9:49 am

    I can see what you mean. The only way of doing it that I can think of is using Modernizr. This then detects what browsers do (and don’t) support. If it doesn’t support @font-face, it applies a class of no-fontface to the html tag. You then target that like so:

    html.no-fontface { font-family: Georgia; font-style: italic; }

    The thing is, pretty much all browsers (except really ancient ones) support @font-face, even IE6 supports it as far as I am aware (I have no way of testing).

    I [KNOW](http://caniuse.com/#search=font%20face “”) that IE7, 8, 9 and 10 support it. Gecko, Opera and Webkit browsers do too.

    # November 26, 2012 at 10:01 am

    Yeah…but that’s not the issue..or is it?

    If his web served font isn’t loaded (for whatever reason..perhaps the font-repository is down) then he want’s an italic fallback that’s available locally

    # November 26, 2012 at 10:02 am

    Actually it doesn’t resemble Georgia that well.

    There is a way to do what you’re asking with CSS but I can’t find the post in the forum.

    # November 26, 2012 at 10:04 am

    Hmm you could have a JS function that checks to see what the body font-family is, and if it is currently Georgia add a CSS value to the body to make it italicized. But I wouldn’t want to do that, unless it is extremely important that everyone sees italic text.

    # November 26, 2012 at 10:14 am

    I FOUND IT

    @font-face { font-family: “GeorgiaItalic”; src: local(“Georgia Italic”); font-style: italic; }

    [And to prove it](http://codepen.io/alexmccabe/pen/Aytgk “”)

    # November 26, 2012 at 10:17 am

    @alexmccabe Assuming he owns/licenced “Georgia Italic” :)

    # November 26, 2012 at 10:17 am

    Paulie_D, it takes the local copy stored on the users machine.

    # November 26, 2012 at 10:19 am

    Yeah…but my point was (& perhaps I’m missing something) is that Georgia Italic would have to be installed…and (happy to be wrong) but that’s not a standard font..or is it?

    Or would it take a standard Georgia and italicize it?

    # November 26, 2012 at 10:19 am

    Update: On my computer it’s “Georgia Italic” (with spaces).

    @Pauly_D Georgia has italics and it is on both Windows and Mac.

    # November 26, 2012 at 10:24 am

    You can add multiple local sources to one font-face declaration. I updated the pen to show that. It doesn’t take standard Georgia and italicize it. Quite annoying. One would assume though, that if the user has Georgia installed, they also have Georgia Italic. I am using Windows and Mac right now and both have Georgia pre-installed.

    # November 26, 2012 at 10:24 am

    On my standard install W7 machine…I only have Georgia and not GI is not listed as a ‘separate’ font.

    However, of course, the trick would be to specific a ‘standard’ italic font that resembles the chosen font as closely as possible.

    Solved…ish. :)

Viewing 15 posts - 1 through 15 (of 28 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".