BUY ACTIONS HERE

Actions World Background
Actions World Background Actions World Background Actions World Background
Actions World Background

Multiple Font Families

Some of the font kits from FontSquirrel contain more than one font, giving you a family to work with. Here are some observations that you will need to take into consideration when working with these.

You will most likely have to edit the CSS file to get them to behave properly in the browser. The latest version of the Action includes a handily Edit button so you can open the file without having to locate it in Finder. Let’s see what the changes are made to Candela’s CSS file to make the different font styles (Italic, bold etc.) behave correctly in the browser.

Here is the raw CSS file from FontSquirrel:

@font-face {
font-family: 'CandelaBook';
src: url('CandelaBook.eot');
src: local('Candela Book'), local('Candela-Book'), url('CandelaBook.woff') format('woff'), url('CandelaBook.ttf') format('truetype'), url('CandelaBook.svg#Candela-Book') format('svg');
}

@font-face {
font-family: 'CandelaBookItalic';
src: url('CandelaItalic.eot');
src: local('Candela Book Italic'), local('Candela-Book-Italic'), url('CandelaItalic.woff') format('woff'), url('CandelaItalic.ttf') format('truetype'), url('CandelaItalic.svg#Candela-Book-Italic') format('svg');
}

@font-face {
font-family: 'CandelaBold';
src: url('CandelaBold.eot');
src: local('Candela Bold'), local('Candela-Bold'), url('CandelaBold.woff') format('woff'), url('CandelaBold.ttf') format('truetype'), url('CandelaBold.svg#Candela-Bold') format('svg');
}

@font-face {
font-family: 'CandelaBoldItalic';
src: url('CandelaBoldItalic.eot');
src: local('Candela Bold Italic'), local('Candela-Bold-Italic'), url('CandelaBoldItalic.woff') format('woff'), url('CandelaBoldItalic.ttf') format('truetype'), url('CandelaBoldItalic.svg#Candela-Bold-Italic') format('svg');
}

We need to do two things:
1) Ensure that the font-family name is consistent throughout the file
and
2) tell the CSS file when to use that particular weight.

Here is our modified file - with changes highlighted:

@font-face {
font-family: 'CandelaBook';
src: url('CandelaBook.eot');
src: local('Candela Book'), local('Candela-Book'), url('CandelaBook.woff') format('woff'), url('CandelaBook.ttf') format('truetype'), url('CandelaBook.svg#Candela-Book') format('svg');
}

@font-face {
font-family: 'CandelaBook';
src: url('CandelaItalic.eot');
src: local('Candela Book Italic'), local('Candela-Book-Italic'), url('CandelaItalic.woff') format('woff'), url('CandelaItalic.ttf') format('truetype'), url('CandelaItalic.svg#Candela-Book-Italic') format('svg');
font-style: italic, oblique;
}

@font-face {
font-family: 'CandelaBook';
src: url('CandelaBold.eot');
src: local('Candela Bold'), local('Candela-Bold'), url('CandelaBold.woff') format('woff'), url('CandelaBold.ttf') format('truetype'), url('CandelaBold.svg#Candela-Bold') format('svg');
font-weight: bold;
}

@font-face {
font-family: 'CandelaBook';
src: url('CandelaBoldItalic.eot');
src: local('Candela Bold Italic'), local('Candela-Bold-Italic'), url('CandelaBoldItalic.woff') format('woff'), url('CandelaBoldItalic.ttf') format('truetype'), url('CandelaBoldItalic.svg#Candela-Bold-Italic') format('svg');
font-weight: bold;
font-style: italic, oblique;

}

It is important to note that the bold italic weight must come last in the CSS file.

In Freeway, set up one font set for the one font-family. In this case, it would be “CandelaBook”. When you use the Bold or Italic buttons in Freeway, the correct weight should be used by the browser when the page is published.