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.

../../_images/fonts_edition.webp

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).

../../_images/font_custom_edit.webp

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.

https://fonts.google.com/

../../_images/google_fonts.jpg