• All posts in Tutorials

    Using alternative, free fonts on the web

    25 July, 2011 Design
    Tutorials
    Web Development     3 Comments

    Font SquirrelThere are many different ways to use non standard web fonts in web pages. I’ve tried a lot of these ways in the past and have found that some techniques are better than others. Here’s one way of going about using alternative free fonts in a simple step by step guide. I hope this post will help others by demystifying the process.

    To complete these steps you’ll need an understanding of HTML and CSS and have a site already set up with some <h1></h1> tags and a separate .css file for the layout of your site.

    Font squirrel

    For this example we’re going to change all the h1 elements to League Gothic.

    1. Go to http://www.fontsquirrel.com/fontface
    2. Find League Gothic and click ‘Get Kit’
    3. Open the .zip file and rename it ‘type’
    4. Place it in the root directory of your website
    5. Find the file stylesheet.css (in the file you just renamed ‘type’)
    6. Copy the code from this file into your main .css file
    7. In this css you just copied, make sure all the paths to the fonts are correct by adding /type/ just before all the lines which read League_Gothic-webfont. For example: src: url('/type/League_Gothic-webfont.eot');
    8. Now in your main css file type h1 {font: 'LeagueGothicRegular'}

    Bingo. Now all your <h1></h1> elements are displayed in League Gothic.

    Installing MAMP and WordPress on a Mac

    18 July, 2011 Tutorials
    Web Development     No Comments

    Installing MAMP and WordPress on a MacMy internet went down for a few days recently. I needed to find a way to work on some WordPress projects locally without internet connection. Here’s how I did it.

    1. Download and install MAMP from here www.mamp.info and WordPress from here wordpress.org
    2. On your Hard Drive Go to /Applications/MAMP/htdocs and unpack the WordPress.zip folder in here
    3. Go to /Applications/MAMP and Install the dashboard widget by clicking on MAMP
    4. On the Mac widget you just installed click on the button that reads ‘Open start page’ which will take you to http://localhost:8888/MAMP/
    5. On this page find the line: The MySQL Database can be administrated with phpMyAdmin – click on this link
    6. Create a new database and call it ‘test-site-1′ for example
    7. On your hard drive find /Applications/MAMP/htdocs/test-site-1/wp-config-sample.php and rename it wp-config.php
    8. Open this wp-config.php file and change the settings to:
      define('DB_NAME', 'test-site-1');
      define('DB_USER', 'root');
      define('DB_PASSWORD', 'root');
      define('DB_HOST', 'localhost:8889');
    9. Go to http://localhost:8888/wordpress/
    10. You’ll be prompted to enter the details of your WordPress site

    Hey presto. You’re all set up to work on a local WordPress install.

    Credits

    Thanks to Chris Coyer for posting this #86 First Moments with MAMP
    Michael Doig for posting this Installing WordPress Locally Using MAMP
    and to Nick La for posting this Installing WordPress Locally