CodeX
Published in

CodeX

Choose Your Font: Top Free Font Websites (and how I added mine to my project)

Photo by Brett Jordan on Unsplash

Since the days of “pimping” my Myspace profile, there’s something I like to play with up to this day, fonts. Everywhere we look, we see those identifiable letters. We can identify the brand even if it’s not the correct word. We are visual species everything that gets our attention depends on how striking it is. For that, you need good lettering.

Did this “CODE” get your attention?

That’s where fonts come into play. Something I learned working for a multimedia company a year ago is that we make our brands. As professionals (much like celebrities themselves), we all create and grow our brands and, as Software Engineers creating our portfolios, we must remarkably portray our brand. After all, we are selling it to potential customers and recruiters.

Creating a portfolio can be fun, as there are all kinds of templates for your portfolio site. Here’s my recommendation. But, we don’t want our site to be identical to that template must add our flavor, our attitude, our (I repeat) brand.

In my case, I wanted something fun and cool for my name in the header. Perhaps, something that hints a bit about the music scene I’ve been involved in or reflects my personality. That’s when a lightbulb lightens up in my head. Let’s do this font:

Hello, my name is Norberto.

Hardcore Pen was my choice. My portfolio is still a work in progress, but let’s share a little bit of code. To import the font, I’m going to use it to make it public. I had to do the following:

@import url(//fonts.cdnfonts.com/css/hardcore-pen);@import url(//fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700);@import url(//fonts.googleapis.com/css?family=Pacifico);.navbar-brand b {
color: #fff;
font-family: 'hardcore_pen';
font-weight:400;
}

I used @import in the styles.css file. I also referred posted the link in the index.html file like this:

<link href=”//fonts.cdnfonts.com/css/hardcore-pen” rel=”stylesheet” type=”text/css” />

I hope you can use the code as a reference.

The following are my favorite options to find free fonts online:

  1. DaFont
    I’m going to start with the one I found the precious hardcore pen myself. On this website, you can download any font you want for your project. From basic fonts to references to your favorite music genre or favorite tv shows, there’s a lot to choose from for anything you want. You can also test the fonts on the site.
  2. Google Fonts
    This is the Google site. It’s the same as all other font sites but with the Google brand (again, branding). If you’re looking for a reliable and straightforward site, this is the best option for you.
  3. Font Space
    This is such a fun website. Not only do you get to choose from 85,000 fonts. You can also write some stuff and get a bunch of cool Unicode options such as 𝔟𝔩𝔞𝔠𝔨𝔩𝔢𝔱𝔱𝔢𝔯, 𝚊ا𐌉 mⅈ𝓍e𝖽 𝛖𝗉, and (p)(a)(r)(e)(n)(t)(h)(e)(s)(i)(s). Paste that Unicode header to your social media accounts and prepare to become the next huge influencer. It’s a hip website to explore and try at your favorite coffee shop or craft beer brewery.
  4. CDN Fonts
    Another site with a limitless amount of options. You can choose between Serif, Display, Handwritten, and Monospace. It’s a great choice to test how you’re text would look in each option.
  5. Font Squirrel
    They let you know it’s 100% for commercial use. The characteristic in one is the Identify Fonts option. It does identify the font in a picture and find distributors for that font. Of course, it’s some kind of advertisement device, but at least you’re going to know the font matches for free.

Go to any of those websites, try them out, and most importantly, have fun building your brand.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Norberto Santiago

Norberto Santiago

Norberto Santiago is a bilingual full-stack developer. Currently living in the Twin Cities. https://www.norbertosantiago.com/