01 02 03 04 05 06 07
★ Owner: Kayla
★ Opened: 06/09/17
★ Program: Photoshop CC 2020
★ Version: 13
★ Started Sw: 2005ish
★ Host: Myself
★ Credits: x
home content tutorials holiday contact ov

Web Font Tutorial

This allows you to install custom fonts on your website to use as a font-family in links or headers or anywhere you want them, so instead of using the basic fonts like arial, you can use ANY font you want. I'm using the font ernest for this tutorial.

The Steps

1. Upload the font to your website just like you would upload a picture or a file.

2. Put this coding in your style.css or wherever else you have the styling of your layout.
@font-face {
src: local('Ernest'),

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~Understand the above coding!~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  • PUTTHEURLOFTHEFONTHERE : Put your url of the font you uploaded there. The direct url. My url of the font ernest looks like this
  • font-family:'pixel'; : change pixel to whatever you want to nickname the font you uploaded.
  • src: local(Ernest'), : make this THE EXACT NAME OF THE FONT THAT YOU UPLOADED. See how in my url it is Ernest, so I made it Ernest here?

  • 3. Put this piece of coding INSIDE OF where you want the font to be at, like with affies or elites or whatever. Change where it says "pixel" to whatever you nicknamed yours.
    font: 10px/10px pixel;