Using @font-face in evo

13 Posts

warthogweb Reply #1, 15 years, 8 months ago

Does anyone know where the woff, svg, ttf etc. font files must be located in evo? I’ve tried several locations but the site is not picking up the font.
Martin

330 Posts

Pete Edley Reply #2, 15 years, 8 months ago

As far as I can remember it can be anywhere and you speciffy the location as part of the css.

Somthing like :

@font-face {
    font-family: DeliciousRoman;
    src: url(http://www.site.com/assets/fonts/fontname/filename);
}

Edit the url above to fit your structure and site

Personal site www.cww.org.ukMinistry site Children WorldwideWork site Handsworth Christian School

284 Posts

novolo Reply #3, 15 years, 8 months ago

You have to give the right path to the CSS:

url(/assets/fonts/fontname.ext);

MODX Free Template Base: MODX-Boilerplate | my blog (lots of MODX stuff) | my gitHub (translations) | MODX User Groups Germany (Facebook)

☆ A M B ☆
3,141 Posts

Mark Hamstra Reply #4, 15 years, 8 months ago

I always use FontSquirrel to make @font-face packages. Just upload all the files (I typically make an assets/fonts/ folder for that) and reference the stylesheet in the head of the page template.

<link rel="stylesheet" href="assets/fonts/fontname.css" />

Mark Hamstra • Developer spending his days working on Premium Extras and a MODX Site Dashboard with the ability to remotely upgrade MODX and extras to make the MODX world a little better.

Tweet me @mark_hamstra, check my infrequent blog at markhamstra.com, my slightly more frequent ramblings at MODX.today or see code at Github.

561 Posts

samba Reply #5, 15 years, 8 months ago

Quote from: warthogweb at Feb 04, 2011, 03:37 AM

Does anyone know where the woff, svg, ttf etc. font files must be located in evo? I’ve tried several locations but the site is not picking up the font.
Martin

Definitely what Mark said... Font Squirrel is awesome. My designer clients love being able to use custom fonts! It frees you up a lot.

I’m wondering how badly you need SVG and WOFF? I just use TTF (that works in most decent browsers), and EOT for brain-dead IE, and I’m good to go, and less code to write. Though maybe you can get more granular by using the other ones, and no reason why they wouldn’t work fine with correct paths.

There are many possibilities of typos in this type of code, so I’m guessing that’s what’s going on, or simply the path is off, unless your font files are bad.

Good luck, D

MODx and Wordpress development
Linux, PHP 5.2, MySQL 5.0, Evo 1.05, Revo 2.08-pl, Firefox 4