Writing fonts¶
To avoid overloading your website, WebAcappella lets you define 6 different fonts.
There are 3 types of cast iron:
Standard text font (already installed on your system)
Web Fonts (such as GoogleFonts)
Custom Web Font (from free or pay files)
It’s advisable to use a maximum of one or two Web fonts on your entire site.
This will ensure fast display and a certain graphic consistency.
Standard text font¶
Standard text fonts have been selected from those installed by default on almost all operating systems (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.
Custom Web text font¶
You’ll find sites offering Web font files (free or paid).
Here’s an example of hosting the ‘Amatic SC’ font
Enter the name of the ‘Amatic SC’ font
Add the woff and woff2 files to your project
Copy the CSS code, including the file url (‘{{ WA_FONT_FAMILY }}’ will be automatically replaced 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 lets you select from the list of Web fonts offered by Google (Google Fonts)
WebAcappella will automatically download the files and install them on your server.
(Automatic installation on the server requires a WebAcappella FUSION PRO license)
