How to add a Google Font or Custom Font to your Blogger or WordPress Blog

adding custom fonts to blogger and wordpress
Todays post will discuss adding custom fonts to your blog on WordPress and Blogger using Font Directories or Google Web Fonts. Blogger has improved the font collection available in Template Designer, but choices are still limited. One of the best and easiest ways to add a custom font to your blog is using Google Web Fonts with over 600 to choose from you’re bound to find one that you like. If you don’t want to use Google Web Fonts, I have a second method below showing you how to add any font to Blogger. A very similar method is used for adding Google Web Fonts to wordpress.org sites. If you are on wordpress.com you do have to pay to get access to custom fonts, you can read more about custom design fonts on wordpress.

[postwarning]

Adding a Google Web Font to Blogger

1. Check out the Google Web Fonts Directory and pick a font that you like.
2. You can add fonts to your collection or just select one to use.
3. Then you can choose the styles of the font you want.
4. It will give you the code to integrate the font which looks like this

<link href='http://fonts.googleapis.com/css?family=FONTNAME' rel='stylesheet' type='text/css'>

We need to close the code to prevent errors. To do this add a / to the end before > so that the code looks like this

<link href='http://fonts.googleapis.com/css?family=FONTNAME' rel='stylesheet' type='text/css'/>

5. Now log into your Blogger account. Go to Template > Edit HTML. Find <head> and below it paste the edited code to embed the font.

6. Google Web Fonts will also provide you with the CSS for the font which will look something like this

font-family: 'FONTNAME'; 

You can use this for any element on your blog. Remember CSS is written like selector { property: value; }. To use the font as your post title, find </b:skin> in your HTML. Can’t find it? Check out this post. Above </b:skin> paste the following and change the value for your font. Use the same method to change the font of other elements by using the correct selector.

h3.post-title {font-family: 'FONTNAME';}

Adding a Google Web Font or Custom Font to Self Hosted WordPress

Adding Google Web Fonts to Self Hosted WordPress is pretty much the same. Put the first piece of code between the head tags in your header file. You do not need to close the code. Add the second code to your stylesheet and style different elements using the same method. If using custom fonts, host the fonts yourself and link to them as shown in the tutorial below.

Adding a custom / third party font to Blogger that isn’t a Google Web Font

UPDATED FEB 2015 to reflect new changes on Dropbox

1. First, make sure you have the correct permissions and licensing to use the font. Normally you do need a commercial license when using fonts on blogs so it’s best to double check with the creator. Typically you can’t use fonts on templates that you sell either, but again it’s important to check with the creator. Good places to find fonts are DaFont, FontSquirrel and UrbanFonts. Download the font you want, it will usually be in OFT or TTF format. Sometimes they will provide you with a webfont, if they do you can skip the next step.

2. If you don’t have a web font, you can convert the font using FontSquirrel WebFont Generator and download the kit. Unzip it if necessary.

3. Set up a pro account on Dropbox. Upload each of the fonts there to a folder, it’s important not to alter this later on. If you have an older free account that has a public folder, you can use that instead. You can also use Google Drive but it’s more difficult to get the correct URL you need.

4. Click on each font > share link… > get link. Note the URLs in a text file. Here is an short tutorial showing this process, it has slightly changed since it was recorded but the process is the same.

5. Open the .css file you got in the kit download in step 2. You need to open the file in a text editor such as TextEdit, TextWrangler, SimpleText, TextPad or even NotePad. You’ll see code similar to below. Edit the URL’s so that they link to the fonts on your Dropbox like shown.

@font-face {
font-family: 'FONTNAME';
src: url('THE-URL-TO-YOUR-FONT/FONTNAME.eot');
src: url('THE-URL-TO-YOUR-FONT/FONTNAME.eot?#iefix') format('embedded-opentype'),
url('THE-URL-TO-YOUR-FONT/FONTNAME.woff') format('woff'),
url('THE-URL-TO-YOUR-FONT/FONTNAME.ttf') format('truetype'),
url('THE-URL-TO-YOUR-FONT/FONTNAME.svg#FONTNAMEregular') format('svg');
font-weight: normal;
font-style: normal;
}

6. On Blogger, find ]]></b:skin>. Copy the modified code from the .css file in the webkit folder and paste it above ]]></b:skin>.

7. You can now change the font of elements on your blog by adding CSS above ]]></b:skin>. To change the post title font use the following

h3.post-title {font-family: 'FONTNAME';}

or search for the following code in Template > Edit HTML

h3.post-title, .comments h5 { 

add your font to the beginning of the values like so

h3.post-title, .comments h5 { font: 'NEW FONT', arial, other default fonts; } 

Not working? Common Issues

I’ve noticed two common issues from comments and emails I’ve received regarding this post. Please check these carefully. I do provide a tweaking service here for adding fonts if you are having trouble and don’t want to do it yourself.

1. Make sure you are using the correct URL from Dropbox, Google Drive, your own hosting, etc. The link should bring you to the font file.

2. The other issue is incomplete code before the font code. Go to Template > Edit HTML and find ]]></b:skin>. Above this, you will see the code for changing the font like so

 @font-face {
    font-family: 'FONTNAME';
    src: url('https://dl.dropboxusercontent.com/u/000000000/FONTNAME.eot');
    src: url('https://dl.dropboxusercontent.com/u/000000000/FONTNAME.eot?#iefix') format('embedded-opentype'),
         url('https://dl.dropboxusercontent.com/u/000000000/FONTNAME.woff') format('woff'),
         url('https://dl.dropboxusercontent.com/u/000000000/FONTNAME.ttf') format('truetype'),
         url('https://dl.dropboxusercontent.com/u/000000000/FONTNAME.svg#FONTNAMEregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

h3.post-title {font-family: 'FONTNAME';}

]]></b:skin> 

Check above @font-face to make sure any previous code is closed. By closed I mean has an end bracket }. Complete CSS code should look like this

 previouscode { example: example;  }

Leave a Reply

Thank you so much for taking the time to comment! Your email will not be published or shared but you will recieve an email if your comment has a reply. Need help with a tutorial? Check out our Coding + Consultation service for one-on-one assistance.

