• Tutorials
  • Blogger Themes
  • Blogger SEO
  • Blogger Widgets
  • Internet
  • Mobile Phones
  • Gadgets
BloggerHero - Blogger Tuts, SEO, Themes, Gadgets
  • Home
  • Blogger
  • SEO
  • Themes
  • Internet
  • Widgets
  • Gadgets
  • About
  • search
    close

How to add Custom Fonts in Blogger or Any Website

 Rohitkumar  12:00  2 comments
Tweet
About billions of years ago, I was experimenting with some amazing new fonts (mostly from dafont and font squirrel) and I found that I can convert any desktop font into web font to use it on almost any website, even blogger (where you absolutely have no option to host any file) and guess what I did host alot of fonts on many of my projects. So today I'll be sharing easiest way to add custom fonts to your blogger blog or any website, all you need is little CSS knowledge.

How to add custom fonts in Blogger or any website

Steps to add custom fonts to blogger or any website :

  1. So first of all you need to download the font which you want to use on your website or blogger blog, try dafont.com or fontsquirrel.com . If you already have the font then no need to download.
  2. Now here's the magic, we need to convert the font to web font. Head to the Font Squirrel Web Font Generator
  3. Upload your font, click on checkbox - Yes, the fonts I'm uploading are legally eligible for web embedding.
  4. That's it! download your fonts in zip file.
  5. Now upload them at root folder of your website or DropBox if you are using blogger. 
  6. Check How to Host CSS on DropBox.
  7. Now after hosting your files you need to add respective links in the css and paste it in your blog's theme (same if you are using html based website)
  8. You can easily do this by going into Blogger > Template > Edit > Find  </head> and paste the css above </head> and save.
  9. It should look something like this. 
    @font-face {
        font-family: 'your-font-name';
        src: url('dropbox-font-link.woff2') format('woff2'),
             url('dropbox-font-link.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }
    
  10. After saving you will need to find the font-family : previous-font; and replace it with the your-font-name in CSS (you will need to have basic CSS knowledge first but still if you are having any problem do let me know in comments)
So that's it guys, We successfully hosted a custom font for your website or blog using dropbox (you can use any hosting platform though if you have your own hosting that'll be great.)
Additional Content :
  • Best Social Media Widget For Blogger | 2017
  • MaterialMix : A Free Material Design Blogger Template
I hope you must have liked this article, do share with your friends and let me know in comments section which font I should use in my upcoming themes or widgets or just your favorite font.

    Sharing is Caring!

  • Facebook
  • Twitter
  • Google+
  • StumbleUpon
  • linkedIn
  • StumbleUpon

Rohitkumar A

Posted In blogger, how to
Subscribe Now

Get Latest Posts Directly Into You Inbox

 2 comments :

  1. Libra Yanada Sembiring29 August 2017 at 07:01

    How to buy your Blogger theme?

    ReplyDelete
    Replies
    1. Rohitkumar A29 August 2017 at 18:34

      Please email me on rohitasare7@gmail.com

      Delete
      Replies
        Reply
    2. Reply
Add comment
Load more...

Newer Post Older Post Home
Do you like my work?

Buy Me a Coffee!

Popular Posts

  • How to use full ISP bandwidth to speed up downloading
  • How to add Custom Fonts in Blogger or Any Website
  • MaterialMix : A Free Material Design Blogger Template
  • Download Materiality Blogger Template
  • Resume Lite - One Page Resume Blogger Template
  • Best Social Media Widget for Blogger | 2017
Email Newsletter

Get Latest Posts Directly Into You Inbox

Labels

Android blogger browser Buy computer css drop down menu Gadgets Google how to internet Laptops Mobile Phone phone responsive reviews SEO smartphone Social Media Social Share Widgets subscription box Template tool trick widget Wireless youtube
Powered by Blogger.

Popular Posts

  • High PR Forums That Can Bring You High Traffic
  • Sensational v2.0 Responsive Blogger Template
  • Materiality - Material Design Blogger Template
  • MaterialMix : A Free Material Design Blogger Template
  • BloggerHero Free Premium Blogger Template
  • [Fixed] Facebook Share Thumbnail Is not Showing on Blogger

Contact Form

Name

Email *

Message *

  • Home
  • About
  • Contact
  • Sitemap
  • Services
  • Request
  • Privacy Polciy

© 2013 BloggerHero.com. All Rights Reserved. Designed with Love for Everyone!