User Tools

Site Tools


phplugins_fonts

Supplying Your Own Fonts

You're a typography nut and you've purchased your own fonts. Or maybe you just want a page full of obscure Wingdings. Or perhaps you've decided to publish your website entirely in Klingon. Whatever the case, you need to shove your own fonts into CE4. So let's talk CSS Web Fonts.

Web fonts allow Web designers to use fonts that are not installed on the user's computer.

When you have found/bought the font you wish to use, just include the font file on your web server, and it will be automatically downloaded to the user when needed.

Your “own” fonts are defined within the CSS3 @font-face rule.


Step 1: Enable PHPlugins & Setup Custom CSS

We're going to be using PHPlugins, so you've got to turn them on. And then we'll be implementing the @font-face rule via custom CSS, so set that up as well. Here are your links:


Step 2: Upload Your Fonts

Your fonts will need to be online, so create a place to store them. I recommend creating a folder within /phplugins, for example:

/phplugins/fonts

For the widest possible support, you will want your fonts in all of the following formats:

  • EOT
  • WOFF
  • TTF
  • SVG

If some of these formats are unavailable, then you can usually get away with just WOFF/TTF, or even just WOFF if that's all you've got.


Step 3: @font-face

In a plain text editor, open the /phplugins/css/custom.css file. Here's your code:

@font-face {
  font-family: 'MyWebFont';
  src: url('/phplugins/fonts/webfont.eot'); /* IE9 Compat Modes */
  src: url('/phplugins/fonts/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/phplugins/fonts/webfont.woff') format('woff'), /* Modern Browsers */
       url('/phplugins/fonts/webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('/phplugins/fonts/webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Of course, you should replace “webfont” with whatever the name of the font you're using.

If you've only got WOFF/TFF formats, then try:

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
       url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}

Finally, now that we've called the fonts, we can use them like this:

body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}

Step 4: Fonts in CE4

To override font properties for specific page elements, please see our CE4 Typography Template.

phplugins_fonts.txt · Last modified: 2014/08/16 06:11 by matthew

The Turning Gate
Creating webbly, wobbly, Lightroomy things since 2007.