How to add web fonts to your Blogger blog in 3 easy steps

I used to discourage clients from using fonts that weren’t already a web font on Google. That is until now, now I have the tools to use any font I want on a site. I’m going to share with you how to use any font from Dafont, Font Squirrel, Kevin and Amanda (have some the cutest handwritten fonts out there!), etc. on your blog. So pick out the font you like, download it to your desktop and extract the .otf or .ttf file from the downloaded in a .zip file.

1. Convert your font file

You need to convert your .otf or .ttf font file into a @Font-Face kit. There are different resources out there for you to use, I happen to use, like, and recommend Font Squirrel.

Click on the Upload Fonts button and select your .otf or .ttf file you just downloaded/extracted to your desktop > Select Optimal > and check the Agreement > After your font has been successfully uploaded click Download Your Kit and save to your desktop.

Extract the files from the web font kit .zip file. Essentially the only files you’ll need are the ones with the .woff, .woff2, .tff or .otf, .svg, .eot extensions, and the stylesheet.css file, you can ignore the rest — just let them hang out in the folder.

2. Upload font files to DropBox

Custom fonts in Blogger need to be uploaded to the web before you can utilize them in your Blogger design. We’re going to use DropBox and upload the the 5 font files to your Public folder — upload only the font files with the .woff, .woff2, .tff or .otf, .svg, and .eot extensions.

Once you have the fonts uploaded you’ll need to copy the URLs of each of the fonts, to do this right click on the file Kind and select Copy public link. For each of the fonts paste this link into a Notepad so it’s easily accessible for the next step.

Next step, open up the stylesheet.css file that came with the kit, it should look something like this:

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on March 4, 2015 */

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

}

Replace each URL link (between the single quotes) to point to the file you just uploaded to DropBox by copy/pasting in the new URLs.

For example, the first link you need to replace is the .eot file. You’ll change this line:

src: url('font-name.eot');

to be something very much like:

src: url('https://dl.dropboxusercontent.com/u/########/peamilymix-webfont.eot');

Pay close attention to the file extensions to make sure you replace the correct file URLs, and also notice that the .eot URL will go in 2 places. After you have replaced all of the URLs in the stylesheet.css copy the all of the code to your Notepad for the next step!

3. Upload everything to Blogger

Last step and you’re golden! In your Blogger blog go to Template > Edit HTML > and search for:

))>

Just ABOVE this code copy/paste the code from the stylesheet.css you just saved in your Notepad.

And, lastly we need to include the new font-family code in the CSS. For example if you want to change the font of the blog title you would need scroll up or search for .Header h1 and add the font-family in between the brackets like this:

.Header h1 {
...
font-family: 'pea_mily_mixregular' !important;
}

Adding the font-family to the different heading sections ensures that Blogger uses your new custom font we just uploaded. I like adding !important at the end because it overrides any previous code. After you’ve made these changes click Save Template.

Check out your site to see your new font!

Like my advice? Please consider supporting me with a cup of coffee or a sweet tweet:

Add custom web fonts to your Blogger blog in 3 easy steps #blogspot #techietips
Click To Tweet

The post How to add web fonts to your Blogger blog in 3 easy steps appeared first on Carrie Loves.