Southern Listeners

Loading
Thanks to Greenlava for this cool gadget. Get yours here

Sunday, May 26, 2013

Google Web Font in Blogger Dynamic View

Before
After
There are about 84 Google Web Fonts that you can readily select from your Template Designer to be used in your Template. On the other hand, there are about 600+ supported web fonts in Google Fonts library - and yes, there's a way to use them in your blog. Here's how:

Note: This method will also work for non-dynamic templates.

Step 1:

Go to Google Fonts and search for the font that you want to use. In my example, I'm going to search for 'Amatic SC'. In your search result, you should see three smaller buttons next to a big blue button that says 'Add to Collection'. You need to click on the middle button (Quick-use).


Step 2:

Now, scroll down to item '3. Add this code to your website', and copy the code shown.


This is what I've got:
<link href='http://fonts.googleapis.com/css?family=Amatic+SC' rel='stylesheet' type='text/css'>
Next, go to your Blogger's Dashboard - Template - Edit HTML - Find for <head> - Paste the code that you've gotten directly below <head>.

Step 3:

Before clicking on 'Save Template', copy and paste '</link>' (without quotes) towards the end of the line that you've just pasted, as such:
<link href='http://fonts.googleapis.com/css?family=Amatic+SC' rel='stylesheet' type='text/css'></link>
You can now hit the 'Save Template' button.


Step 4:

Go back to the Google Font page and copy the CSS bit from '4. Integrate the fonts into your CSS':


Next, paste what you've copied, WITHOUT THE SEMI-COLON ';' AT THE END OF THE LINE into the box below, then click on 'Generate Code'.

Input the line that you've copied here:




Step 5:

Next, depending on what you want to change, copy one of the CSS codes below, and go to Template Designer - Advanced - Add CSS - paste the whole code - Press enter after the last character of the last line } - Apply to Blog.


a) To change Blog title font (Dynamic View)

#header.header .header-bar span.title a h1{
!important;
font-size: default !important;
}

b) To change post title font (Dynamic View)

.article-header h1.title a{
!important;
font-size: default !important;
}

c) To change body text font (Dynamic View)

body{
!important;
font-size: default !important;
}

d) To change link font (Dynamic View)

a, a:visited, a:hover{
!important;
font-size: default !important;
}

e) To change Description font (Dynamic View)

#header .header-bar .title h3{
!important;
font-size: default !important;
}

As usual, I can't possibly list down the code for all the sections here. So, if there's a particular section that you'd like to change and it hasn't been covered already, feel free to leave a comment, and I'll update the list accordingly.

