• Registered: 2014-12-29
  • Posts: 41

Topic: webfonts in ampps environment [SOLVED]

I'm using a Mac Pro running Yosemite.  I'm able to create a test server using the free ammps application, and - doing so, I'm able to develop my site.

I'm not fond of the basic fonts and prefer to use my own.  Also - instead of a graphic logo, I want to use a standard heading.

I want to replace your Headings fonts with my own, and I don't seem to be able to make that happen.

I created a webfont kit from fontsquirrel.com and followed the instructions in "Adding Custom Styles and Fonts", but I'm not seeing them.

I'm working with the Kosel theme, however I suspect the issue is not theme dependent.

Can you offer some guidance, please?

Given a choice, I'd like to make the change in theme.ini

Thank you

  • Registered: 2012-12-16
  • Posts: 950

Re: webfonts in ampps environment [SOLVED]

I created a webfont kit from fontsquirrel.com and followed the instructions in "Adding Custom Styles and Fonts", but I'm not seeing them.

I would really need to see your Showkase site in order to troubleshoot your problem so please upload the site to a web server and post the URL so that I can take a look and help further.

In the meantime, please double-check that you have added your custom CSS code to the correct 'custom.css' file (in the folder corresponding to the theme you are using) and that the paths in the CSS code correctly point towards the font files themselves.

  • Registered: 2014-12-29
  • Posts: 41

Re: webfonts in ampps environment [SOLVED]

OK.  I'm also trying to include a contact form on the contact page.
I'll post again when I've got the url for you.

  • Registered: 2014-12-29
  • Posts: 41

Re: webfonts in ampps environment [SOLVED]

I moved my fonts to ../fonts/, and this is my code in custom.css:

/* Set your custom styles here */
@font-face {
    font-family: 'sansa_soft_pronormal';
    src: url('../fonts/sansasoftpro-normal-webfont.eot');
    src: url('../fonts/sansasoftpro-normal-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/sansasoftpro-normal-webfont.woff2') format('woff2'),
         url('../fonts/sansasoftpro-normal-webfont.woff') format('woff'),
         url('../fonts/sansasoftpro-normal-webfont.ttf') format('truetype'),
         url('../fontssansasoftpro-normal-webfont.svg#sansa_soft_pronormal') format('svg');
    font-weight: normal;
    font-style: normal;

}

header hgroup h1 {
    font-family: 'sansa_soft_pronormal', sans-serif;
    font-size:  18px;
    line-height:   1.5;
}

This matches the example in "Adding custom styles and fonts" and is the only change I made to the default settings.

I generated the site and don't see the font anywhere.  "header hgroup h1" might not be correct for the site heading in the Kosel theme, however.

Where can I find the proper code to replace the heading, sub-heading and menu fonts?

Thank you

  • Registered: 2014-12-29
  • Posts: 41

Re: webfonts in ampps environment [SOLVED]

I found the elements I wanted using the firebug extension.  This gives me the results I want (shows me where to make changes):

/* Set your custom styles here */
@font-face {
    font-family: 'sansa_soft_pronormal';
    src: url('../fonts/sansasoftpro-normal-webfont.eot');
    src: url('../fonts/sansasoftpro-normal-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/sansasoftpro-normal-webfont.woff2') format('woff2'),
         url('../fonts/sansasoftpro-normal-webfont.woff') format('woff'),
         url('../fonts/sansasoftpro-normal-webfont.ttf') format('truetype'),
         url('../fontssansasoftpro-normal-webfont.svg#sansa_soft_pronormal') format('svg');
    font-weight: normal;
    font-style: normal;

}

body.light header h2 {
    font-family: 'sansa_soft_pronormal', sans-serif;
}

body.light header h1 {
    font-family: 'sansa_soft_pronormal', sans-serif;
    font-size:  18px;
    line-height:   1.5;
}

thanks

  • Registered: 2012-12-16
  • Posts: 950

Re: webfonts in ampps environment [SOLVED]

I'm glad that you've been able to resolve your problem.
Thank you for posting back to let me know.