Kirupa.com - Anatomy of a CSS Style 101

programming
1

by kirupa | 24 May 2011

In HTML, the lingua franca (a new phrase I learned the other day!) for most things related to how things look is CSS. Before diving into CSS and looking at how it can be used, let's start at the very top and simply define the various parts of text and brackets that make up a CSS style.

This is a companion discussion topic for the original entry at http://www.kirupa.com/html5/anatomy_css_style_101.htm
2

Hi, i am new to firebug, css and even to blogger, and i feel amazed at your skills. But i have a problem with a new font i created and modded via squirrel-font site. I added the css code segement and all was ok, the font now appears in blogger font browser, but if i remove my font from control panel i can’t see my font, so, what’s the point? I want my webpage to look as i want with my font in every device which access my webpage. Thanks in advance and congratulations for your nice site!!

3

For everyone to be able to see your font, you need to host the file online somewhere rather than putting it in your control panel. Once the font is online, you use CSS’s @font-face on your webpage(s) to link to the font to make it usable by other CSS rules on your page. MDN has a good example of how to use that feature.

4

Thank you Krilnon, but i am using @font-face snippet with address of all samples of my font (eot, ttf, woff etc.) and still i look my font only on my pc! I think it’s a problem with blogger itelf…

5

Can you post a URL to the page where you are seeing this problem?

6
7

sory for annoying. I just want that everybody can see my font

8

Your fonts aren’t being downloaded, and going to one of the font links shows up a Dropbox download page. Here are some things I would try:

1.) Host the fonts on a plain web server (preferably one that isn’t https://)

2.) Create a very simple blank page with some text. Embed the fonts on this page to ensure that things work. This ensures there is no blogspot-related code interfering.

Cheers,
Kirupa =)

9

You could also try the ?dl=1 trick for your Dropbox links.

10

Thank you very much i am currently using Onedrive. Keep on, you make an invaluable job for worldwide HTML developers!! Now i would want to know how to take my font on my tablet into Hifont. Thank you!! =)