Is it possible to include a font style in a font-family list?

Question

I would like to use the italic variant of a font as a backup font in my font-family list in my CSS file. Is this possible in any way? Something like:

font-family: SuperSlanty, Verdana-Italic;

@kinakuta No, I am using [Google Fonts](https://developers.google.com/fonts/) — Conrad, Nov 27 '13 at 20:26
possible duplicate of [Selectively Style Fallback Fonts Without JavaScript?](http://stackoverflow.com/questions/10221975/selectively-style-fallback-fonts-without-javascript) — James Montagne, Nov 27 '13 at 20:27
Have you reviewed the developer API for Google fonts yet? https://developers.google.com/fonts/docs/developer_api — kinakuta, Nov 27 '13 at 20:28
looking at it briefly should answer your question - you'll need to identify the variants you want and, if it's available, specify the uri for each of those variants. I'd check it out. — kinakuta, Nov 27 '13 at 20:42

score 1 · Answer 1 · answered Nov 27 '13 at 20:18

1

Just use font-style:italic; as described here.

answered Nov 27 '13 at 20:18

Jan Heinrich Reimer

741
10
25

I believe the idea is only to have it italic in the case that `SuperSlanty` isnt' found and it falls back to `Verdana`. – James Montagne Nov 27 '13 at 20:22
Doesn't this make every font in `font-family` italic? I only want one specific font (i.e. not the first one) to be italic. – Conrad Nov 27 '13 at 20:23
1

@Conrad Then you'll need JS. Sorry – Jan Heinrich Reimer Nov 27 '13 at 20:30

Alessandro Incarnati · Answer 2 · 2013-11-27T21:37:08.720

Check this http://jsfiddle.net/Hd4zq/4/

You can load all the google fonts you need through JS in an array and then change the CSS font properties adding the right font-style (in your case italic) to a specific CSS class you will add to your html elements.

    <script type="text/javascript">
        google.load('webfont','1');
        google.setOnLoadCallback(function() {
            WebFont.load({
                google: {
                    families: ['Droid Serif','Tangerine']
                }
            });
        });
    </script>


<p class="serif">SERIF</p>
<p class="serifItalic">SERIF ITALIC</p>
<p class="serifBold">SERIF BOLD</p>
<p class="serifBoldItalic">SERIF BOLD ITALIC</p>
<p class="tangerine">Tangerine</p>


.serif{
    font-family:'Droid Serif'; 
    font-size:30px; 
    font-style:normal;
    font-weight: 400;
}

.serifItalic{
    font-family:'Droid Serif'; 
    font-size:30px; 
    font-style:italic;
    font-weight: 400;
}

.serifBold{
    font-family:'Droid Serif';
    font-size:30px;
    font-style:normal;
    font-style:bold;
}

.serifBoldItalic{
    font-family:'Droid Serif'; 
    font-size:30px;
    font-style:italic; 
    font-weight: bold;
}

.tangerine{
    font-family:'Tangerine'; 
    font-size:30px;
    font-style:italic; 
    font-weight: bold;
}

And yes, you can add one of the font in italic as fallback by adding more than one font in the font-family property like:

.fontwithFallback{
font-family: 'Droid','Tangerine';
}

Is it possible to include a font style in a font-family list?

2 Answers2