How to embed font from Google Web Fonts?

The method presented below uses the format "WOFF" and may not be compatible in some configurations with some older browsers.

To get maximum compatibility with major browsers we recommend that you read this article.

First get Google Web Fonts code : https://fonts.google.com/
We choose typography "Advent Pro," designed by Andreas Kalpakidis.

Google Web Fonts gives the following code :

<link href='https://fonts.googleapis.com/css?family=Advent+Pro' rel='stylesheet' type='text/css'>

Get the CSS @font-face code from url: http://fonts.googleapis.com/css?family=Advent+Pro

@font-face {
  font-family: 'Advent Pro';
  font-style: normal;
  font-weight: 400;
  src: local('Advent Pro Regular'), local('AdventPro-Regular'), url('https://themes.googleusercontent.com/static/fonts/adventpro/v1/rT9jpj7pBpZV6AmssbZKkxsxEYwM7FgeyaSgU71cLG0.woff') format('woff');
}

There are two methods :

Method 1 : Insert @font-face in the "head" section of your page (Toolbars)
Only the current page will call that font.

Insert @font-face code in the « head » section between tags <style> </style> :

<style>
@font-face {
  font-family: 'Advent Pro';
  font-style: normal;
  font-weight: 400;
  src: local('Advent Pro Regular'), local('AdventPro-Regular'), url('https://themes.googleusercontent.com/static/fonts/adventpro/v1/rT9jpj7pBpZV6AmssbZKkxsxEYwM7FgeyaSgU71cLG0.woff') format('woff');
}
</style>

Click on "save page" button top right or ctrl+s

websico_@font-face5-en-css.jpg

Method 2 : Insert @font-face in the CSS
All the pages of site will call that font.

Insert @font-face code at the end of the CSS :

@font-face {
  font-family: 'Advent Pro';
  font-style: normal;
  font-weight: 400;
  src: local('Advent Pro Regular'), local('AdventPro-Regular'), url('https://themes.googleusercontent.com/static/fonts/adventpro/v1/rT9jpj7pBpZV6AmssbZKkxsxEYwM7FgeyaSgU71cLG0.woff') format('woff');
}

Click on « Apply » and save

websico_@font-face-advent-en.jpg

With both methods imported typography can be used directly by any element of this page.
With method 2, any element in anay page can use that typography.

In our example for the "rich text", you'll find typography Advent Pro in the "Characters" at the end of the drop-down list under "import".