• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer
  • Submissions
  • About Us
  • Contact Us
  • Jul 7, 2022
  • Startup
    • Creating a Plan
    • Funding a Startup
    • Franchise Center
    • Getting Your Office Ready
    • Making Your Business Official
    • Marketing Your New Business
    • Personal Readiness
  • Run & Grow
    • Customer Service
    • Human Resources
    • Innovation
    • Legal
    • Operations
    • Risk Management
  • Leadership
    • Best Practices
    • Communication
    • Green Initiatives
    • Open Culture
    • Strategic Planning
    • People Skills
  • Sales & Marketing
    • Advertising and Lead Generation
    • Marketing Innovations
    • Marketing Plans
    • Online Marketing
    • Relationships
    • Sales Activities
  • Finance
    • Budgeting and Personal Finance
    • Payments and Collections
    • Tax and Accounting
    • Pricing Strategy
    • Working with Investors
    • Working with Lenders
  • Tech
    • eCommerce
    • Hardware
    • Software
    • Security
    • Tech Reviews
    • Telecom
  • Shop

SmallBizClub

Helping You Succeed

Home / Sales and Marketing / Online Marketing / Beautiful Fonts for Your Website
Beautiful Fonts for Your Website

Beautiful Fonts for Your Website

1513 Views

Aug 20, 2014 By Mark Turkel

When putting together a website, your font choices are just as important as your content. Within the past few years fonts are being made available online for web designers. In the past it was a hassle trying to create a beautiful website with 10 standard fonts, and if you didn’t want to use those fonts you would have to create images out of the ones you did use. Simple fix, but there was a down side: with your website loading all these images the load time for the page was very long for the user.

Why do I need special fonts for my website?

When designing your website there are many things that come into play; the #1 most important item is your logo. Without a logo, it is unwise to set up a website because your logo will not be the strongest element defining your brand, rather your website’s colors and layout will drive the tone/look and feel of the site. Your logo should define the colors of the website, the style of the website, and your type choices for the website.

Where Do I Find fonts for my website?

Because web-safe fonts are becoming popular, there are many websites that offer them both free and commercially. Some free websites are Font Squirrel and Google Fonts. These are great for any client or person on a budget. If you are looking for high quality fonts, Adobe Typekit and My Fonts are the way to go, but these websites charge you for the fonts.

How Do I implement these new beautiful fonts?

Depending on the website you decide to use there are two main ways to implement fonts. The first way is to download the .zip file and install it onto your website and reference it in your .css file. The second way is to link an external file in your tag and reference it in your .css file. Let us talk about the first way, so after downloading your .zip you go ahead unzip it and see multiple files (.eot, .woff, .ttf, .svg) these files tell the different browsers how to render the font. Make sure to place these files into your website directory so they are able to be referenced. Then you simply paste this code into your referenced .css file and change the name FontName to the name of the font you will be using:

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

SIMPLE!

Now let us talk about the second way! We will use Google Font as an example, in this case Google allows you to download the font but it is much easier to reference it in your website. So after you have looked through the list of fonts you found one that you would like. You simple paste this code between your tags of your website and change FontName to the font you are using:

After linking this in your tag, move over to your .css file and place this at the top, again change FontName to the font you are using:

Font-family:’FontName’, sans-serif

Just be aware that Google provides both these tags for you and depending on the font you select they will differ.

Author: Crystal Darin is the Senior Web Designer/UX Specialist at Palm Beach Software Design, Inc.

This article was originally published by Palm Beach Software

Filed Under: Online Marketing Tagged With: Branding, Design, Mark Turkel, Website

Mark Turkel

Mark Turkel

Mark Turkel is the CEO and Senior Software Architect at Palm Beach Software Design, a software development and consulting company working in software development and implementation of business software systems including analysis, database design, and MIS planning. Palm Beach Software Design specializes in web, mobile, and desktop applications using the latest technologies such as Microsoft .Net, SQL Server, Java, HTML5, JQuery, and more.

Related Posts

  • how-to-win-with-compliance-brandingBranding Yourself: A Critical Decision
  • Creating a Strong Brand Identity Through Your Cloud Communication System
  • 8 Best Ways to Generate More Attention for Your Company

Primary Sidebar

Random

Essential Insights For Leaders Who Manage By Autocracy

Jul 7, 2022 By Marty Zwilling

Congress Hears From Small Businesses About Problems Caused By Wayfair

Jul 7, 2022 By TaxConnections

5 Top Tips for Small Businesses to Keep Up With Regulatory Changes

Jul 6, 2022 By Ryan Kidman

How Temperature Monitoring Helps Improve the Supply Chain for Healthcare Startups

Jul 5, 2022 By Vikas Agrawal

Communication is Key: Interview With Jason Girdner and Scarlet Mick of TECOBI

Jul 5, 2022 By SmallBizClub

Footer

About Us

Small Biz Club is the premier destination for small business owners and entrepreneurs. To succeed in business, you have to constantly learn about new things, evaluate what you’re doing, and look for ways to improve—that’s what we’re here to help you do.

  • Facebook
  • LinkedIn
  • RSS
  • Twitter

Copyright © 2022 by Tarkenton Institute, Inc. All Rights Reserved | Terms | Privacy