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.
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 or 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; }
230 responses to “How to add a Google font or custom font to your Blogger or WordPress blog”
Hey! I’ve uploaded the fonts to dropbox but not sure how to find the public URLs. Unless I’ve uploaded the wrong version of the font!
Laura
If you click file, you will be able to click copy public URL 🙂 x
Argh .. I don’t understand why this does not work…….
Font change, but do not be Handlee. ****.. This would have made the perfect blog. 🙁
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?
ive tried to do this, but at the top of my blog you can see the writing.. where did i go wrong!
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>
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’;}
}
]]>
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>
I gotcha! Thanks for your help! You are awesome!
No problem lovely 🙂 xx
how do i unzip the font before upload to dropbox?
laura
If you right click on the folder, you should be able to unzip the folder or “extract” the files 🙂 xx
Is there a way to do this for the sidebar titles?
Thank you! Great code!
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 h2depending on your template and then change the font name in{font-family: 'FONTNAME';}to your own. Hope this helps 🙂 xxI can’t find b:skin in my html?
Are you on Blogger? This post should help – http://xomisse.com/understanding-css-in-blogger/ xx
That site helped a lot! Thanks!
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!
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!importantlike thish3.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 xxHi 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!
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
bodyin 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 xxHi 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’;}
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 bepassion-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 haveh3.post-titlein 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! importantlike thish3.post-title {font-family: ‘passionmedium’ !important;}. Hope this helps xhello!
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!
The code for the tabs menu should be
.tabs-inner .widget li ahope that helps xHi
How do I change the font size?
This was very helpful by the way.
Thanks 🙂
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 titleh3.post-title { font-size: 12px; }Hope that helps x
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;}
]]>
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 xHi! 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
Hello, you need to make sure to click copy public URL on Dropbox, the link will look like https://dl.dropboxusercontent.com/u/XXXXXXXXX/FONTNAME.xxx rather than https://www.dropbox.com/s/XXXXXXXXXXXXXXX/FONTNAME.xxx
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!! 🙂
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 🙂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!
Hello. Find
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,and under the code for padding etc, make sure to close the tag using.BlogList .item-thumbnail img {
}. 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 forh3.post-title, .comments h4in your HTML and add‘jenna_sueregular’to font.thank you so much!
great tutorial!
x
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!
Hello. Find
.post-title a:hover { color: #ffea47in 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.It worked! Thank you so much- I really appreciate it!!
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’;}
]]>
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.
I don’t know what went wrong, so could you please help me?
I’m trying to use this for my Blog Title font.. I have added the font code, but cannot figure out how to actually change the blog title font. Can you help me! 🙁
Hello 🙂 adding the following code to Template > Customise > Advanced > Add CSS should work –
.header h1 { font-family: 'FONTNAME'; }I tried that, and it changed the font, just not the the correct font. Do I include the dash? I’m sorry I am really bad at code.
The font is called Satisfy yes? Try
.header h1 {font-family: 'Satisfy' !important; }.Yes, that’s the one! I entered the new code you gave, and am still running into the same issue.
This is the exact font code it gives me, on google web fonts: “font-family: ‘Satisfy’, cursive;”.
I have tried entering it in, but it doesn’t change it to the correct font. 🙁 Perhaps I just need to choose a different font? I greatly appreciate your help, you are so sweet to help! Thank you!!!!
Ah okay, go to Template > Edit HTML > Click Format Template, then click into the editor and press CTRL F. Search for
.Header h1and you will see the following code.Header h1 { font: normal normal 111px Pacifico; color: #b4e0f8; text-shadow: 0 0 0 rgba(0, 0, 0, .2); }, add‘Satisfy’, cursive,beforePacificoOkay, clearing the cache fixed the problem.. now the only issue I am having is that it is cutting part of the “L” off.
Find
.header-inner .Header #header-inner {and changeoverflow: hidden;tooverflow: visible;Thank you for your help!! Everything is all fixed, I really appreciate your help!!!!! :))))
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! 🙂
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 beforeh3.post-titlethere should be a closed bracket}. This could be why it isn’t working xThank 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.
Hello Lucy. What area did you want to change? On the last line, did you replace
FONTNAMEwith your fonts name?It’s alright! I worked it out! Thanks for all the info on this blog – it’s a great help. : )
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’;}
]]>
Hi lovely, you’ve since changed your code so can’t take a look. Have you got this issue sorted? x
Hai can u pls help me How to add this Font on my blog
http://www.manoramaonline.com/mmfont/Manorama.ttf
pls Help me
Download the font, then follow the steps under “adding a font that isn’t on google web fonts” to add it to your blog.
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!
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!thanks a lot, it works. Now I have my blog title pimped with custom font. 😀
Is there a way of doing this for block quote, Ms. Ellie ?
Hello Nadiyah, yes go to Template > Edit HTML > add add
.tr_bq { }before</b:skin>, then add the css for font-family between the brackets.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….
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>. Thenh3.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.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
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>
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
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.
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….
No problem 🙂 Make sure to close the curly bracket (
}) just afterfont-style: normal;and beforeh3.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 addingbody {font-family: 'new_yorkerregular';}– just like you did forh3.post-title {font-family: 'new_yorkerregular';}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
Hello, for
font-family “learning_curve_proregular” (tabs.font);under.tabs-inner .widget li a {it should bedisplay: inline-block;
font-family: “learning_curve_proregular”;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.
Awh that’s a fab idea! Really helps to personalise your blog too. Glad I could help 🙂
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!
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';}– it could beh3.post-title { font-size: 34px; }
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 🙂
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’;}
]]>
Hello Sarah, the font name needs to be written the same way as in the @font-face code so it’s
'impact_labelregular'instead ofImpactlabelregular’. You could also try adding!importantto over-ride previous code so it looks like.date-header {font-family: ‘impact_labelregular’ !important;}or finding the existing.date-headerin 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.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;}
There’s an error with Dropbox, if you open the link it should download but it says it can’t find the file which is why Blogger can’t get it either.
Well dang. Is there any way to fix that?
If you want to email your login details for Dropbox to *****@xomisse[dot]com, I can have a look for you. I can’t see why it’s an error from here.
Thank you so much! I have been working on changing the font on my blog all week and your website is the one that finally made it “click” for me!!
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’;}
Hello Kelly. Your font names should only have one filetype like
Floralia.eotnotFloralia.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 behttps://dl.dropboxusercontent.com/u/189900200/Floralia.eotfor example. That’s why Blogger can’t grab your font 🙂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. 🙁
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 🙂
@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 !
Yeah that looks perfect 🙂 let me know how it goes x
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 !
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.Hi I am trying to follow your method 1 but I can’t seem to do it correctly. I am a beginner so your help will be ultimately appreciated 🙂
Thanks so much!
Hello, which part are you having trouble with?
Hi Ellie,
I am sorry but I don’t know which part I’m having trouble with. I am following your method 1. 🙂
Okay, have you chosen which font you want?
yes I already did.
What’s it called?
the font is “the girl next door”
Okay so login to Blogger, go to Template > Edit HTML. Click in the HTML editor on the first line and then press CTRL F on your keyboard (or CMD F on a mac). A little search box will appear, type
headand hit enter. Search for<head>and right below it paste<link href='http://fonts.googleapis.com/css?family=The+Girl+Next+Door' rel='stylesheet' type='text/css' />and click save.Now click Format Template and press CTRL F again, this time search for
/b:skinand you’ll find]]> </b:skin>. Above this code pasteh3.post-title {font-family: 'The Girl Next Door', cursive;}and save. Then you’re blog post titles should be in your new font 🙂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!
Above your first @font-face, you have an extra bracket that could be causing problems. Also find
h3.post-title, .comments h4and remove<strong> ... </strong>from the css for font 🙂Wow how did I miss that?! You’re the best!
lol thank you lovely 🙂 you’d be surprised how many times the problem is a missing or an extra character!
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?
Once you click save, it may take a few minutes. You’ll see the button change to say “saving” and then back to “save” once it’s done.
I did it already but still the message pops in and I noticed that the code has changed from this after i saved it…
h3.post-title {font-family: 'The Girl Next Door', cursive;}
Add ****@gmail.com to Permissions under Settings in Blogger and I will take a look for you 🙂
Thank you so much for this tutorial.
Hey! Thanks so much for this tutorial. So easy to follow and it worked for me the first time! 🙂
xx
Awh perfect 🙂 happy to help! Fab blog, love your style
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?
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_downregularbut you have it askgyouwontbringmedown-webfonton your blog. Everything (code, file names, urls) need to be the same, otherwise it won’t properly instal.I think I did. I did the webkit, extracted it, and then put the files into drop box, and all the file names match the ones in drop box.
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
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’; ...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??
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-familybut not attached it to a selector/element.I have a custom cursor on my blog, and the code also goes under “head”, so where do I put the font?
You can put it above or below the code for a custom custom 🙂
It says:
Error parsing XML, line 5, column 307: The entity “subset” was referenced, but not declared.
I put this code in it:
What am I doing wrong?
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.
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.
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 h3in Template > Edit HTML and above</b:skin>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 🙂
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.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;
Is that the entire code you used? There’s no close bracket and you didn’t attach the font to any element. To add it to your post titles you need to also add
h3.post-title { font-family: ‘bombshell_proregular';}. The links to Dropbox are returning a 404 not found error which means the font won’t be installed on your blog.These are the only files I see in my dropbox.
https://dl.dropboxusercontent.com/u/127816015/emily_lime_-_bombshellpro-webfont.eot
https://dl.dropboxusercontent.com/u/127816015/emily_lime_-_bombshellpro-webfont.svg
https://dl.dropboxusercontent.com/u/127816015/emily_lime_-_bombshellpro-webfont.ttf
https://dl.dropboxusercontent.com/u/127816015/emily_lime_-_bombshellpro-webfont.woff
I don’t see the open embedded one that is on the css file. Am I missing something here?
The links to Dropbox are now working correctly. They are the only 4 you need – eot gets used twice.
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 🙁
Hello! To change the font of your post content go to Template > Edit HTML and find
.post-bodyin your css section (between<b:skin>and</b:skin>). Addfont-family: 'Quicksand';between the brackets.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 🙂
Remove the bracket in front of
h3.post-titleand remove one of the;at the end. Shown in pink –{font-family: ‘sketchetik-light-webfont’!important;;}still not working lol, literally nothing is happening to it 🙁
What’s your URL?
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!!!
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
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.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?
Hello! You can get the web-font version here and then use the second method shown above “adding a font that isn’t on google web fonts”.
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.
Hello, change
fonttofont-familywithin the brackets ofh3.post-title, .comments h4and.mobile h3.post-titleThank you so much!
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;}
]]>
Hello, you’re missing the
@beforefont-faceand you’re using a custom template so you’re blog title is.blogname h1not.header h1. Hope this helps 🙂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.
Hello, instead of using
h3.post-title {font-family: 'FONTNAME';}from above you can useh2 {font-family: 'FONTNAME';}and that should work for changing your widget titles.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!
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!
I can’t find the ]]> thingy in blogger! I did cmd+F in the ‘Edit HTML’ part of ‘Template’, but it’s not there!
It’s definitely there, check out this post for help.
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!
Awh thank you 🙂
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’;}
The links to Dropbox are empty, double check that the URLs are correct.
Hello i followed the steps and repeated I tried everything but is not working for me 🙁
thank you for the tutorial ♥
Hello. Find
@font-facein your CSS, after each link you added remove the space before;and,. Replace#frenchyregularrin the last link with whats provided in the CSS file in the webkit you downloaded in step 2.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’;}
]]>
Hello, thank you! You’ve got a custom template so instead of
.blogname h1you need to use.site-titleamazing ! Thank you so much 🙂
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…
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?
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?
Hello, just tested it and it’s working fine. You have to open the .css file in a text editor like TextEdit, TextWrangler, SimpleText, TextPad or even NotePad. Otherwise it will appear broken.
Yay! I tried it again and it is ok now. Thank you so much. 🙂
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!
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 🙂
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;
}
]]>
Hello, whats your URL?
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!
Hello, I can’t get onto your blog to check your template. Have you moved it?
Ahh sorry, I changed the url for the setup phase and put the wrong one. I’ve changed it, but the correct address is http://sweetmelissasdemo.blogspot.com/
Ah okay, there’s an error in your CSS. Blogger is interpreting some of your font code incorrectly, Find
h3.post-title {font-family: ‘ alwaysheremedium ’;}and edit it manually to lookh3.post-title {font-family: 'alwaysheremedium';}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>Hello Sarah. For the
h3.post-title, .comments h4make 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 🙂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
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 aroundfreeway_gothicmediumHi Ellie, I’m really struggling with this one. Tried numerous times but just cannot get it to work!
Hello, I see a lot of font faces installed in your template but I don’t see them added to any element (step 6)
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!
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.
I’ve tried this but none of the fonts appear. No idea what I’m doing wrong.
Hello, I don’t see the code in your template so I can’t see if something is conflicting. Also in the sample code you give you’re missing step 6 before
]]>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*
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.
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 !
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.
Apply your font to
h2or#BlogArchive1 h2, #LinkList1 h2🙂Thank you, that did the trick!! 🙂
I can’t using public folder because it must upgrade to PRO. Did you hve alternative?
Read the update in step 3
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;}
Hello, I don’t see the code in your template to check for conflicts but your dropbox URLs are incorrect which is probably what is causing the issue for you.
Hi Ellie, I am wanting to add some custom fonts to use within my posts, Like just changing one word, or a sentence within my post. How do I go about doing this? I’m on blogger.
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.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.
If you want the font to be for all text elements apply it to
body { }otherwise you will have to do it separately. I offer design and coding services, here are the details and you can contact me here to discuss it.Hi Elaine! Where should I put the coding to change my main text font?
Hey Julia, it would be
body { ... }for the main body font (used in posts, sidebar text, etc)hi Elane! How would you apply the font quicksand (from google fonts) to my tabs? thx <3
Hello, you can use the
.tabs-inner .widget li aselector 🙂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
could it also be that i dont have the pro account on dropbox?
Yes, see step 3 – you now need a pro Dropbox account.
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
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.
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.
What kind of Dropbox account have you got? This method doesn’t work with a free account anymore as noted in step 3.
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!
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’.Hello, I have been trying to do this for 2 hours now, is it possible for me to use Google Drive instead of Dropbox?
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), replacingFILE_IDwith 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_IDandhttps://drive.google.com/uc?export=download&id=FILE_ID, again replacingFILE_IDwith the ID found in the sharable link.Only wanna input that you have a very decent web site , I love the design it actually stands out.
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
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.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!
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 usuallydiv.widget > h2, div.widget h2.title. What heading and subheading are you looking to change?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
Ok got this to work BUT how do i do it if i want everything (posts and titles and all in one font?
You have to go through the CSS and change the font family for all elements 🙂
Hi Ellie,
I’m currently working on the template for my blog (haven’t started it yet), and somehow I can’t get your code to work… The code before this is closed, and I think I’m using the right links from Dropbox. (Kristi and Dawning of a New Day are both Google fonts I’ve installed and am using as backup for the one that isn’t working.) Could you check and let me know what I did wrong? Thank you:)
Here it is:
@font-face {
font-family: ‘shellaherascriptdemo-webfont’;
src: url(‘https://www.dropbox.com/s/hva7t3iw7f5lu2b/shellaherascriptdemo-webfont.eot’);
src: url(‘https://www.dropbox.com/s/hva7t3iw7f5lu2b/shellaherascriptdemo-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘https://www.dropbox.com/s/lr0vey5z0wt1zhf/shellaherascriptdemo-webfont.woff2’) format(‘woff2’),
url(‘https://www.dropbox.com/s/sm6xnzjtxbg9yu1/shellaherascriptdemo-webfont.woff’) format(‘woff’),
url(‘https://www.dropbox.com/s/7ctvut0fd02bbiy/shellaherascriptdemo-webfont.ttf’) format(‘truetype’),
url(‘https://www.dropbox.com/s/v6mqlgaaxu5r2tv/shellaherascriptdemo-webfont.svg#shellaherascriptdemo-webfontregular’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
h2 {
font-size: 40px;
font-family: ‘shellaherascriptdemo-webfont’, ‘Dawning of a New Day’, ‘Kristi’;
color: #488a99;
}
h3 {
font-size: 30px;
font-family: ‘shellaherascriptdemo-webfont’, ‘Dawning of a New day’, ‘Kristi’;
color: #dbae58;
}
Hi Aimee, the Dropbox links need to start with
dl.dropboxusercontent.com/u/, and a pro account is needed.Hi, i absolutely got tons of value from your post. Please i have 2 quick questions.
1. What is the number of plugins every blogger shouldn’t exceed? I currently have about 18 installed, would you consider that number outrageous. Please could you also check out my site and offer me a
2. Your font is really beautiful. would you suggest plugins that would give me beautiful fonts just like yours?
Finally, would you spare a few seconds to check this site and offer me your candid advice
Hi, i absolutely got tons of value from your post. Please i have 2 quick questions.
1. What is the number of plugins every blogger shouldn’t exceed? I currently have about 18 installed, would you consider that number outrageous. Please could you also check out my site and offer me a
2. Your font is really beautiful. would you suggest plugins that would give me beautiful fonts just like yours?
Finally, would you spare a few seconds to check this site and offer me your candid advice http://www.samozoani.com
Hello! There’s no definite number, it depends on size and the resources they are using. Ensure they’ll all being kept up to date and still being managed by the plugin developer. Google Fonts is an excellent place to find beautiful fonts 🙂
Hi there! The smaller font under each word tells the actual name of the font. The “sparkling” one is called Sweet Pea font and the link is: http://www.dafont.com/sweet-pea.font
The clickable links to all of them are right under the image!
Thanks!