Writing fonts¶
In order not to overload your website, WebAcappella allows you to define 6 different fonts.
These fonts are of 3 types:
Standard text font (already installed on your system)
Web Fonts (such as GoogleFonts)
Customised web font (from free or paid files)
It is advisable to use a maximum of one or two web fonts throughout your site.
This will allow for quick display and graphic consistency.
Standard text font¶
Standard text fonts have been selected from those found on almost all operating systems by default (Arial, Times …).
This type of font will not consume any network resources, as it already exists on the terminal of the visitor to your site.
Customised web text font¶
You will find sites offering web font files (free or paid).
Here is an example of hosting the ‘Amatic SC’ font
Enter the name of the font ‘Amatic SC
Add the woff and woff2 files to your project
Copy the CSS code with the url of the files (‘{{ WA_FONT_FAMILY }}’ will be replaced automatically by ‘Amatic SC’)
/* amatic-sc-regular - latin */
@font-face {
font-family: '{{ WA_FONT_FAMILY }}';
font-style: normal;
font-weight: 400;
src: local(''),
url('{{WA_FILE amatic-sc-v24-latin-regular.woff2}}') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('{{WA_FILE amatic-sc-v24-latin-regular.woff}}') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* amatic-sc-700 - latin */
@font-face {
font-family: '{{ WA_FONT_FAMILY }}';
font-style: normal;
font-weight: 700;
src: local(''),
url('{{WA_FILE amatic-sc-v24-latin-700.woff2}}') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('{{WA_FILE amatic-sc-v24-latin-700.woff}}') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
Google Web Font¶
WebAcappella allows you to select from the list of web fonts offered by Google (Google Fonts)
WebAcappella will automatically download the files to install them on your server.
(Automatic installation on the server requires a WebAcappella FUSION PRO license)