112 comments:

  1. I'm having a problem - I've followed all the steps, and it's made no changes to my blog. In fact, I'm starting to wonder if there is some code in my blog keeping it from making these changes, because I've been running up against this over and over the last two days as I edit HTML or CSS. Everything goes in the right places, saved/applied...and then, nothing is changed. I mean, I'm not great at this stuff, so I'm sure the problem is on my end. Any advice or ideas?

    ReplyDelete
    Replies
    1. Hi Katie,

      You seem to have four blogs. Which one should I be looking at? Also, what font were you using, and which font section were you trying to change?

      Delete
  2. many thanks

    http://lewebmalin.blogspot.com

    ReplyDelete
  3. i wanted to use other fonts than the available in blogger but did not find the technical way this article helped me to insert my favourite fonts in blog.

    ReplyDelete
  4. Thanks! This helped a lot! But how do I make the post title bigger after changing the font? The template designer doesn't seem to make any change at all.

    ReplyDelete
  5. What if the font you want is not listed here either? I want the 'Bebas Neue' font, and even though there are very similar fonts the difference can be seen when the fonts are placed side by side (my header title is this font). And how to I make the post title to appear all caps without having to actually write it with caps when posting?

    Thank you so much in advance! So many of your posts has helped me to tweak my layout just the way I want it!

    ReplyDelete
    Replies
    1. To change the font size, in my code above, change the attribute 'default' to say '30px' (without quotes).

      If the font isn't listed in Google Web Font, I'm afraid there isn't an easy way to apply it to Blogger. I've tried before several times, and I failed most of the times.

      To capitalize your post title, well, there is a trick. But I need to see your template first before suggesting anything constructive. Do you have a link I can look at?

      Delete
    2. My blog is currently under construction, since my layout is not complete yet. Here's a screenshot of the current look: http://i44.tinypic.com/2u94f8l.png. So the only problem left is how to make the title appear all caps.

      I tried changing 'default' to '11px' on the body font, but it doesn't change at all. And the customizing thing doesn't work either. I haven't found a way to change the post font at all, any help here?

      Delete
    3. Sorry for the late reply. Try changing to a number greater than 11px, like significantly greater, say 30px. BTW screenshots are of little use to me, as I need to inspect your site live with my developer tools to see what's going wrong, or to suggest anything constructive. Do you have a dummy blog (that is similar to your real blog) I can look at?

      Delete
  6. I want to change the hyperlink color for just the gadgets, not the posts. Is this possible?

    ReplyDelete
    Replies
    1. It sounds possible, but it depends very much on your template. Let's have a look at your blog, what's your blog's address?

      Delete
  7. Thanks bro for this post, i enjoyed it, waiting for your next post, more grace to you.

    ReplyDelete
  8. Hello my colleague, i love what you have here, thanks for the post, hope to come again and again.

    ReplyDelete
  9. Yoga :
    Please teach me and help me
    My blog : http://cquek.blogspot.com/
    When I click : http://cquek.blogspot.com/2013/06/2013614-beauty-of-beijing.html
    - I want my Logo header to be hidden
    - I want my Blog Title , Date to be hidden
    - I want my Blogger Followers to be hidden
    - I want my colour #333333 grey instead of white
    - Only show my Photos
    Really appreciate if you could help me, I only want my pictures to be seen when I click on the link, and also the colour.
    Thank you ! await for your guidance.

    ReplyDelete
    Replies
    1. Can we bring these discussions to the forum? It'll be easier for me to help your there. Go to Blogger Help Forum and create a discussion there, and let me know its link once it's published.

      Delete
  10. Hi ! Thank you for all your advises !! I wonder if it would be possible to change the font when people write a comment ? I would like to insert a handwriting font when people leave a comment, ... ? Thanks if you have time to answer ! I will check ^^ :)

    ReplyDelete
    Replies
    1. I'm not sure if you're referring to the published comment font, or the font of the comment editor box (where people compose their comment before clicking on 'Publish'). The former can be done, the latter nope.

      I need to know the address of your blog, and the exact font type that you wanna use (I've got no clue what this font is called.. I only know Times New Roman)..

      Delete
  11. Hello. Your website is just AMAZING!

    I have a question about the Flipcards in DV.

    Can you remove the grey frame around each Flipcard?

    Can you switch, so you have text on the front an picture at the back (showing when hovering)?

    THANKS! You are the King of Blogger :)

    ReplyDelete
  12. Can you check my question?

    https://productforums.google.com/forum/#!category-topic/blogger/how-do-i/hJ0sgAjUoB4

    Thanks!

    ReplyDelete
    Replies
    1. Hi Simon,

      Replied you in the forum :)

      Delete
    2. I have a new question, Thanks! (look at the forum)

      Delete
  13. hi
    i have special problem by blogger
    i can access blogger only from https protocol
    i like dynamic view template but this template loaded up to 70% from http protocol from blogger.com and blogblog.com
    i can access blogblog.com but i cant access bloger directly from http
    now dynamic view cant load copmeletly . for example the pages menu loaded in source compeletly but not showen
    or sidebar menu only showen rss feed back !
    i now finding for idea to load all dynamic view template load from external js(java script) & css
    OR change defualt loading template from http protocol to https protocol
    i hope u can help me to do this

    ReplyDelete
    Replies
    1. Sounds like you're over-analyzing things. Protocols are chosen at the server side, not the client - ie, you don't get to choose if you want to choose https, it depends whether or not Blogger wants to provide it, and it is very unlikely.

      That said, the problem you're facing is a common in Dynamic View templates. It happens when your Internet is not fast enough to fetch the contents of your DV blog. Try making your blog a little light - eradicate all the background, pictures, etc. Generally, get rid of anything that is heavy. And use a solid browser, like Google Chrome.

      Delete
  14. Hello, I have been reading your posts and what you're doing is VERY much appriciated.

    Lately I am having trouble sharing my URL on facebook, sudenly thumbnails does NOT or STOPPED appearing on my status on facebook. Is there a CSS code we could put to avoid this? I dont wanna edit URL in every post I do on my blogger. Please help.

    pistolangkaraan.blogspot.com
    piskaraa@gmail(.)com.

    ReplyDelete
    Replies
    1. Hi John,

      This isn't something CSS can fix. Since we're referring to thumbnails appearing in facebook, it sounds to me like this is a problem on Facebook's fetching mechanism (or it could be that something's off at Blogger's side that's failing Facebook's fetching mechanism). Either way, let's bring this discussion to the forum? It'll be easier for me to help your there. Go to Blogger Help Forum and create a discussion there, and let me know its link once it's published.

      Delete
  15. Thank you Yoga! these days you are my "Dynamic Views's" Master ;))

    I don't know if I can ask you here two questions:

    1. If you could see my blog (http://libelulalilashop.blogspot.com.es)

    when you are at INICIO (home page) theres is no problem with header, but when you click on the other pages (secciones, contacto...) you can see a black line crossing the header's image, how can I remove this line?

    2. I've tried your code in order to remove frames, border, shadows from the photos (in the posts), and no one works...why?

    congrats for your web, it's great!

    ReplyDelete
    Replies
    1. Hi Victoria,

      Sorry for the late reply.

      1) Add this to your CSS:

      .viewitem-panel{
      border-top: 0px !important;
      }

      BTW, I could see a lot of repeating lines in your CSS. You might wanna tidy this up right now, while things are still under control. Make sure there's no duplicate for the same piece of code.

      2) Do you have a post link I could look at?

      Delete
  16. hello I've tried this and it isn't working for me? My font just stays the same. My blog is www.beautiful-solutions.co.uk if you have any idea why this is I'd be really grateful :) x

    ReplyDelete
    Replies
    1. Hi Stacey,

      Sorry it took so long. I've seen your blog but I can't quite tell which font you were trying to change (as in the title, body, post title, etc).. And what's the name of the font that you were going after?

      Cheers :)

      Delete
  17. Hi Yoga, thank you very very much

    1) I´ve tried your code, doesn't work :(

    2)http://libelulalilashop.blogspot.com.es/2013/07/colgante-brumas-violetas.html
    But do not know why but for a while, just after write this question to you, there was not the photo frame and shadow (the code worked and now it doesn't)


    - In terms of repetitions of code, I am unable to find them :((, I've looked at the CSS, and after a good dizzy, I left everything exactly the same for fear of making a big mistake

    have a nice day!

    ReplyDelete
    Replies
    1. 1) Could you describe what font you were going for, and which font (as in post, title, body text) you were trying to change?

      2) Kinda lost here. Were you trying to get rid of the shadow and border off your images?

      Delete
  18. Hi! I've asked you a question about my blog before and you were so helpful so thought I'd come back to your blog. So, this seems very simple but it's driving me crazy because I can't figure it out. I want to change the font of my posts. It's set to "crafty girl" now and I want to change it to "Indie Flower." I've tried to change it under template, customize, and post font but it's not working.

    www.laughingmywaytoconfession.blogspot.com

    Thanks for your help!!!

    ReplyDelete
    Replies
    1. Hi ya,

      The steps in the tutorial above should work for you. Follow the steps, and when you come to Step 5, use the code in subsection 'c'.

      Cheers :)

      Delete
  19. Hi,
    Thanks so much for your reply. I followed the steps above exactly (thanks for making it so easy to follow!) but unfortunately, it didn't work. When editing the html and adding in the line where you said to, I get an error once I add the code for link to the end of the line.

    The error reads: Error parsing XML, line 5, column 106: The element type "head" must be terminated by the matching end-tag "head."

    I went ahead and did it without "link" at the end of the line, added in the CSS code but it didn't work. I'm going to delete the line I added in html, for the meantime, in case it screws things up.

    Suggestions? I appreciate your help SO much. Thanks again for your GREAT blog!

    www.laughingmywaytoconfession.blogspot.com

    Jen

    P.S. I wasn't able to put in the >, /, symbols in this message to you without getting an error message (geez! I can't win!) but I did type them in my html and css exactly the way you said to.

    ReplyDelete
    Replies
    1. Hi Jen,

      Try this again, and if you get the same error again, hit CTRL+A on your keyboard (or right click and 'select all'), copy your entire HTML code, and go to www.pastebin.com and paste it there. You'll be given a link, get the link and share it with me.

      I'll have a look and see what's going wrong :)

      Cheers!

      Delete
  20. Hi Yoga,

    I can't thank you enough for taking the time to help me out. :-)
    Ok, so I tried it again and got the same error. I went ahead and copied the HTML into www.pastebin.com

    Here is the link I got:

    http://pastebin.com/YeW6qStD

    So again, I'm trying to change my posts font to "Indie Flower" instead of "Sunshiney."

    Thank you, thank you!! :-)

    Jen




    ReplyDelete
    Replies
    1. Hi Jen,

      This is the line that you've added:

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

      It should be either this:

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

      or this:

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

      Just use one of these two lines to replace the line in your template and then click on Save Template :)

      Delete
  21. Hey Yoga!

    I would like to change the font size of my sidebar items. What's the code for that?

    I tried:
    .sidebar #sidebar
    .sidebar #content

    Always using the attribute:
    font-size: 20px !important;

    But it didn't work in neither cases.
    Can you shed some light for me?

    Thanks !
    Congratulations for the website

    ReplyDelete
    Replies
    1. Hey Cauê,

      Try the following, this should work:

      #sidebar .item .title{
      font-size: 20px !important;
      }

      Cheers :)

      Delete
  22. Hi

    This worked for our blogpost, but on the extra page it is not working can you help.

    ReplyDelete
    Replies
    1. Hi Ambika,

      Sorry for the late reply. Which extra page are you referring to? Do you have a link to it so that I can have a look?

      Delete
  23. Hi there!

    I've applied the new font to everything you've mentioned above (THANK YOU!)

    Now, I'd like to finish off the entire blog by applying the new font to all of the wording that appears after each post ("posted 4 weeks ago by" "location" "labels").

    Thanks for the help thus far :)

    Jen

    ReplyDelete
    Replies
    1. Hi Jen,

      This should do it. Add it to your 'Add CSS' box:

      .article-footer div{
      font-family: 'Josefin Sans', sans-serif !important;
      font-size: default !important;
      }

      Cheers :)

      Delete
  24. Hi!

    I am trying to change my posts' font size, but for some reason they just won't change! I followed this tutorial, but after putting the

    body{
    !important;
    font-size: default !important;
    }

    part, only the font size in the gadget section changed, but the post's font size still stays the same. Hoping you can help!

    www.lacetrails.com

    ReplyDelete
    Replies
    1. Hi Sha,

      Have you tried changing your font-size via Template Designer, by going to Dashboard - Template - Customize - Advanced?

      Cheers :)

      Delete
  25. Hi!

    Thanks for all your advices, they have been very helpful so far
    I'm trying to change the font of the sidebar to Arial but it doesn't seem to work?

    Here is what I've added:
    #sidebar .item .title{
    font-size: 12px !important;
    font-family: 'Arial', serif !important;
    }

    Here is the link to my blog:
    http://over-the-sea-and-far-away.blogspot.com.au

    Thanks for you help

    ReplyDelete
    Replies
    1. Hi Helene,

      Give this a try:


      #sidebar .item .title a{
      font-family: Arial !important;
      }

      Cheers!

      Delete
    2. Thanks ! Just had the opportunity to give it a try and it works perfectly :)

      Also I have another question,
      Is it possible to create sub-menu?

      For example I would like "Melbourne" to be under Australia rather than taking a all button by itself

      Cheers :)

      Delete
    3. Nope, I'm afraid not. There's where the line is drawn - structuring tweaks, a big no in DV templates.

      Delete
  26. This is working great on my blog (prettygloss.blogspot.com) but how can I make the font visible homepage too? I opted to change my post title font and it works fine when you click the post but not on the homepage. On homepage the font doesnt change.

    Sarah

    ReplyDelete
    Replies
    1. It should work on the main page as well. Are you trying to change your main body text or something else in particular?

      Delete
    2. Nopes. I only want to change the post title font. It works great when you click on the post but the font is not visible on the home page. (www.prettygloss.blogspot.com)

      Delete
    3. Hi Sarah,

      This should do the trick:

      .title.entry-title a{
      font-family: 'Clicker Script', cursive !important;
      }

      Cheers :)

      Delete
    4. Hi dear, hope you're doing well.

      Okay - I tried changing the 'body text font' by using this:

      body{
      font-family: 'Snippet', sans-serif; !important;
      font-size: default !important;
      }

      The problem is it shows this font on the blog 'home' page but not on the individual 'post' page. Pls have a look here. prettygloss.blogspot.com

      Delete
    5. It looks like you've been composing your posts in MS Word before transferring them to Blogger. This is a bad idea. It is blocking custom code that you're inserting into your blog. You need to compose your post in either Blogger Editor, or a simple text editor (like Notepad)

      Delete
  27. Hi dear,

    How about changing 'blog description' font?


    Sarah

    ReplyDelete
    Replies
    1. Hi Sarah,

      I've added a column to change the description field in the post above - check it out..

      Cheers!

      Delete
  28. Hey, I've been using your advice for a while, but I was wondering.
    Is there a way to change the font of EVERYTHING. rather than indivually changing each element?

    I'm using the sidebar dynamic view.
    http://theballofgum.blogspot.co.uk/

    Thanks.

    ReplyDelete
    Replies
    1. Well, not really. The Template Designer is the way to go :)

      Delete
  29. Hi dear, another query.

    I installed a font to change 'body text'. It's visible on the home page but not when on the post pop-up page of my blog (www.prettygloss.blogspot.com). How can I fix this?

    ReplyDelete
    Replies
    1. Hi Sarah,

      I've replied you here:
      http://www.southernspeakers.net/2013/05/google-web-font-in-blogger-dynamic-view.html?showComment=1385804173883#c8174658674799653418

      Delete
  30. Hi, do you have the code to edit the tabs text in non-dynamic views?

    ReplyDelete
    Replies
    1. Hi Akisame,

      You mean as in changing the Pages text on your tabs menu without actually changing the title of your static page?

      Delete
    2. I just want to change the font of the Pages text in my tabs.

      Delete
    3. Oh right.. Codes to change font can be pretty specific, depending on the type of font. Do you have a particular font in mind?

      Delete
  31. Thanks for putting this up.

    I'm still having trouble getting the fonts changed. Even after trying to mess around with the code several times with several different combinations. Something around Step 5 isn't quite working out.

    The blog is in a Dynamic View.

    ReplyDelete
    Replies
    1. Hello there.. Were you able to find the element that you're targeting in Step 5?

      Delete
  32. It took a few wrong tries following the steps you've mentioned here (i was going wrong somewhere).. But this worked at last.
    Just one question.. can we have more than one font on a blog?
    If i wanted different fonts in different pages & posts..?

    ReplyDelete
    Replies
    1. Yeap, totally.. Just repeat the steps :)

      Delete
  33. Thanks!!
    Your blog is terribly useful!

    ReplyDelete
  34. Hy Yoboy, I really like your turtorials and all that stuff, but something's strange with my blog font. Try hoover over the porst title http://footballshirtnews.blogspot.com/

    ReplyDelete
    Replies
    1. Your hover font is different from your default font. Which one of them is the one you want to use?

      Delete
  35. Hi Yoga,
    You are great. May i ask you how to change all the fonts to one google font. I already followed your steps above, but there are still so many old fonts in my blog.
    http://berlinerbaustellen.blogspot.de/

    Thanks a lot!!!
    Ralph

    ReplyDelete
    Replies
    1. Hello Ralph,

      We may need to address these sections one by one. So, where shall we begin?

      Delete
    2. Hello Yoga,
      Just these two ones:

      1. How to change the post-title font in each image in mosaic-view.http://berlinerbaustellen.blogspot.de/

      2. How to change the text-font in each site.
      http://berlinerbaustellen.blogspot.de/p/impressum.html

      Greetings and many thanks from Ralph

      Delete
    3. Hello Ralph,

      1) Title font cannot be changed individualy on each post. But to set a generic rule for all of them, use this:

      .tile .banner .title{
      font-family: 'Lovers Quarrel', cursive !important;
      font-size: 40px !important;
      }

      2) In Step 5, instead of adding the code in your Add Css box, you need to rather add it on your individual page's HTML section, as follows:

      <style>
      body{
      font-family: 'Lovers Quarrel', cursive !important;
      font-size: 40px !important;
      }
      </style>

      Delete
  36. I tried the steps you listed to change my post title font to Lovers Quarrel. I also added this bit that you listed in a comment above:

    .article-header h1.title a{
    font-family: 'Lovers Quarrel', cursive !important;
    font-size: default !important;
    }

    .title.entry-title a{
    font-family: 'Lovers Quarrel', cursive !important;
    }

    The font shows properly in the preview pane underneath the "Add CSS" section. But when I actually view the blog, it's a different font entirely! Not the default, not Lovers Quarrel. Any idea where I went wrong?

    blog.indigosilverstudio.com

    ReplyDelete
    Replies
    1. Did you skip Steps 2 and 3? I couldnt find the link ref to the font anywhere in your page source. I've given it a try and it works just fine in my test blog:

      http://yoboytestblog17.blogspot.com/

      Delete
    2. There seemed to be some issue with that part not saving, but it is working now. I just had to keep inserting it and clicking "save".

      I've now run into a new problem I'm hoping you can help me with. The font that I chose, Lovers Quarrel, tends to display small. I've changed the code from my previous post to:

      .article-header h1.title a{
      font-family: 'Lovers Quarrel', cursive !important;
      font-size: 48px !important;
      }

      .title.entry-title a{
      font-family: 'Lovers Quarrel', cursive !important;
      font-size: 30px !important; <----problem!
      }

      The 48px font looks great in the individual post. But changing the font size there does not make the font larger on the Magazine style page (my default). I tried adding the 30px to the second chunk of code to change the font on the Magazine. The problem is, the Magazine style uses one size font for the most recent entry, and shrinks the font for the older entries. If I specify 30px, however, those older entries are also 30px and they look too big. Is there a way to specify a relative font size instead of a hard number? Where before it said "default", is there a way to say "slightly bigger than default?" Something like size:large or size:+2... so it knows to make the font bigger than default, but still allows it the freedom to have a bigger size on the recent post and smaller size on the older posts?

      I hope that made sense.

      I'm going to remove the 30px line of code for now because it looks silly.

      Thanks!

      Delete
    3. Hello Lori,

      You can use % instead of px to make it bigger relatively. Like 140% or so. Alternatively, I prefer to have separate codes for the two of them. The following will set 60px for the first post and 40px for the others:

      #lead .title.entry-title a{
      font-family: 'Lovers Quarrel', cursive !important;
      font-size: 60px !important;
      }

      #feature .title.entry-title a, #fold .title.entry-title a{
      font-family: 'Lovers Quarrel', cursive !important;
      font-size: 40px !important;
      }

      Delete
    4. That worked. Thanks!

      How do you know what all the various things are called? Like #lead .title.entry-title vs #feature and #fold?

      Delete
    5. I don't. I just inspect the page whenever needed :)

      http://www.southernspeakers.net/2010/11/identify-blogger-gadget-id.html

      Delete
  37. Hello, thanks for the tuto ;-) I managed to change the font of the title of my blog but it doesn't work for the title of my different articles.
    Here my blog : http://travelpicsandtips.blogspot.fr/?view=magazine
    Thanks for your help :-)

    ReplyDelete
    Replies
    1. Hello,

      Were you referring to the title of each post on Magazine view? I'm afraid you can't change them individually, but there are three main groups you can change - the most recent post, and the 4-5 posts, below it, and the rest. Here's how:

      .magazine #lead .title.entry-title a{
      font-family: 'Lovers Quarrel', cursive !important;
      font-size: 60px !important;
      }

      .magazine #feature .title.entry-title a{
      font-family: 'Lovers Quarrel', cursive !important;
      font-size: 40px !important;
      }

      .magazine #fold .title.entry-title a{
      font-family: 'Lovers Quarrel', cursive !important;
      font-size: 40px !important;
      }

      Delete
  38. hey yoga!! thanks for the post!!

    I have been trying to change the body text of my posts on mosaic view, but I couldn´t.

    I already tried it with these css code, but It didn´t work

    body{
    font-family: 'Comfortaa', cursive !important;
    font-size: default !important;
    }

    and also

    .article-content{
    font-family: 'Comfortaa', cursive !important;
    font-size: default !important;
    }

    I will appreciate so much your help!!!

    ReplyDelete
    Replies
    1. Hello Ana,

      I'm seeing lots of foreign formats in your post's HTML. These foreign styles are overpowering your default CSS.. I'm thinking this must have gotten copied from somewhere.. Did you compose the post in say Ms Word first before transferring to your blog?

      The post that I looked into:
      http://apachecoarq.blogspot.jp/2014/08/la-arquitectura-debe-de-ser-la.html

      Delete
    2. Hi Yoga! Thanks for your reply

      You are right! I compose my post in Word first before transferring to my blog, how can I correct this? What do you suggest?

      I really appreciate all your help, I am pretty new at this.

      Delete
    3. Hello Ana,

      You could edit your post - select all your content - and click on the 'Remove Formatting' icon from your Editor's toolbar. It looks like a 'T' with a small 'x' next to it.

      Delete
  39. How do I remove the underlines from the links in the blog title and also from the links in the header bar . I tired entering text-decoration:none; but it doesn't seem to work

    ReplyDelete
  40. Nice giude. Thank you I was seaching for this since yesterday.

    ReplyDelete
  41. Hello there Yoga,

    Sorry for bugging you again. I have successfuly changed the fonts on my blog per your instructions, but I have noticed that the mobile preview in my template page is not showing my blog properly. I then confirmed this on a smartphone.

    I'm not sure if this is due to the fonts I choose (Merriweather Sans and Ubuntu) or if I did something on my CSS or HTML code that affected the mobile view negatively... Do you have any clue about what it might be?
    My blog: laminafiada.blogspot.pt

    Thanks in advance.

    ReplyDelete
  42. Oh, by the way... and this might be related, but I'm nt sure...

    I tried several fonts before settling for Merriweather Sans and Ubuntu. Sometimes, after I added the HTML code and added the 'link' bit at the end of the line as you instruct, when I tried to save it showed me an error. I can't remember exactly what it said but I think it was along the lines of the 'head' tag or 'link' tag not being closed properly or something like that... Sometimes I had to remove the 'link' bit to successfully save the HTML code. Not sure if this could be related to the deficient mobile view...

    ReplyDelete
    Replies
    1. Hello Carl,

      The errors were nothing to be concerned off - they just show how Blogger's HTML editor fail to recognise closing and opening tags. In any case, mods made in the actual blog will not be carried forward to your mobile template. Worse - there is NO actual way to do any kind of mods for mobile templates. What issues are you seeing exactly on your mobile template? Here's the mobile template's URL that you can open on your desktop browser.

      http://laminafiada.blogspot.pt/?m=1

      Delete
  43. How do I change the color/colors of text offered in dynamic views while typing up a post. Fir example, if I don't like the standard blue and would like to add a different Hex Color?

    ReplyDelete
  44. Thank you for the reply Yoga. Your clarification abut the HTML editor leaves me less worried. I have solved the mobile view issue and found out that it had nothing to do with the fonts after all. I simply had messed up the mobile template itself and forgot to change it back. Silly me... All well now, thanks!

    ReplyDelete
  45. Can I ask a question? how can you make the title center?

    ReplyDelete
    Replies
    1. The title should already be in the center by default. Is this not the case for you?

      Delete
  46. Hi, Yoga

    This is the only one of your tutorials I can't do it.

    The html is not admitted and I receive the message:
    Error al analizar XML, línea 5, columna 103: The element type "head" must be terminated by the matching end-tag

    So, I do the rest of the steps in the CSS but my blog title font, my link font or my description font don't change to "Luckiest Guy"

    http://edicionesludoka.blogspot.com.es/view/mosaic

    Thanks for your help.

    Jose

    ReplyDelete
    Replies
    1. Hi Editor,

      Could you put your code in pastebin so that I can have a look why you're getting that error?

      Delete
    2. This is my code:

      http://pastebin.com/sRyiLRz7

      Delete
    3. Ah I'm sorry the link expired. If you still need help on this could you reupload the code please?

      Delete
    4. Hi, Yoga

      I think the link wasn't expired but marked as Private. Now I suppose it should work:

      http://pastebin.com/sRyiLRz7

      Thanks.

      Delete
    5. Could you try using this as your link instead?

      <link href='https://fonts.googleapis.com/css?family=Luckiest+Guy' rel='stylesheet' type='text/css'>

      Delete
  47. Yoga,

    I've been tryin one and one thousand of times but it is impossible. I can't do it!

    Help!

    http://edicionesludoka.blogspot.com.es/view/mosaic

    I want Luckiest Guy, for title and description, like in:

    http://edicionesludoka.blogspot.com.es/p/inicio.html

    Jose.

    ReplyDelete
    Replies
    1. Hi Jose,

      Do you still need help on this? Not sure how I missed your comment, I'm sorry :(

      Delete

Please use the 'Ask a Question' page to shoot questions that are not related to the tutorial in the post above.