Polices importées

Polices importées sur notre serveur

Pour importer une police (à partir du site font squirrel par exemple), on doit mettre la police sur notre serveur (dans tous les formats nécessaires : woff, ttf, svg, eot) et éventuellement avec différentes variantes (gras, italique,...).

Ensuite, on doit déclarer cette police dans notre fichier CSS, dans le cas de cet exercice on a

@font-face {
    font-family: 'sf_burlington_scriptregular';
    src: url('../fonts/SF_Burlington_Script-webfont.eot');
    src: url('../fonts/SF_Burlington_Script-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/SF_Burlington_Script-webfont.woff') format('woff'),
         url('../fonts/SF_Burlington_Script-webfont.ttf') format('truetype'),
         url('../fonts/SF_Burlington_Script-webfont.svg#sf_burlington_scriptregular') format('svg');
    font-weight: normal;
    font-style: normal;
	}

On peut enfin utiliser cette police dans notre CSS, par exemple :

h1	{
		font-family:'sf_burlington_scriptregular';
	}

Polices importées à partir d'un site internet

Il existe des services qui fournissent des polices à intégrer directement dans son CSS depuis une URL distante. On en trouve par exemple chez Google.

Pour pouvoir utiliser la police choisie, le plus facile est d'appuyer sur l'icône 'quick-use' (la deuxième). On trouve alors le code à insérer

• dans le html avec la balise
  <link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
• dans le css avec la règle
  @import url(https://fonts.googleapis.com/css?family=Oswald);
• avec un code javascript

Quisque rutrum metus eu porta consequat. Phasellus posuere nisl non augue aliquam, sed blandit odio bibendum. In hac habitasse platea dictumst. Vivamus aliquet libero consectetur lacus facilisis lacinia. In vulputate elit nec erat vulputate, ac rutrum diam sollicitudin. Suspendisse enim odio, viverra at orci eu, luctus molestie dui. Maecenas porttitor non diam quis porta. Nulla sit amet augue ante. In in ex eget leo blandit aliquet ac et ipsum. Nam vehicula odio et erat tristique, ut lobortis leo commodo. Maecenas a porta augue, sed pulvinar lorem.

Nullam tincidunt vitae justo sit amet tincidunt. Quisque placerat urna id mauris egestas, ut tempor velit ullamcorper. Curabitur at arcu in neque hendrerit lacinia. Donec risus quam, egestas sed ex ut, scelerisque ullamcorper libero. Morbi vel ullamcorper lacus. Aliquam pellentesque, eros sed pretium facilisis, odio justo sodales nunc, non ultricies elit ante ut turpis. Integer orci massa, elementum vel orci in, sollicitudin dictum tortor. Quisque fringilla ornare sem nec pulvinar. Integer cursus interdum nunc. Vivamus rhoncus feugiat pretium. Ut fringilla tempor ligula et congue.