How to Host Your Own Custom or Downloaded Font as a Web Font

Have you ever wondered how you can step up your web design game?

I recently started self-hosting web fonts because clients of mine were requesting that I use special fonts on their websites that they had downloaded for free from the web.  I had previously stuck to using common fonts or Google Web Fonts.  However, now I have been using more and more special fonts from sites like DaFont and Urban Fonts.  There are many other free font sites, but those are just a couple.

Converting Your .ttf Font File to the File Types Needed to Host as a Web Font

Once you have selected your font and downloaded the .ttf font file, go to this Online Font Converter and select the following font file extensions:

font-converter-select-type

Then click on “Select Fonts” and either choose the file or drop your .ttf font file into the box.

font-converter-drop-files-here

Once you had added the file, click “Done”:

font-converter-done

Click “Save Your Font”:

font-converter-save-attachment

Click “Download Attachment”

font-converter-download-attachment

The zip file will download.  Extract this zip file and you should see the following file extensions: eot, svg, ttf, and woff.

font-converter-font-files

Writing the CSS to Self Host Your Font Files

These files will need to be dropped into the same folder as your CSS.  You can put them in a separate folder as long as you add that directory to the urls in your CSS.

Once that is done, you can simply add the following @font-face rule to your CSS file.

@font-face {
font-family: 'Antipasto';
font-weight: normal;
font-style: normal;
src: url('Antipasto.eot');
src: url('Antipasto.eot?#iefix') format('embedded-opentype'),
url('Antipasto.woff') format('woff'),
url('Antipasto.ttf') format('truetype'),
url('Antipasto.svg#Antipasto') format('svg');
}

To use this font, simply use font-family: "Antipasto" in your CSS.

 

  •  
  •  
  •  
  •  
  •  
  •  

Where To Find A Web Designer Or Freelancer For Any Web Project

I often meet business owners who have a need for a website designer, developer, blogger, an seo/marketing agency, or creative agency and don’t know who to ask, or where they can find one.  I should note that if they are a small business in need of a website for a reasonable budget, I will hand them my card because, heck, I am a web designer!  Or if I think they are a good fit for my husband’s inbound marketing and SEO agency, I will obviously refer them to Northcutt.  But there have been cases where what they needed was either not within my skill-set or the skill-set of anyone I know personally or budget discussions did not quite match up and I ended up recommending some other sites that might be more up their alley.  So here is my list of sites that I would go to for a web designer or any other web related service (if, of course, I couldn’t use my own services or the services of people I already know).

  1. clutch.com – This is a great resource if you are looking for a local web designer, web/software/mobile app developer, or really any IT service for that matter.  It is also a good place to find local firms that do any kind of marketing such as advertising, social media marketing, or search engine optimization.  I love this resource because in order to get listed on Clutch, they have to conduct phone interviews with references that you provide.  The results of those phone interviews and the interviewee ratings are included in your business profile.
  2. upwork.com Upwork is a great place to find any type of freelancer from web designers and developers to graphic/logo designers to writers and bloggers.  To use this website you have to post a job/project description and budget and freelancers will apply for the job if they think they are a good fit.  It is then up to you to review their profiles and decide who is the best person to work on your project.  Payment for services is handled through upwork.
  3. sortfolio.comSortfolio is a great online listing for finding anything from freelance web designers to large web design agencies for any industry.  Here you can search for local agencies by city, view their typical budget, and check out their portfolio.  However, there is no rating system for this site, so you may end up calling around to a lot of different agencies before you find the right one.
  4. agencypimp.com – If you live in Chicago and you need to find a local agency for literally any job, this is a good listing site.  However, there is no rating system or portfolio to look at.  It is simply a listing of websites by agency category.

Why I Became A Web Designer

At times during my professional career as a web developer in the corporate world, I felt that my creativity was stunted and I only had time to do exactly what was asked of me and nothing more.  Nothing extra.  Nothing fun!

As a web developer/programmer who also enjoyed web design, I was frustrated by the fact that we all get lumped into one of 2 categories: web developer or web designer.  The problem was that I wanted to be both.  Not only that, but I wanted to dabble in some marketing as well.

In the corporate world, a person’s job definition and tasks are so granularly defined.  Not to mention the bureaucratic levels of organization required to make changes to anything.  I get why the corporate world is like this.  But in the freelance web designer world, my job isn’t so cut and dry.

My job title used to be Senior Associate Programmer and that included being technical lead of an agile project, a Java programmer, a JavaScript programmer, a SQL programmer, and sometimes I would get the chance to write some CSS.  But my opinions about design were not heard.  There was a whole separate team that handled images, colors, layout, and all that jazz.  Because of this designer/developer disconnect, there were always problems arising.  Sometimes the technical expertise of the programmers was needed for a successful design deliverable, and sometimes designer input was needed during coding/development.  Sometimes I just wanted to bridge the gap.

Now with my current work, I get the chance to handle everything from the server-side (database, back end, and security) setup, to the front end, content review, and setup required for search engines.  I call myself a web designer but that term encompasses a lot of different areas for me.  And that is just the way I like it!

I also love that I can walk out my door and meet so many different business owners here in Chicago that have a need for my work.  For me, talking with the customers and understanding what they want/need out of their website is a very interesting piece of the puzzle.  I could not even imagine how hard it must be for the owner of any small business to find someone who they can trust to build a website and help with the preliminary steps of marketing.  A website is an important necessity for a new business.  Getting that website right the first time is an even more important necessity!

I recognize that the web can be daunting and regardless of what your business is, I am here and happy to help.  Contact me to ask about my web design services!