222 comments

    • Ellie M on

      I need some details to be able to help you. What is your blog link? What platform are you using? Did you change the font name to the correct font and implement it into your blog?

      Reply
    • Ellie M on

      Usually means it’s in the wrong place or written incorrectly. If you look at the code on the top of your blog, theres a link before the font face and non for the fonts.

      First make sure everything is placed before ]]></b:skin>
      Unzip the Font and upload each one to Dropbox
      Add your Public URLs from Dropbox to the Fonts.

      Your code should look something like

      @font-face {
      font-family: ‘frenchyregular’;
      src: url(‘https://dl.dropboxusercontent.com/u/000000000/frenchy-webfont.eot’);
      src: url(‘https://dl.dropboxusercontent.com/u/000000000/frenchy-webfont.eot?#iefix’) format(’embedded-opentype’),
      url(‘https://dl.dropboxusercontent.com/u/000000000/frenchy-webfont.woff’) format(‘woff’),
      url(‘https://dl.dropboxusercontent.com/u/000000000/frenchy-webfont.ttf’) format(‘truetype’),
      url(‘https://dl.dropboxusercontent.com/u/000000000/frenchy-webfont.svg#frenchyregularr’) format(‘svg’);
      font-weight: normal;
      font-style: normal;
      }

      h3.post-title {font-family: ‘frenchyregular’;}

      ]]></b:skin>

      Reply
  1. courtney on

    Hi! Here’s what I have so far… I’m not sure where I’ve gone wrong:

    @font-face {
    font-family: ‘mtf_cupcakeregular’;
    src: (‘https://www.dropbox.com/s/fnx2vcvcnxzdzv4/mtf_cupcake-webfont.eot’);
    src: (‘https://www.dropbox.com/s/fnx2vcvcnxzdzv4/mtf_cupcake-webfont.eot#iefix’) format(’embedded-opentype’),
    (‘https://www.dropbox.com/s/28i1k3uw80okfi9/mtf_cupcake-webfont.woff’) format(‘woff’),
    (‘https://www.dropbox.com/s/7gi93f467xcuivm/mtf_cupcake-webfont.ttf’) format(‘truetype’),
    (‘https://www.dropbox.com/s/1ju8d37kqwu0yh7/mtf_cupcake-webfont.svg’) format(‘svg’);
    font-weight: normal;
    font-style: normal;

    }

    h3.post-title {font-family: ‘mtf_cupcakeregular’;}

    }
    ]]>

    Reply
    • Ellie M on

      Before ]]> there is a curly bracket } which appears to be extra, unless you have pasted the code in between another. It looks like you are missing some code, it should look like the example below. Also, you’re using shared dropbox links, not the public URL. Upload to Public folder, click Copy Public Link. They should look like https://dl.dropboxusercontent.com/u/000000/

      @font-face {
      font-family: ‘mtf_cupcakeregular’;
      src: url(‘https://dl.dropboxusercontent.com/u/000000000/mtf_cupcake-webfont.eot’);
      src: url(‘https://dl.dropboxusercontent.com/u/000000000/mtf_cupcake-webfont.eot?#iefix’) format(‘embedded-opentype’),
      url(‘https://dl.dropboxusercontent.com/u/000000000/mtf_cupcake-webfont.woff’) format(‘woff’),
      url(‘https://dl.dropboxusercontent.com/u/000000000/mtf_cupcake-webfont.ttf’) format(‘truetype’),
      url(‘https://dl.dropboxusercontent.com/u/000000000/mtf_cupcake-webfont.svg’) format(‘svg’);
      font-weight: normal;
      font-style: normal;
      }

      h3.post-title {font-family: ‘mtf_cupcakeregular’;}

      ]]></b:skin>

      Reply
    • Ellie M on

      Hello, yes you do it the exact same way except change the selector in the CSS. So instead of using h3.post-title, use the code for your sidebar titles which may be something like .sidebar .widget h2 depending on your template and then change the font name in {font-family: 'FONTNAME';} to your own. Hope this helps 🙂 xx

      Reply
  2. Tabitha on

    Hello,

    I’m currently trying to customise an old blog template (URL above) before switching it across to my current one and am trying to add custom fonts for the post titles and sidebar. I managed it years ago with my current blog, but now I’m trying to do it again using dropbox, nothing seems to work. The code I pasted above the }]]> bit is:

    @font-face {
    font-family: ‘espacioregular’;
    src: url(‘https://dl.dropboxusercontent.com/u/198023010/espacio-webfont.ttf’);
    src: url(‘https://dl.dropboxusercontent.com/u/198023010/espacio-webfont.eot?#iefix’) format(‘embedded-opentype’),
    url(‘https://dl.dropboxusercontent.com/u/198023010/espacio-webfont.woff’) format(‘woff’),
    url(‘https://dl.dropboxusercontent.com/u/198023010/espacio-webfont.ttf’) format(‘truetype’),
    url(‘https://dl.dropboxusercontent.com/u/198023010/espacio-webfont.ttf’) format(‘svg’);
    font-weight: normal;
    font-style: normal;
    }

    h3.post-title {font-family: ‘espacioregular’;}

    But when I click save and look at the blog, the writing is the same still? I’m using the simple template if this helps!

    Reply
    • Ellie M on

      Hi, unfortunately I can’t get onto your blog to have a closer look at your code. You could invite me as a reader if you are still having trouble? There doesn’t look to be anything wrong with the code above, so maybe it is conflicting with a previous h3.post-title. You could try adding !important like this h3.post-title {font-family: ‘espacioregular’ !important;}. Also check Template > Edit HTML > find ]]> </b:skin>, your font code should be above this but above that, check to make sure the previous code it closed, if it is missing the closing }, the font code may not work. Let me know how you get on xx

      Reply
    • Beth Clark on

      Hi Tabitha, you’ve probably found a way to solve you issue by now, but I thought I’d chime in with something that helped me, and maybe Ellie would like to share it with other Blogger users. I have found that font changes that I attempt to make with Blogger don’t work for me IF I have several HTML widgets on my blog. If I have too many HTML widgets (on the sidebar, etc), then visual changes such as the font code don’t appear. I could change things in my code to my heart’s content, and they would not be visible to me after saving. Idk why that is, but I Googled it, and someone suggested removing the HTML widgets, making my changes, and then REINSTALLING the HTML widgets. In my experience, this works like a charm.

      Removing the widgets isn’t too much of a hardship if you copy-and-paste the code for each widget in separate notepad docs, with the title you gave the widget clearly marked, and save them all in a folder. Also, take a screenshot of your blog’s layout before removing any widgets, so you can put them back in the right order. And of course, before doing anything, save a backup of your template, in case something goes wrong! But it should be fine. I chose to do these steps before following Ellie’s tutorial above, and it works perfect. I’d tried to install a Google font last week, and it did not work for me because of the widgets.

      Also, I think there might be some additional step to change the font of existing posts; I think installing a new font only changes the font of future posts. I’m still figuring that out!

      Hope this information isn’t way off-base for why it wasn’t working for you! Maybe it’ll be helpful to someone else, anyway. Take care!

      Reply
      • Ellie M on

        Hello Beth. That is very odd, I’ve never come across gadgets being a problem before as they are located in a different area of your template. I only use HTML gadgets on my personal blog, a lot of them and am able to change fonts using the methods above. Thanks for bringing it to my attention, I will have to have a look into this. Where did someone suggest removing the gadgets, could you link me to that page? I notice you are only adding custom font to certain section using span tags, this could be what’s causing the issue as multiple ones could be conflicting.

        Installing a new font like shown above will change the font of the entire blog for that element (either the title, body, headings, header, gadgets, etc depending on what CSS you use), if you change the font of body in your css, it will change for all text o your blog including posts, not just future ones published. Also, just wanted to let you know since I had a look through your code that you have multiple CSS entries for page navigation. If you go to Template > Edit HTML and find ]]> </b:skin>, above it you will see it is there five times. It would be best to remove 4 of these, will help the loading of your page and browsers as well as search engines prefer clean coding. Thank you so much for the comment, will definitely look into that issue and comment back here if I find anything xx

        Reply
  3. sarah on

    Hi Ellie,

    I’ve tried to follow allow your steps above but am unsure where im going wrong! Could you help! Thanks so much x

    @font-face {
    font-family: ‘passionmedium’;
    src: url(‘https://www.dropbox.com/s/1vtp6k3vu1dyhm1/Passion.ttf’);
    src: url(‘https://www.dropbox.com/s/1vtp6k3vu1dyhm1/Passion.ttf’) format(’embedded-opentype’),
    url(‘https://www.dropbox.com/s/1vtp6k3vu1dyhm1/Passion.ttf’) format(‘woff’),
    url(‘https://www.dropbox.com/s/1vtp6k3vu1dyhm1/Passion.ttf’) format(‘truetype’),
    url(‘https://www.dropbox.com/s/1vtp6k3vu1dyhm1/Passion.ttf’) format(‘svg’);
    font-weight: normal;
    font-style: normal;

    }
    h3.post-title {font-family: ‘passionmedium’;}

    Reply
    • Ellie M on

      Hello 🙂 it’s hard to tell without seeing the placement in your code. Is the code placed above ]]></b:skin>. Also the name of your font files appears to be passion-webfont, this name and the name on your dropbox links should match. Example – url(‘https://www.dropbox.com/s/1vtp6k3vu1dyhm1/passion-webfont.ttf’) format(‘svg’);. You probably have h3.post-title in your template already which could be conflicting with this code, if this is happening you can either edit it which is what I recommend or add ! important like this h3.post-title {font-family: ‘passionmedium’ !important;}. Hope this helps x

      Reply
  4. hannah on

    hello!

    first of all, very helpful post.
    however, i am trying to change the font of my pagelist or tabs and i cant seem to figure out the code needed.
    i have changed the post title using h3.post-title but what would the code be for the tabs/pagelist.

    i am using the simple theme on blogger if that helps!
    thanks!

    Reply
    • Ellie M on

      Hello 🙂 thank you. Similarly to the CSS for family above, it is font-size: NUMBERpx ; in between the brackets. Change the number depending on what suits. Here is an example of changing the font size of the post title

      h3.post-title { font-size: 12px; }

      Hope that helps x

      Reply
  5. Laura on

    Thank you so much for this post! I have a beautiful font I’ve been wanting to put on my blog 🙂
    I believe I have followed all of your steps; unfortunately even though the font of my blog titles Did change from what I had it set to (just using the template editor) it isn’t the correct font. I believe it is just showing whatever default font chrome / firefox is set to show (?). Here is my code:

    @font-face {
    font-family: ‘bellotaregular’;

    src: url(‘https://dl.dropboxusercontent.com/u/23273504/webfontkit-

    20130906-200710/bellota-regular-webfont.eot’);
    src: url

    (‘https://dl.dropboxusercontent.com/u/23273504/webfontkit-

    20130906-200710/bellota-regular-webfont.eot?#iefix’) format

    (’embedded-opentype’),
    url

    (‘https://dl.dropboxusercontent.com/u/23273504/webfontkit-

    20130906-200710/bellota-regular-webfont.woff’) format(‘woff’),

    url(‘https://dl.dropboxusercontent.com/u/23273504/webfontkit-

    20130906-200710/bellota-regular-webfont.ttf’) format(‘truetype’),

    url(‘https://dl.dropboxusercontent.com/u/23273504/webfontkit-

    20130906-200710/bellota-regular-webfont.svg#bellotaregular’)

    format(‘svg’);
    font-weight: normal;
    font-style: normal;

    }
    h3.post-title {font-family: ‘bellotaregular’ !important;}
    ]]>

    Reply
    • Ellie M on

      Hmm, seems you have a couple of fonts from the template designer and they aren’t being read properly. Have a look through your code and find the other original h3.post-title, try adding the font name to it as well. Let me know how this goes okay x

      Reply
  6. Greta on

    Hi! This is an amazing tutorial and I think I almost have it….I want my post titles to be Signerica Thin, same as my blog title font. This is what I have and it’s not working!

    @font-face {
    font-family: ‘signerica_thinregular’;
    src: url(‘https://www.dropbox.com/s/0xfwjgaqv6bvq0x/signerica_thin-webfont.eot’);
    src: url(‘https://www.dropbox.com/s/0xfwjgaqv6bvq0x/signerica_thin-webfont.eot#iefix’) format(’embedded-opentype’),
    url(‘https://www.dropbox.com/s/mqj6qc9coxthzqj/signerica_thin-webfont.woff’) format(‘woff’),
    url(‘https://www.dropbox.com/s/rm6fawwsplbpnd0/signerica_thin-webfont.ttf) format(‘truetype’),
    url(‘https://www.dropbox.com/s/lb43b1ljg3w8bnj/signerica_thin-webfont.svg#signerica_thinregular’) format(‘svg’);
    font-weight: normal;
    font-style: normal;

    }

    h3.post-title {font-family: ‘signerica_thinregular’;}

    Any ideas of what I am doing wrong? Desperate!

    Thank you so much,
    Greta xo

    Reply
  7. Malu on

    Hello! I added my font for my titles, but its not showing up on my end 🙁
    Hopefully you can help me. I chose Quicksand from the google fonts.
    Here is my code (i started it from the very first line for reference) :

    hopefully you can help!! 🙂


    Reply
    • Ellie M on

      Hello, your code didn’t appear in the comment for some reason but I think I know why it isn’t showing on your blog. The code is visible at the top of your blog, this usually indicates that it’s in the wrong place. It needs to be between <b:skin> and </b:skin>, right before </b:skin>. Have a look at this post if you are having trouble finding this section. Let me know how you get on 🙂

      Reply
  8. Romy on

    Hey! I’ve done all the steps correctly but still nothing is happening! I’ve added !important; to it, and added {font-family: ‘jenna_sueregular’ !important;} to the only other h3.post-title.

    Here’s my code:

    @font-face {
    font-family: ‘jenna_sueregular’;
    src: url(‘https://dl.dropboxusercontent.com/u/216162866/jennasue-webfont.eot’);
    src: url(‘https://dl.dropboxusercontent.com/u/216162866/jennasue-webfont.eot?#iefix’) format(’embedded-opentype’),
    url(‘https://dl.dropboxusercontent.com/u/216162866/jennasue-webfont.woff’) format(‘woff’),
    url(‘https://dl.dropboxusercontent.com/u/216162866/jennasue-webfont.ttf’) format(‘truetype’),
    url(‘https://dl.dropboxusercontent.com/u/216162866/jennasue-webfont.svg#jenna_sueregular’) format(‘svg’);
    font-weight: normal;
    font-style: normal;
    }
    h3.post-title {font-family: ‘jenna_sueregular’!important;}
    ]]>

    Thank you!

    Reply
    • Ellie M on

      Hello. Find .post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
      .BlogList .item-thumbnail img {
      and under the code for padding etc, make sure to close the tag using }. At the moment the closing tag (bracket) is missing. This comes right before your code for changing the font and could be causing the problem. If it still doesn’t work, search for h3.post-title, .comments h4 in your HTML and add ‘jenna_sueregular’ to font.

      Reply
  9. Hayley on

    Thank you for this tutorial! However, I too can’t figure out why I can’t get my font (brannboll_fetregular) to show up. Here’s what I have:

    @font-face {
    font-family: ‘brannboll_fetregular’;
    src: url(‘https://dl.dropboxusercontent.com/u/216335435/brannbollfet-webfont.eot’);
    src: url(‘https://dl.dropboxusercontent.com/u/216335435/brannbollfet-webfont.eot?#iefix’) format(’embedded-opentype’),
    url(‘https://dl.dropboxusercontent.com/u/216335435/brannbollfet-webfont.woff’) format(‘woff’),
    url(‘https://dl.dropboxusercontent.com/u/216335435/brannbollfet-webfont.ttf’) format(‘truetype’),
    url(‘https://dl.dropboxusercontent.com/u/216335435/brannbollfet-webfont.svg’) format(‘svg’);
    font-weight: normal;
    font-style: normal;
    }

    h3.post-title {font-family: ‘brannboll_fetregular’ !important;}

    ]]>

    As you can tell, I added the “!important” hoping it would help, but no luck. I did find the “h3.post” in two different places. First was in the variables section, which I’m assuming I leave alone. The other was found as follows:

    h3.post-title {
    font: $(post.title.font);
    margin: 0;
    }

    Any suggestions on how to go about fixing this? Thanks!

    Reply
    • Ellie M on

      Hello. Find .post-title a:hover { color: #ffea47 in Template > Edit HTML, and use } to close the tag so it looks like .post-title a:hover { color: #ffea47 } . It’s right above your code for the font and could be causing problems. Also, above ]]></b:skin> you’ll see your font code, make sure the code is correct – especially the apostrophe before and after the links as it is appearing as character entity in your source.

      Reply
  10. Kebrevo on

    I tried to change the title font to HelveticaNeue, but nothing happened
    Here’s the code:

    @font-face {

    font-family: ‘HelveticaNeue-UltraLight’;
    src: url(‘https://dl.dropboxusercontent.com/u/215279485/HelveticaNeue-UltraLight/HelveticaNeue-UltraLight.eot’);
    src: url(‘https://dl.dropboxusercontent.com/u/215279485/HelveticaNeue-UltraLight/HelveticaNeue-UltraLight.eot?#iefix’)format(’embedded-opentype’),
    url(‘https://dl.dropboxusercontent.com/u/215279485/HelveticaNeue-UltraLight/HelveticaNeue-UltraLight.woff’)format(‘woff’),
    url(‘https://dl.dropboxusercontent.com/u/215279485/HelveticaNeue-UltraLight/HelveticaNeue-UltraLight.ttf’)format(‘truetype’),
    url(‘https://dl.dropboxusercontent.com/u/215279485/HelveticaNeue-UltraLight/HelveticaNeue-UltraLight.svg’)format(‘svg’);
    font-weight: normal;
    font-style: normal;
    }

    h3.post-title {font-family: ‘HelveticaNeue-UltraLight’;}

    ]]>

    Reply
    • Ellie M on

      You seem to have removed Bloggers default code from your template, so instead of the date and post title being wrapped with the correct tags, it’s wrapped with font class. You will need to reset this for the code above to take effect.

      Reply
  11. McKenna on

    I have no idea what’s wrong, I’ve explicitly followed everything plus what other’s found as issues in the comments. Ah, I’m going crazy!

    @font-face {
    font-family: ‘lane_-_narrowregular’;
    src: url(‘https://dl.dropboxusercontent.com/u/211541050/lanenar_-webfont.eot’);
    src: url(‘https://dl.dropboxusercontent.com/u/211541050/lanenar_-webfont.eot?#iefix’) format(’embedded-opentype’),
    url(‘https://dl.dropboxusercontent.com/u/211541050/lanenar_-webfont.woff’) format(‘woff’),
    url(‘https://dl.dropboxusercontent.com/u/211541050/lanenar_-webfont.ttf’) format(‘truetype’),
    url(‘https://dl.dropboxusercontent.com/u/211541050/lanenar_-webfont.svg’) format(‘svg’);
    font-weight: normal;
    font-style: normal;

    h3.post-title {font-family: ‘lane_-_narrowregular’!important;}

    HELP! 🙂

    Reply
    • Ellie M on

      Hello. Have you since removed the code from your template as I cannot see it in your source to have a look at what the problem might be? Or are you using a test blog? After font-style: normal; and before h3.post-title there should be a closed bracket }. This could be why it isn’t working x

      Reply
  12. Lucy on

    Thank you for this information. I’ve been fiddling about with this for ages now and managed to change the font – but not to the one I want!

    Here’s the code:
    @font-face {
    font-family:
    ‘throw_my_hands_up_in_the_aiR’;

    src: url(‘https://dl.dropboxusercontent.com/u/220365197/ThrowMyHandsUpintheAir.eot’);

    src: url(‘https://dl.dropboxusercontent.com/u/220365197/ThrowMyHandsUpintheAir.eot?#iefix’) format
    (’embedded-opentype’),

    url(‘https://dl.dropboxusercontent.com/u/220365197/ThrowMyHandsUpintheAir.woff’) format(‘woff’),

    url(‘https://dl.dropboxusercontent.com/u/220365197/ThrowMyHandsUpintheAir.ttf’) format(‘truetype’),

    url(‘https://dl.dropboxusercontent.com/u/220365197/ThrowMyHandsUpintheAir.svg#frenchyrefularr’)
    format(‘svg’);

    font-weight: normal;

    font-style: normal;

    }

    h3.post-title {font-family: ‘FONTNAME’;}]]>

    Can you help?
    Thank you,
    Lucy.

    Reply
  13. beth on

    Ok…my first attempt. I don’t see the new font. Here is my code: (I copied a few lines above and below)
    margin-right: auto;
    }

    @font-face {

    font-family: ‘aquilinetworegular’;

    src: url(‘https://dl.dropboxusercontent.com/u/37602882/aquilinetwo-webfont.eot’);

    src: url(‘https://dl.dropboxusercontent.com/u/37602882/aquilinetwo-webfont.eot?#iefix’)
    format(’embedded-opentype’),

    url(‘https://dl.dropboxusercontent.com/u/37602882/aquilinetwo-webfont.woff’) format(‘woff’),

    url(‘https://dl.dropboxusercontent.com/u/37602882/aquilinetwo-webfont.ttf’)
    format(‘truetype’),

    url(‘https://dl.dropboxusercontent.com/u/37602882/aquilinetwo-webfont.svg#aquilinetworegular’)
    format(‘svg’);

    font-weight: normal;

    font-style: normal;
    }
    h3.post-title {font-family: ‘aquilinetworegular’;}
    ]]>

    Reply
  14. Ehryn Torrell on

    Hi there,

    Thank you for your post! It really helped me embed my custom font in the blogger site. I had never used CSS or code before. My blog is dedicated completely to a T MT font, which I designed based on my Mother’s handwriting. My idea for the blog is that anyone can write on it (through the comments) and publish the words in T MT font. Two things: 1) when someone writes a comment initially, it does not show up in T MT but rather a generic typeface. Whatever the comment is, only shows up in T MT on the blog when pushlished. Can I change the initial comment box to allow viewers to write in T MT straight away (continuing the experience of the font throughout the whole process)? 2) My font does not show up at all on Mobile phones, except when you choose the “web version.” How can I embed the font face for mobile phones as well? Thank you!

    Reply
    • Ellie M on

      Hello, sorry about the delay. No there is no way to have the user type in your font, they see the font that is set on their own computer. To add the font to mobile site, go to Template > Edit HTML and search for .mobile .post, this will bring you down to the CSS section for mobiles. Here you can add your font to change the style of different elements. Hope this helps!

      Reply
  15. mike on

    Hi!
    I’ve tried to follow your instructions – have also looked at the comments from others – but am not having much success!

    (1) First, since there is no public folder now in Dropbox, I’m having trouble making the code of my new font public.
    When I go into Dropbox, I can’t find the right place to click to make the font code public. I suspect this might be the reason for nothing happening at my blog.
    (I pasted in the appropriate code and ‘saved template’ but not only did the font not appear with the other 7 fonts, when I returned to the HTML, I couldn’t find the code I’d pasted in!)
    I’ve a couple of other questions, but first things first….

    Reply
    • Ellie M on

      Hello, sorry about the delay replying to you, I’ve been quite ill. It looks like you’re mixing up the two methods, if you’re using a Google font then you don’t need to add them to Dropbox. You have <link href='http://fonts.googleapis.com/css?family='Fascinate Inline', cursive;' rel='stylesheet' type='text/css'/> in your style section, it should be placed right under <head>. Then h3.post-title {font-family: 'FONTNAME';} should be placed in your stylesheet which is before </b:skin>. If using a font that isn’t Google Fonts, you should be able to enable your public folder by clicking here.

      Reply
      • mike on

        Hi again,
        I did want to have a non-Google font installed. Here’s the relevant code as it now looks in the HTML of my blog, escmal.blogspot.com:

        rel=’stylesheet’ type=’text/css’/>/* Generated by Font Squirrel (http://www.fontsquirrel.com) on November 20, 2013 */

        @font-face {
        font-family: ‘new_yorkerregular’;
        src: url(‘https://dl.dropboxusercontent.com/u/23833373/NEWYORKR.TTF’);
        src: url(‘https://dl.dropboxusercontent.com/u/23833373/NEWYORKR.TTF’) format(’embedded-opentype’),
        url(‘https://dl.dropboxusercontent.com/u/23833373/NEWYORKR.TTF’) format(‘woff’),
        url(‘https://dl.dropboxusercontent.com/u/23833373/NEWYORKR.TTF’) format(‘truetype’),
        url(‘https://dl.dropboxusercontent.com/u/23833373/NEWYORKR.TTF’) format(‘svg’);
        font-weight: normal;
        font-style: normal;

        }]]>

        But when I go to edit a post and look at the fonts available, there are still only the usual 7 and not the font I have just installed.

        What am I doing wrong? (Hope you’re feeling better!)
        Mike

        Reply
        • Ellie M on

          Thank you! Just check your code and this is what that section looks like, remove the parts in pink. That’s the font installed, but now you have to tell your blog where to use it (see step 6 in tutorial) so to add the font to your post titles add the part in orange. The font won’t appear in the Template Designer, you have to manually assign it to the sections of your blog. Hope this helps!

          <link href='http://fonts.googleapis.com/css?family='Fascinate Inline', cursive;' rel='stylesheet' type='text/css'/>/* Generated by Font Squirrel (http://www.fontsquirrel.com) on November 20, 2013 */
          @font-face {
          font-family: 'new_yorkerregular';
          src: url('https://dl.dropboxusercontent.com/u/23833373/NEWYORKR.TTF');
          src: url('https://dl.dropboxusercontent.com/u/23833373/NEWYORKR.TTF') format('embedded-opentype'),
          url('https://dl.dropboxusercontent.com/u/23833373/NEWYORKR.TTF') format('woff'),
          url('https://dl.dropboxusercontent.com/u/23833373/NEWYORKR.TTF') format('truetype'),
          url('https://dl.dropboxusercontent.com/u/23833373/NEWYORKR.TTF') format('svg');
          font-weight: normal;
          font-style: normal;
          }

          h3.post-title {font-family: 'new_yorkerregular';}

          ]]</b:skin>

          Reply
          • mike on

            6. You can now change the font of elements on your blog by adding CSS above ]]>. To change the post title font use the following….

            This is what I don’t understand! I did add CSS above ]]> (this appears once in the HTML code).
            Then, ‘the font of elements on your blog’. What are these ‘elements’, and if changing the HTML at Template has no effect, where am I supposed to add the CSS? Sorry, I must seem very thick. Maybe I shd read everything your readers have written on this page then get back to you.

            About the post title: I just want to change one post title, but I don’t suppose this is possible. Change one, change all?
            Mike

          • Ellie M on

            You can only change them all. No you don’t sound thick at all 🙂 let me explain – you added @font-face above ]]</b:skin> to install the font. Now you have to add CSS to style certain elements of your blog. Elements are all the things that make up your blog design so in terms of font and text it’s things like your blog title, the title of your blog posts, the date, the title of your sidebar/gadgets, the font of your main content, etc. Each of these has a different “name” or code applied to it that you can use to edit it, such as –

            Blog Post Title = h3.post-title
            Blog Post Date = .date-header
            Tabs/Menu = .tabs-inner .widget li a
            Blog Header Title = .header h1
            Blockquote = .tr_bq

            Follow the last comment I replied to you (here) and that should solve your problem 🙂 Let me know if you have any other questions.

          • mike on

            Thanks for being so patient!
            Now I see what you mean by ‘elements’. I did try to change the post-title from Times New Roman to my new font but was immediately chastised in red.
            Obviously I am quite conscientious but must try harder!

            What I wd really like to do, is add the new font so that when publishing a text, I can choose the font style. I already have 7 fonts to choose from but wd like to add the new one. Is this too much for Blogger? And I’m beginning to wonder whether it’s too much for me….

          • Ellie M on

            No problem 🙂 Make sure to close the curly bracket (}) just after font-style: normal; and before h3.post-title , this is why you are getting the red error. Double check the code I left in the comment above to see this. Unfortunately, it is not possible to add your custom font to that list. It is advised to stick to one font for your main content (the writing of the posts you publish). You can change all your post content to a custom font by adding body {font-family: 'new_yorkerregular';} – just like you did for h3.post-title {font-family: 'new_yorkerregular';}

  16. jennifer on

    Hi Ellie!

    I’ve added a sticky nav bar but I’m having real difficulty adding a custom (non-Google) font to it! Here’s the font code: @font-face {
    font-family: ‘learning_curve_proregular’;
    src: url(‘ https://dl.dropboxusercontent.com/u/55792274/learningcurve_ot-webfont.eot
    ‘);
    src: url(‘ https://dl.dropboxusercontent.com/u/55792274/learningcurve_ot-webfont.eot
    ?#iefix’) format(’embedded-opentype’),
    url(‘ https://dl.dropboxusercontent.com/u/55792274/learningcurve_ot-webfont.woff
    ‘) format(‘woff’),
    url(‘ https://dl.dropboxusercontent.com/u/55792274/learningcurve_ot-webfont.ttf
    ‘) format(‘truetype’),
    url(‘ https://dl.dropboxusercontent.com/u/55792274/learningcurve_ot-webfont.svg
    #learning_curve_proregular’) format(‘svg’);
    font-weight: normal;
    font-style: normal;
    }

    which I’ve applied above the ]]> but now I don’t know how to get that font onto the nav bar, this is where I’m currently at:

    .tabs-inner .widget li a {
    display: inline-block;

    padding: .6em 1em;

    font-family “learning_curve_proregular” (tabs.font);
    color: $(tabs.text.color);

    border-$startSide: $(tabs.border.width) solid $(content.background.color);
    border-$endSide: $(tabs.bevel.border.width) solid $(tabs.border.color);
    }

    would be soo appreciative of your help!

    Jennifer

    Reply
    • Ellie M on

      Hello, for font-family “learning_curve_proregular” (tabs.font); under .tabs-inner .widget li a {
      display: inline-block;
      it should be font-family: “learning_curve_proregular”;

      Reply
  17. Ami on

    It took me a few times of reading this to understand that not only did I have to paste in the new code with my URLs but also I had to go through my HTML template on Blogger and find where it had all the fonts for my blog and change the one that I wanted to the name of the font I was replacing everything with. Without this tutorial I would have never figured out how to change my fonts to a custom one, it was a little tricky and not really something I would recommend to someone who has never dealt with HTML coding or CSS. I’m so happy though, I just got done creating my own personal font of my handwriting! Now I can blog in my own writing. Thank you.

    Reply
  18. Stephanie on

    Hello there!

    I used this tutorial to change the font for my blog titles and whole body. I am running into 2 problems though.

    1. If you go to my site you will notice that “2013 Christmas Mini Sessions” is blue and the title “DIY Christmas…” is grey. I like the all grey look so why do you think the other is blue?

    2. I noticed the whole “DIY Christmas…” post is correct in the font and size for the body of the post. However, I added a post AFTER that and the font for the title was correct, however the body font was incorrect.

    Thoughts? Thanks for the tutorial and help!

    Reply
    • Ellie M on

      Hello Stephanie,

      1. Your link colour via the Template Designer or your HTML must be set to blue and visited links must be grey. Post titles are links. This means that the post titles are blue until you have visited/clicked into them, then they go grey. You just need to change the colour settings or you can over-ride it by adding h3.post-title a { color: #888888; } to above ]]> </b:skin>.

      2. I can see that you installed the font for your post titles, but I can’t find the installed code for Montserrat font? You need to add the code in part 4 above for Google Web Fonts. There is already a body in your CSS which is probably over-riding your font change. Find the code you added above ]]> </b:skin> for body (body {font-family: 'Montserrat-Regular';}
      body { font-size: 10px; }
      body { font-family: 'Montserrat-Regular' !important; font-size: 10px !important; }. This should make the browser use it instead.

      Just a quick tip too, you can combine CSS, for example you have h3.post-title {font-family: 'bebas_neueregular';}
      h3.post-title { font-size: 34px; }
      – it could be h3.post-title {font-family: 'bebas_neueregular'; font-size: 34px; }

      Hope this helps, let me know how this goes and if you have anymore questions 🙂

      Reply
  19. Sarah on

    Hello! I can’t seem to get this to work. I am trying to change my date font. I am using the Travel template I believe. Here is my code:

    @font-face {
    font-family: ‘impact_labelregular’;
    src: url(‘https://dl.dropboxusercontent.com/u/244348737/Impact%20Label.eot’);
    src: url(‘https://dl.dropboxusercontent.com/u/244348737/Impact%20Label.eot?#iefix’) format(’embedded-opentype’),
    url(‘https://dl.dropboxusercontent.com/u/244348737/Impact%20Label.woff’) format(‘woff’),
    url(‘https://dl.dropboxusercontent.com/u/244348737/Impact%20Label.ttf’) format(‘truetype’),
    url(‘https://dl.dropboxusercontent.com/u/244348737/Impact%20Label.svg#impact_labelregular’) format(‘svg’);
    font-weight: normal;
    font-style: normal;

    }

    .date-header {font-family: ‘Impactlabelregular’;}

    ]]>

    Reply
    • Ellie M on

      Hello Sarah, the font name needs to be written the same way as in the @font-face code so it’s 'impact_labelregular' instead of Impactlabelregular’. You could also try adding !important to over-ride previous code so it looks like .date-header {font-family: ‘impact_labelregular’ !important;} or finding the existing .date-header in Template > Edit HTML and changing the font name there 🙂 Also, double check your links ".../u/244348737/Impact%20Label"because the fonts are named “Impact_Label-webfont” in the kit. They also have to match and at the moment it’s showing an error page.

      Reply
      • Sarah on

        So I realized I uploaded the wrong files to dropbox and I redid the code. This is what it looks like now and it still is not working :/

        @font-face {
        font-family: ‘impact_label-webfont’;
        src: url(‘https://dl.dropboxusercontent.com/u/244348737/impact_label-webfont.eot’);
        src: url(‘https://dl.dropboxusercontent.com/u/244348737/impact_label-webfont.eot?#iefix’)
        format(‘embedded-opentype’),
        url(‘https://dl.dropboxusercontent.com/u/244348737/impact_label-webfont.woff’)
        format(‘woff’),
        url(‘https://dl.dropboxusercontent.com/u/244348737/impact_label-webfont.ttf’)
        format(‘truetype’),
        url(‘https://dl.dropboxusercontent.com/u/244348737/impact_label-webfont.svg#impact_labelregular’)
        format(‘svg’);
        font-weight: normal;
        font-style: normal;

        }

        .date-header {font-family: ‘impact_label-webfont’ !important;}

        Reply
  20. Kelly on

    hello there ,

    i’ve followed your instructions and this is my code. How do I change the header font for my blog title ? I can’t seem to make it work 🙁

    @font-face {
    font-family: ‘floraliaregular’;
    src: url(‘https://dl.dropboxusercontent.com/u/189900200/Floralia.ttf.eot’);
    src: url(‘https://dl.dropboxusercontent.com/u/189900200/Floralia.ttf.eot?#iefix’)
    format(’embedded-opentype’),
    url(‘https://dl.dropboxusercontent.com/u/189900200/Floralia.ttf.woff’)
    format(‘woff’),
    url(‘floralia-webfont.ttf’)
    format(‘truetype’),

    url(‘https://dl.dropboxusercontent.com/u/189900200/Floralia.ttf.svg#floraliaregular’)
    format(‘svg’);
    font-weight: normal;
    font-style: normal;

    }

    h3.post-title {font-family: ‘floraliaregular’;}

    Reply
    • Ellie M on

      Hello Kelly. Your font names should only have one filetype like Floralia.eot not Floralia.ttf.eot. When you download the webkit, expand it and go into the font folder. The 4 versions (eot, woff, ttf and svg) should be in there, upload the 4 of them to Dropbox. Then the link you use should be https://dl.dropboxusercontent.com/u/189900200/Floralia.eot for example. That’s why Blogger can’t grab your font 🙂

      Reply
      • Kelly on

        Ahhh , I can’t seem to identify which file is it from my font kit ! I uploaded every file to dropbox but none of them has the link without ttf. 🙁

        Reply
        • Ellie M on

          Go to this page, click web font kit and then download @font-face kit. Unzip the file that gets downloaded and click into the web fonts folder > then into the Floralia folder and you’ll find each filetype there 🙂

          Reply
          • Kelly on

            @font-face {
            font-family: ‘floraliaregular’;
            src: url(‘https://dl.dropboxusercontent.com/u/189900200/floralia-webfont.eot’);
            src: url(‘https://dl.dropboxusercontent.com/u/189900200/floralia-webfont.eot?#iefix’) format(’embedded-opentype’),
            url(‘https://dl.dropboxusercontent.com/u/189900200/floralia-webfont.woff’) format(‘woff’),
            url(‘https://dl.dropboxusercontent.com/u/189900200/floralia-webfont.ttf’) format(‘truetype’),
            url(‘https://dl.dropboxusercontent.com/u/189900200/floralia-webfont.svg#floraliaregular’) format(‘svg’);
            font-weight: normal;
            font-style: normal;
            }

            h3.post-title {font-family: ‘floraliaregular’;}

            will this be correct ? sorry for the trouble , thankyou so much !

    • Kelly on

      Hi Ellie ,

      I still can’t seem to get in right after placing the code. Also , my purpose for the font change is so that I can use that as my blog title ( not post title ) as blogger doesn’t recognise the font. Do you think I can invite you as an admin to help me with it ?

      Thankyou once again !

      Reply
      • Ellie M on

        Oh sorry, for your blog title use .header h1 { font-family: 'FONTNAME' !important; }. So place that and the @font-face code above ]]> </b:skin>. What’s your URL and I’ll have a look at the code? Then if needed, you can invite me to be admin and I’ll install it for you. There’s a €10 charge for this service.

        Reply
  21. MadebyMeg on

    Hi Ellie! Thanks again for all your help, and happy holidays!

    I have been playing around with my fonts all day and reading people’s comments, but I have a feeling I have either made an error or that something else in the code is over-riding my font.

    I am trying to change the post title on my blog to ‘angelina-webfont’:

    Thanks for any help!

    Reply
  22. annemir on

    thanks a lot for this really, but I can’t really get it done correctly… 🙁 Each time I save it and go back to my blog home, a message pops in that I still have unsaved changes. Why is that so?

    Reply
  23. Krista on

    I’m having a lot of trouble with this and I’m sure it has something to do with the code already in the template but I can’t figure it out… can you please have a look?

    Reply
    • Ellie M on

      Hello, once you downloaded the font did you upload it to create a webkit (step2)? In the style.css file within the font kit it’s called you_wont_bring_me_downregular but you have it as kgyouwontbringmedown-webfont on your blog. Everything (code, file names, urls) need to be the same, otherwise it won’t properly instal.

      Reply
  24. Melody Toh on

    I’ve done all the steps as instructed above but i can’t get it no matter what. I’ve read some comments about adding the !important code and all but i can’t seem to get it.

    Here’s my code:

    @font-face {
    font-family: ‘tire_shop_demo_versionregular’;
    src: url(‘https://dl.dropboxusercontent.com/u/120804581/tireshop_demo-webfont.ttf’);
    src: url(‘https://dl.dropboxusercontent.com/u/120804581/tireshop_demo-webfont.ttf?#iefix’) format(’embedded-opentype’),
    url(‘https://dl.dropboxusercontent.com/u/120804581/tireshop_demo-webfont.ttf’) format(‘woff’),
    url(‘https://dl.dropboxusercontent.com/u/120804581/tireshop_demo-webfont.ttf’) format(‘truetype’),
    url(‘https://dl.dropboxusercontent.com/u/120804581/tireshop_demo-webfont.ttf#tire_shop_demo_versionregular’) format(‘svg’);
    font-weight: normal;
    font-style: normal;

    }

    h3.post-title {font-family: ‘tireshop_demo-webfont’ !important;}

    ]]>

    Hope you can reply as soon as possible.

    Cheers,
    Melody

    Reply
    • Ellie M on

      Hello Melody. The font name for h3.post-title {font-family: ‘FONT NAME’;} should be the same as the font name in @font-face { font-family: ‘FONT NAME’; ...

      Reply
  25. kim on

    So I did the CSS as it said. and took the code from google font and plugged in under in the edit html and nothing. they aren’t showing up in my options of fonts in template. do i need to plug in something on each of my posts??

    Reply
    • Ellie M on

      Hello. It won’t show in your font options in Template Designer or on fonts. You have to manually change the element (header title, content text, post title, etc) that you want the font to be used for as shown in step 6, you’ve just added the property font-family but not attached it to a selector/element.

      Reply
    • Ellie M on

      Hello, firstly I cannot see the code. Paste it into the box here and click encode, then paste the results in the comment box. Usually means that it’s been place in the wrong part of some code has been deleted however could also mean that may be an issue with your template, perhaps something else you tried to instal? Find the section quoted and look for an error in code.

      Reply
  26. jennifer on

    Hi there,

    I have been using your code (Thank you by the way!) by the dropbox way. Everything is working fine I assume, although the post header seems to be extremely small. Is there any way I can change this to make it larger?

    Many thanks, jenny.

    Reply
    • Ellie M on

      Hello, you should be able to change the font size of the post title in Template > Customise. If not, you can manually change it by finding .post h3 in Template > Edit HTML and above </b:skin>

      Reply
  27. matt on

    Hi there. I’ve been following your guide and for some reason I just can’t get this to work. This is my code at the moment… If you could shed any light on why its just coming up as text at the top of my blog every time i save and preview it, that’d be great.

    @font-face {
    font-family: 'sf_comic_script_outlineRg';
    src: url('https://dl.dropboxusercontent.com/u/75322522/sf_comic_script_outline-webfont.eot');
    src: url('https://dl.dropboxusercontent.com/u/75322522/sf_comic_script_outline-webfont.eot?#iefix') format('embedded-opentype'),
    url('https://dl.dropboxusercontent.com/u/75322522/sf_comic_script_outline-webfont.woff') format('woff'),
    url('https://dl.dropboxusercontent.com/u/75322522/sf_comic_script_outline-webfont.ttf') format('truetype'),
    url('https://dl.dropboxusercontent.com/u/75322522/sf_comic_script_outline-webfont.svg#sf_comic_script_outlineRg') format('svg');
    font-weight: normal;
    font-style: normal;
    }
    <b:skin><![CDATA[

    Thanks for taking the time to look at this 🙂

    Reply
    • Ellie M on

      Hello Matt. You’re adding the code in your header above <b:skin> and not in your CSS which is above </b:skin> that’s why it’s appearing as text on your blog.

      Reply
  28. melissa on

    I am having trouble with this one. I want my blog post titles to be in the Emily Lime font bombshell that I purchased. Am I not doing the coding right? HELP!!!

    @font-face {font-family: ‘bombshell_proregular’;
    src: url(‘ https://dl.dropboxusercontent.com/u/127816015/emily_lime_-_bombshellpro-webfont.eot‘);
    src: url(‘ https://dl.dropboxusercontent.com/u/127816015/emily_lime_-_bombshellpro-webfont.eot?#iefix‘)
    format(’embedded-opentype’),
    url(‘ https://dl.dropboxusercontent.com/u/127816015/emily_lime_-_bombshellpro-webfont.woff‘) format(‘woff’),
    url(‘ https://dl.dropboxusercontent.com/u/127816015/emily_lime_-_bombshellpro-webfont.ttf‘) format(‘truetype’),
    url(‘ https://dl.dropboxusercontent.com/u/127816015/emily_lime_-_bombshellpro-webfont.svg#bombshell_proregular‘) format(‘svg’);
    font-weight: normal;
    font-style: normal;

    Reply
  29. nik on

    Hello

    Thank you for posting this btw, it has helped a lot. But I’m really confused on the CSS part? I have managed to change the post title but I have no idea on how to change the text on my posts to be the same as the title 🙁

    Reply
    • Ellie M on

      Hello! To change the font of your post content go to Template > Edit HTML and find .post-body in your css section (between <b:skin> and </b:skin>). Add font-family: 'Quicksand'; between the brackets.

      Reply
  30. Ken on

    er hey i couldn’t get this to work in my blogger, could you help to see if i did anything wrong? i want the font to appear in my blog post body. here’s the code

    @font-face {
    font-family: ‘sketchetik-light-webfont’;
    src: url(‘https://dl.dropboxusercontent.com/u/264143467/sketchetik-light-webfont.eot’);
    src: url(‘https://dl.dropboxusercontent.com/u/264143467/sketchetik-light-webfont.eot?#iefix’) format(’embedded-opentype’),
    url(‘https://dl.dropboxusercontent.com/u/264143467/sketchetik-light-webfont.woff’) format(‘woff’),
    url(‘
    https://dl.dropboxusercontent.com/u/264143467/sketchetik-light-webfont.ttf‘) format(‘truetype’),
    url(‘https://dl.dropboxusercontent.com/u/264143467/sketchetik-light-webfont.svg’) format(‘svg’);
    font-weight: normal;
    font-style: normal;

    }
    {h3.post-title {font-family: ‘sketchetik-light-webfont’!important;;}

    ]]>

    somehow it just doesn’t do anything, any form of help is appreciated, thanks 🙂

    Reply
  31. Sample Hime on

    Weee thank you so much!!! Just a tip for some people who may not be able to figure out why it’s not working…where it says ‘FONTNAME’ in the CCS file shown below is the exact wording you need to use

    font-family: ‘FONTNAME’;

    For instance, my font was “amperzand” but the CCS file named it “amperzandregular” and so I had to make sure to write “amperzandregular” or it wouldn’t work at all.

    Thank you again!!!

    Reply
  32. Jessica Bartholomew on

    Hello so I had downloaded the Web version of the font of ‘Bombshell Pro’ from MyFonts.com. I followed the directions. This code was unsuccessful and didn’t make a change to the appearance of the title. Is there anything I could change?

    Thanks so much for your help. 🙂

    Jessica

    Reply
    • Ellie M on

      Hello! You’re blog doesn’t currently have the code or a sample blog post so I can’t check your template for any issues or coding conflicts. At the moment you’re missing the close bracket for the last piece in your css .mobile .tabs-inner .PageList .widget-content .pagelist-arrow { border-left: 1px solid #dddddd; and and extra bracket after the blog title in your template. If you redo the tutorial I can take another look for you.

      Reply
  33. Zakkiya Hamza on

    Hi Ellie. Thanks you for this tutorial.I want to use century gothic font for my blog and I see that google web fonts don’t have it and I am not able to convert it as well. Is there any other way I can add this font to my blog?

    Reply
  34. J on

    Hi Ellie!

    Thank you so very much for such a thorough tutorial!

    I’m a bit stuck, I thought I had followed your instructions to a “T” but it looks as though I may have missed something (it’s probably obvious or small). Here’s the site where I have added the custom font.

    Here’s the code:

    @font-face {
    font-family: 'failregular';
    src: url('https://dl.dropboxusercontent.com/u/271604577/Glittered%20Barn%20Fonts/fail____-webfont.eot');
    src: url('https://dl.dropboxusercontent.com/u/271604577/Glittered%20Barn%20Fonts/fail____-webfont.eot?#iefix')
    format('embedded-opentype'),
    url('https://dl.dropboxusercontent.com/u/271604577/Glittered%20Barn%20Fonts/fail____-webfont.woff')
    format('woff'),
    url('https://dl.dropboxusercontent.com/u/271604577/Glittered%20Barn%20Fonts/fail____-webfont.ttf')
    format('truetype'),
    url('https://dl.dropboxusercontent.com/u/271604577/Glittered%20Barn%20Fonts/fail____-webfont.svg#failregular')
    format('svg');
    font-weight: normal;
    font-style: normal;
    }

    h3.post-title, .comments h4 {
    font: 'failregular' !important;
    margin: .75em 0 0;
    }

    .mobile h3.post-title {
    font: 'failregular' !important;
    margin: 0;
    }

    Thanks kindly for your help.
    J.

    Reply
  35. Andreas on

    ive tried about everything almost to perfection but it still doesnt show up
    this is my code

    font-face {
    font-family: ‘entropyregular’;
    src: url(https://dl.dropboxusercontent.com/u/30519318/entropy_-webfont.eot);
    src: url(https://dl.dropboxusercontent.com/u/30519318/entropy_-webfont.eot) format(’embedded-opentype’),
    url(https://dl.dropboxusercontent.com/u/30519318/entropy_-webfont.woff) format(‘woff’),
    url(https://dl.dropboxusercontent.com/u/30519318/entropy_-webfont.ttf) format(‘truetype’),
    url(https://dl.dropboxusercontent.com/u/30519318/entropy_-webfont.svg) format(‘svg’);
    font-weight: normal;
    font-style: normal;
    }

    .header h1 {font-family: ‘entropyregular’ !important;}

    ]]>

    Reply
    • Ellie M on

      Hello, you’re missing the @ before font-face and you’re using a custom template so you’re blog title is .blogname h1 not .header h1. Hope this helps 🙂

      Reply
  36. Mavis on

    Hi Ellie! I’m starting a blog and I’m really lost on how to change my widget fonts 🙁 I really really need some help 🙁 Could you email me so I can show you my blog and where I can change the codes? I’d really appreciate it 🙂 Thanks!! 🙂

    Mav.

    Reply
    • Ellie M on

      Hello, instead of using h3.post-title {font-family: 'FONTNAME';} from above you can use h2 {font-family: 'FONTNAME';} and that should work for changing your widget titles.

      Reply
  37. Rebecca on

    Hi Ellie,

    I want to make the font in an HTML widget have a specific font. I only want it for the widget. I tried adding the following css to my code

    #HTML1{ font-family: ‘Josefin Sans’, Arial, sans-serif; padding: 100px; font-size: 14px; }

    and it did change the font in my sidebar widget but forced it into a single column like so:

    W
    O
    R
    K
    S
    H
    O
    P

    So I deleted it. Now it is Arial still.

    Are you able to tell me what I did wrong and the possible remedy? Thank you!

    Reply
    • Ellie M on

      Hello, the problem is you’re padding is too high it’s creating 100px of space around your sidebar which isn’t leaving much space in the centre for your text so it’s being forced to appear within a small space. Hope this helps!

      Reply
  38. Ella B on

    I can’t find the ]]> thingy in blogger! I did cmd+F in the ‘Edit HTML’ part of ‘Template’, but it’s not there!

    Reply
  39. Erin on

    Wow! I am speechless. I have been trying to figure this out for forever and your tutorial finally made it click for me!! Thanks a lot!!!! By the way I am a bit addicted to your blogging tutorials…they are lifesavers!
    Thanks!

    Reply
  40. Ridhwan on

    It doesn’t work for me. Please help me, this is my code… Thanks

    @font-face {
    font-family: ‘BurbankBigCondensedBlack’;
    src: url(‘https://dl.dropboxusercontent.com/u/256922543/burbankbigcondensed-black.eot’);
    src: url(‘https://dl.dropboxusercontent.com/u/256922543/burbankbigcondensed-black.eot?#iefix’) format(’embedded-opentype’),
    url(‘https://dl.dropboxusercontent.com/u/256922543/burbankbigcondensed-black.woff’) format(‘woff’),
    url(‘https://dl.dropboxusercontent.com/u/256922543/burbankbigcondensed-black.ttf’) format(‘truetype’),
    url(‘https://dl.dropboxusercontent.com/u/256922543/burbankbigcondensed-black.svg#BurbankBigCondensedBlack’) format(‘svg’);
    font-weight: normal;
    font-style: normal;
    }

    h3{font-family: ‘BurbankBigCondensedBlack’;}

    Reply
    • Ellie M on

      Hello. Find @font-face in your CSS, after each link you added remove the space before ; and ,. Replace #frenchyregularr in the last link with whats provided in the CSS file in the webkit you downloaded in step 2.

      Reply
  41. Elodie crenon on

    hI eLLIE,

    THANK YOU SO MUCH FOR ALL THE USEFUL ADVICE, I CANNOT BELIEVE HOW MANY THINGS I WAS ABLE TO DO change on MY blog THANKS TO YOUR ADVICE. I AM TRYING to change the font of my blogname and it does not seem to work. could you take a look a the code ? Thank you sooo much in advance.
    Many thanks from france.

    @font-face {

    font-family: ‘waltographregular’;

    src: url(‘https://dl.dropboxusercontent.com/u/110571243/waltograph42-webfont.eot’);

    src: url(‘https://dl.dropboxusercontent.com/u/110571243/waltograph42-webfont.eot?#iefix’)

    format(’embedded-opentype’),

    url(‘https://dl.dropboxusercontent.com/u/110571243/waltograph42-webfont.woff’) format(‘woff’),

    url(‘https://dl.dropboxusercontent.com/u/110571243/waltograph42-webfont.ttf’) format(‘truetype’),

    url(‘https://dl.dropboxusercontent.com/u/110571243/waltograph42-webfont.svg#waltographregular’) format(‘svg’);

    font-weight: normal;
    font-style: normal;

    }

    .blogname h1{font-family: ‘waltographregular’;}

    ]]>

    Reply
  42. Nenya on

    Thank you for your tutorial. 🙂
    the most importatnt question for me is: does this tutorial work for english fonts only or not? I mean – i would like to add a font which contents for example ‘ř’ ‘á’ ‘ť’ or ‘č’, but it does not seem to work…

    Reply
    • Ellie M on

      I’ve never tried but it works for Dingbats and other random fonts so I presume it does. What’s your URL and I’ll double check your code for you to make sure it’s correct?

      Reply
      • Nenya on

        I think there is a problem with converting the chosen font at FontSquirrel. I downloaded Scriptina at http://www.ceskefonty.cz/ceske-fonty/scriptina and then converted it without changing anything (like format, rendering and other things I do not even understand :D). Then I downloaded my kit and opened the file but letters like ‘ř’ ‘á’ etc. are already broken. Maybe FS doeas nto support these letters?

        Reply
  43. Gen on

    Well, I thought I had finally figured out why the Dropbox method wasn’t working for me, and in a way I have… the public folder. I don’t have one (must’ve deleted it at some point since I’ve had my dropbox for years), and I can’t create one because I don’t have a Pro account. So I’m back to square one.
    Nonetheless, thanks for the great tutorial and the support you give to others who are struggling to make it work. At least I found out about Google Fonts and got a few fonts that would work for my design. Just missing the social media font, guess I’ll just make some image icons now.
    Will be looking through your site now to find more useful tutorials! Thanks!

    Reply
    • Ellie M on

      Hello, Public folders have just been changed to only be for business or pro accounts and normal folders can now be shared. Therefore you no longer need to have a public folder for this tutorial. Add the fonts to any folder on your Dropbox and click Share Link > Get link. I’ve updated the steps above if you want to add a custom font. Also have this tutorial for creating social media icons if you’re interested 🙂

      Reply
  44. FatouSkii on

    Hello. I did everything correct but when I preview the template, it’s not the font I want. It’s like it changed it to a default font. Did I do something wrong? This is what it looks like in my Template:

    font-family: ‘cac_champagneregular’;
    src: url(‘https://www.dropbox.com/s/glew4ur5o3kds57/cac_champagne-webfont.eot’);
    src: url(‘https://www.dropbox.com/s/glew4ur5o3kds57/cac_champagne-webfont.eot?#iefix’) format(’embedded-opentype’),
    url(‘https://www.dropbox.com/s/0m7rgn9vqdklr1x/cac_champagne-webfont.woff) format(‘woff’),
    url(‘https://www.dropbox.com/s/cwq6l706jk6qcsb/cac_champagne-webfont.ttf’) format(‘truetype’),
    url(‘https://www.dropbox.com/s/r60rqmb7ryybx4w/cac_champagne-webfont.svg#cac_champagneregular’) format(‘svg’);
    font-weight: normal;
    font-style: normal;
    }
    ]]>

    Reply
  45. Lynn on

    Hey Ellie,

    I’ve read through all of the comments, hoping to figure it out through someone else’s solution, but I’m still stuck. Here’s the code that I’ve posted, but I think it might be a problem from somewhere else in the code? I’d appreciate your help when you’ve got time.

    @font-face { font-family: 'alwaysheremedium'; src: url('https://www.dropbox.com/s/dn7dju7zt9o6w0j/alwayshere-webfont.eot'); src: url('https://www.dropbox.com/s/dn7dju7zt9o6w0j/alwayshere-webfont.eot?#iefix') format('embedded-opentype'), url(‘https://www.dropbox.com/s/b70szew8jnwy92m/alwayshere-webfont.woff’) format('woff'), url(‘https://www.dropbox.com/s/ff7g98krk3q1y13/alwayshere-webfont.ttf’) format('truetype'), url(‘https://www.dropbox.com/s/36kt1vbmpdkgdes/alwayshere-webfont.svg#alwaysheremedium') format('svg'); font-weight: normal; font-style: normal;} h3.post-title {font-family: ‘alwaysheremedium’;}

    Thank you!

    Reply
  46. Sarah P. on

    Hi! I’ve always used your blog for blogger tutorials but this time around, I just can’t make it work. I tried reading the comments and even adding the !important; but my font still looks the same. My css looks like this:

    @font-face { font-family: 'commercial_scriptnormal'; src: url('https://www.dropbox.com/s/twpffesuopo8cpl/commersial_script-webfont.eot'); src: url('https://www.dropbox.com/s/twpffesuopo8cpl/commersial_script-webfont.eot?#iefix') format('embedded-opentype'), url('https://www.dropbox.com/s/0pgto58tm776h9f/commersial_script-webfont.woff') format('woff'), url('https://www.dropbox.com/s/txtvsq3nxbui2hn/commersial_script-webfont.ttf') format('truetype'), url('https://www.dropbox.com/s/28yhezz942dblng/commersial_script-webfont.svg#commercial_scriptnormal') format('svg'); font-weight: normal; font-style: normal; } – Do you think the error is from the svg#commercial_scriptnormal, when the links are commersial_script-webfont.eot ???

    I also have this extra — h3.post-title, .comments h4 { font:'commercial_scriptnormal' $(post.title.font); margin: .75em 0 0;}. — Should I delete that or something. I’m not sure. I used to have a customized font in Blogger before but HostWebs made some changes and my post titles just defaulted to a font available on Blogger.

    I am so frustrated. I just want to have my own font. Please help me whenever you’re available. Thank you so much in advance.

    PS. For this code, should I really include the ‘ in the ‘NEW FONT’? I also have this other code:
    <Variable name="post.title.font" description="Font" type="font" default="normal normal 22px commercial_scriptnormal, Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 22px Consolas"/> </Group>

    Reply
    • Ellie M on

      Hello Sarah. For the h3.post-title, .comments h4 make sure there’s a comma in between 'commercial_scriptnormal' and $(post.title.font) your other code looks fine, it’s not currently on your blog so I can’t check for errors within your template. It’s not necessary to include it in the last piece of code 🙂

      Reply
  47. Isabel on

    Hi Ellie,
    I did everything in the tutorial, but my post title still doesn’t have the font I installed in html.

    Do you know what’s wrong? Thank you in advance!

    xo,
    Isabel

    Reply
    • Elaine Malone on

      Hello, you’re missing one of the links and there’s an error in the code. Find ]]> </b:skin> and above it you’ll see an error with the quotes around freeway_gothicmedium

      Reply
  48. Anam Shaikh on

    Hi,

    I’ve changed the font for my blog posts title, but it is not showing to others. It is only visible for those who have that font is installed in their computer. It is showing default font to everyone instead of custom font.

    Do let me know how can my custome font will be visible for everyone?

    Thanks!

    Reply
    • Elaine M on

      If it’s showing to you when you have the font on your device and not on other computers then the font isn’t properly embeded / adding to your blog. Double check that the URLs are grabbing the font files and loading the font properly.

      Reply
      • Joana on

        The fonts code is further up in the template, which is why you didn’t see it right before ]]>
        If I put the code in step 6, it still makes no effect.

        But here’s almost the whole template

        *CODE REMOVED*

        Reply
        • Elaine Malone on

          Are you using a test blog as this is not the code I’m seeing on your site? Plus I don’t see any fonts installed apart from Josefin Sans using the link method which is working for your header. CSS is read from top to bottom so the font declaration need to come after the font face instal.

          Reply
          • Joana on

            Hey,

            Nevermind. I’ve managed to do this using Google fonts. I couldn’t find one of them before, which is why I went with custom fonts, but now they have it 🙂

            Thanks !

  49. Pearl on

    Hi Ellie!

    I managed to put up the custom google font, however, my “connect with me” and “blog archive” will just not change. I’ve tried fiddling around with the html but I simply can’t find out where to change it. Thanks in advance.

    Reply
  50. Melinda on

    Hi Ellie,
    I did what your tutorial said to do. But it’s just not working. It keeps showing the default font. This is really frustrating me.
    @font-face {
    font-family: 'soymilkregular';
    src: url('https://www.dropbox.com/sm/create/denne-soymilk-webfont.eot');
    src: url('https://www.dropbox.com/sm/create/denne-soymilk-webfont.eot?#iefix') format('embedded-opentype'),
    url('https://www.dropbox.com/sm/create/denne-soymilk-webfont.woff') format('woff'),
    url('https://www.dropbox.com/sm/create/denne-soymilk-webfont.ttf') format('truetype'),
    url('https://www.dropbox.com/sm/create/denne-soymilk-webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;
    }

    h3.post-title {font-family: 'soymilkregular'; font-size:22px !important;}

    .date-header {font-family: 'soymilkregular'; font-size:28px !important;}

    Reply
    • Elaine M on

      Hello. You can wrap the text you want in the custom font in the following code <span class="special"> TEXT HERE </span>. Add .special {font-family: FONTNAME; } to your CSS.

      Reply
  51. Alex on

    how can I just make it apply to the whole blog? I can’t understand step 6 onwards. I don’t want to just have the comments changed, I got all the way through the tutorial and was like “well, fuck” because I have no idea how many elements are in the page or how the hell to change each one individually.
    Do you know how I can just pay someone else to do this? Every time I try to use elance they are incompetent, and the site looks exactly the same as it did before, and then they charge me. Very frustrating.

    Reply
  52. Gretel MArksteiner on

    hej,

    I know you have a lot on your plate, but I have managed to implement a lot of your tips and tricks on the blog and have been trying to figure this one out for hours but cant seem to manage. I have done the steps but the it doesnt change the font, and if it does it turns it to Times New Roman. Could you take a quick look if you have the time?

    thanks

    Reply
  53. Valter Cardoso on

    Dropbox seems not to be using Public link (only share). Is there a way to go around it please? Maybe a different package like Google Drive or just change the permission to have that public link again in Dropbox. Thanks

    Reply
    • Elaine M on

      Hello, Dropbox changed the way they share links and removed the public folder option. See step 3 above, you now need a Pro account or to use a different hosting method.

      Reply
  54. Kian on

    Hello,

    I have done everything as you had instructed. Added the css to my html editor. But it doesn’t show up when I assign the font to some part of the blog. I guess it may have something to do with the language of my blog which is Persian. For instance, the popular posts font is Tahoma right now, but I cannot change it to irnazaninregular. I have followed everything carefully as you had instructed.
    I appreciate any assistance.

    Reply
  55. Timothy on

    I’m not sure if you’re still reading these comments but I’ve been struggling for a few hours. I was wondering if you might be able to help me out. Despite following all your steps, my code’s not working.

    Here’s my code:
    @font-face {
    font-family: ‘chinese_rocks_rgregular’;
    src: url(‘https://www.dropbox.com/s/b431ibk7jkt1kq0/chinese_rocks_rg-webfont.eot?dl=0’);
    src: url(‘https://www.dropbox.com/s/b431ibk7jkt1kq0/chinese_rocks_rg-webfont.eot?dl=0#iefix’) format(’embedded-opentype’),
    url(‘https://www.dropbox.com/s/9lb6s2so1ijw38n/chinese_rocks_rg-webfont.woff2?dl=0’) format(‘woff2’),
    url(‘https://www.dropbox.com/s/fcm7r92utduvmxc/chinese_rocks_rg-webfont.woff?dl=0’) format(‘woff’),
    url(‘https://www.dropbox.com/s/u5ndpobr4wy15jd/chinese_rocks_rg-webfont.ttf?dl=0’) format(‘truetype’),
    url(‘https://www.dropbox.com/s/amwptkj63l1r017/chinese_rocks_rg-webfont.svg?dl=0#chinese_rocks_rgregular’) format(‘svg’);
    font-weight: normal;
    font-style: normal;
    }

    h3.post-title {font-family: ‘chinese_rocks_rgregular’;}

    }]]>

    My Dropbox account is old enough that it already had a Public Folder and all the links work fine. I bought the license to the font, I was careful to copy-replace only the parts I need, I even tested the CSS by centering the post titles and that worked fine first try. I would really appreciate any help you could provide – I’ve been pulling my hair out all afternoon.

    Thanks!

    Reply
    • Elaine Malone on

      Hi Timothy, you’re using shared dropbox links, not the public URL. The links should look like https://dl.dropboxusercontent.com/u/000000/.... Also, double check your quote marks. I’m not sure if it’s just how it’s appeared in the comment but they need to be replaced with standard 'like this' instead of ‘like this’.

      Reply
    • Elaine Malone on

      Hi Kamal. In order to do this on Google Drive, Dropbox and similar you need the direct URL to the file. You used to be able to use the hosting view URL (https://googledrive.com/host/id=FILE_ID), replacing FILE_ID with the ID found in the sharable link. Google stopped allowing this at the end of last year.

      The following modified URLs seem to work at the moment but they may stop it in the future also. The URLs you can try is https://drive.google.com/uc?id=FILE_ID and https://drive.google.com/uc?export=download&id=FILE_ID, again replacing FILE_ID with the ID found in the sharable link.

      Reply
  56. Melissa Clancy on

    This is a great post on adding Google fonts. I have a questions and I hope you can answer it. I added Google fonts to my blog/ htlm and css for Quicksand (font for the blog posts) and playwright for the headings. I successfully got it to be the default font. The problem began when my co-blogger had looked at our blog on her computer, a crazy font showed up r (she is listed on the blog). My blog looked beautiful and she had this ugly font. Eventually, i read somewhere on blogger that if I removed the CSS code from my blog it would fix the problem and it did!! YAY ! But now I have kinda ugly fonts on my blog.

    I am willing to go back to the drawing board and try to add the fonts again, but my question is… if you don’t have Quicksand or playwright on your blog will it come up differently? I was under the impression that a Google Font will show up on any site? Next, if Quicksand can show on anyone else blog what would be the code and how would I add the size. Do I add the code to HTLM and CSS ?? I would so appreciate a response. can i also go back and fix all the font on all the post? sorry so long. Melissa

    Reply
    • Elaine Malone on

      Hi Melissa. Once installed correctly the font will show on all devices. If installed incorrectly but font family is added to your templates CSS then the font may show correctly on your computer (if you also have the font installed on your computer) but won’t show properly on all devices. Steps 1-6 under the heading “Adding a Google Web Font to Blogger” will show you how to add it. To change the size you can add font-size: 16px; under the code added in step 6 (font-family: 'FONTNAME';) and change the number to increase/decrease the size.

      Reply
      • Melissa Clancy on

        Elaine,
        I can’t thank you enough for sharing that… i have been trying to figure this out for weeks!! It worked like a charm. Some of the blog post have different fonts and I can’t help but think it has something to do with uploading our blog post from a word document. I write with a few other bloggers and we usually type and edit in word or a google doc… I can see cutting and pasting is impacting the font. If i type right into blogger it has the right font. we often edit outside of blogger how can we do this without impacting the font? any tips on that? also what would the code be to have the top heading one font and the subheadings a different font…thank you so much!! You made my weekend!

        Reply
        • Elaine Malone on

          Hi Melissa. Ah amazing, so glad you got it working. Yes you’re right, using Word, Google Docs and Bloggers editor toolbar will add inline styling which overrides the CSS. I have a post about about properly using Word to draft posts.

          As for changing the font of elements on your blog, it will depend on your template. You’ll need to find the specific class or ID to use. For example, the post title is usually h3.post-title, widget titles are usually div.widget > h2, div.widget h2.title. What heading and subheading are you looking to change?

          Reply
          • Melissa Clancy on

            Elaine,
            The article was so helpful!! Now I know why my fonts keep getting mixed up. I was thinking of a mix of Quicksand and playwright font. I think the Quicksand looks great so I will probably just leave it. Thanks again for all of your extremely helpful tips!!! I am so excited by how my fonts look! Melissa