font-face for local fonts

2
votes

I have a framework of html/css pages using a font-face declaration with a otf. Now I want to switch it to a common font like Verdana. How can I assign Verdana to the font-face declaration avoiding a numerous replacement of font-family declaration? In other words: How can I use the font name declarated by font-face as a font variable?

@font-face {
    font-family: 'bauer-bodoni.otf';
    src: url(../fonts);

Should be something like this (which is not working in this form):

@font-face {
    font-family: 'Verdana', 'Arial', sans-serif;

Thank you very much in advance. -R.

EDIT/ANSWER: I've found out on my own. The trick is not to list the fonts the way you do in a normal font declaration, separated by comma, but with a "local()" for each:

@font-face {
    font-family: 'myOwnFontSet';
    src: local('Verdana');
    src: local('Arial');
    src: local(sans-serif);
1
cssfont-face

1 Answers

0
votes

Your update is still wrong. You need the following:

@font-face {
font-family: 'myOwnFontSet';
src: local('Verdana'), local('Arial'), local(sans-serif); }