1

Although having read some articles about font-family, I still don't have a deep understanding how it works. So I'm hoping this question may help me better understand how font-family works.

I see some beautiful fonts on a website, the CSS of one of them is font-family:'Futura Today Bold',Arial,sans-serif. I try to copy it to my website, but it doesn't work. It seems the elements affected by this website are displaying default font. Here is a side question: how do I check what font an element is actually using? can I do it with javascript?

And the main question is, how do I use this 'Futura Today Bold' font on my website?

Hive7
  • 3,599
  • 2
  • 22
  • 38
shenkwen
  • 3,536
  • 5
  • 45
  • 85

5 Answers5

3

The problem with the font you intend to use is that it will not be installed on every user's device, which is why the fallback font (Arial) is specified in the website you checked.

You need to use web fonts if you wish to use a font that is not available on the user's device. Here's an example CSS code to do that:

@font-face {
  font-family: 'Futura Today Bold';
  src: url('http://path/to/futuratodaybold.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
       url('http://path/to/futuratodaybold.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}

After including the above lines in your CSS code, the font can be applied by the CSS rule font-family:'Futura Today Bold' in your stylesheet.

Also note that as Christina pointed out in a comment, you should not use fonts that you do not have licensing rights to use.

Answering your other question as to how to find out which font is currently being applied, you can use your browser's developer tools to find that out. Here's a screenshot of how it can be done in Firefox.

Fonts in Firefox Developer Tools

Source.

Chirag Bhatia - chirag64
  • 4,430
  • 3
  • 26
  • 35
  • I also try to use developer tools to find out what fonts are actually being used. But I find out if I set the font-family to something like `nonsense`, the font-family in computed style will also display `nonsense`, which makes no sense – shenkwen Nov 01 '14 at 14:55
  • Hmm? That's not the behavior I'm seeing at my end. The screenshot above is old and applicable for an older version of Chrome. If you're on Chrome, open devtools, go to the `Elements` tab, and select any element on the webpage. Then in the right pane, go in the tab that is named `Computed` and scroll to the bottom. There, you should see the rendered font. Notice in this screenshot: http://i.imgur.com/LjMhjDz.jpg that I just took that I've applied the `nonsense` font style to the span, but on the right pane bottom, it still shows `Times New Roman`. – Chirag Bhatia - chirag64 Nov 01 '14 at 15:01
  • OK, I missed the "rendered fonts" section, thank you for this info, it really helps. But please look at this picture:[http://t.whstonecabinet.com/font.png](http://t.whstonecabinet.com/font.png) In the rendered fonts section, it display something weird, you can see the live site here:[http://t.whstonecabinet.com](http://t.whstonecabinet.com) – shenkwen Nov 01 '14 at 15:13
  • 1
    Seems like Chrome does seem to have a weird behavior in the rendered fonts section. You can use Firefox's devtools to find the same thing. Open the `devtools`, go into the `Inspector` tab, select the element and in the right pane, click the `Fonts` tab. You should see the name of the font being rendered. – Chirag Bhatia - chirag64 Nov 01 '14 at 15:27
1

Basically you need to have the font actually included in the bundle when the page loads to have access to it. You can easily do this once you have the file by using this html code in your <head>

<link href='font-name' rel='stylesheet' type='text/css' />

or like this into your css

@import('font-name');

After you have done this all you have to do is set the font like you did before

Update

This is needed to define the font name once you have the ttf. Put this in CSS

@font-face {
    font-family: 'Futura Today Bold';
    src: url('font-name.ttf');
}

If you look at this file:

http://t.whstonecabinet.com/templates/rt_chimera/css-compiled/demo-dee78feaa65fff084c041f8862da3088.css

Then at the beginning you can see this line which is what create the font and if you look in your file tree under fonts/Roboto-Regular-webfont.eot then you can find the eot file:

@font-face {
    font-family:'Roboto';
    src:url('../fonts/Roboto-Regular-webfont.eot');
    src:url('../fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/Roboto-Regular-webfont.woff') format('woff'), url('../fonts/Roboto-Regular-webfont.ttf') format('truetype'), url('../fonts/Roboto-Regular-webfont.svg#Roboto') format('svg');
}
Community
  • 1
  • 1
Hive7
  • 3,599
  • 2
  • 22
  • 38
  • So if I see a page using an unconventional font, I should be able to get the URL of the font file from its HTML? Actually I'm looking at my own joomla powered website, the template is using a font called `'roboto'`, and I can see these ttf files under its `fonts` folder, but I don't see this `roboto` font being loaded in `` – shenkwen Nov 01 '14 at 14:51
  • Sorry got it a bit wrong if you get the ttf file then do what i have said above in update – Hive7 Nov 01 '14 at 14:53
  • No I am trying to understand how it works. My page is working, the font `roboto` display correctly, but this is an unconventional font, but I just don't see this font being loaded in the way you mentioned. So why this `roboto` font can be displayed on my page? – shenkwen Nov 01 '14 at 15:00
  • @WenShenk can i see your page – Hive7 Nov 01 '14 at 15:01
  • @WenShenk that way i can try and find where the font is coming from – Hive7 Nov 01 '14 at 15:02
  • 1
    BTW @WenShenk the file for the font if you want it can be found here: http://www.gannett-cdn.com/static/usat-web-static-562.0/fonts/futura_today_normal.eot – Hive7 Nov 01 '14 at 15:55
0

There are some sets of fonts that are available in the website by default. If you want to use any other fonts then you must specify the same in your css. Normally font files are available in ttf or otf format.

For example if you want to use Futura Today Bold you should first download the font file from this page.

Next, you can specify in your css, the font path that you intend to use. Visit this link to know more

Community
  • 1
  • 1
aash
  • 1,323
  • 1
  • 14
  • 22
0

If you trying to use a font in your website and it doesn't show, in many cases you just doesn't have the font available. So google and download it (if allowed). To use it in your online websites, you have to provide the font, if you're not sure, wether everybody has this font or not. Providing can be done via @font-face. But keep copyrights in mind.

When a browser renders a page, it uses the fonts from left to right. If the most-left is not available, it goes one step to the right and so on. You will often see something like sans or sans-serif at the right and, to provide a fallback, where the browser just pick a default font of that type.

To see which font is currently used, you can right click that part (in Firefox or Chrome) and inspect the element. Look for the font section. There you can see which font is used. If you see multiple fonts, the most left/top value should be applied.

Felix
  • 541
  • 1
  • 4
  • 14
0

You would need to actually have the font file in your project or you can download the file using @font-face in your css.

There are quite a few services that offer fonts for download online. Some are free to download (Google Fonts, others are paid (Typekit).

This link explains a bit of how it is with fonts on the web today.

carlosHT
  • 493
  • 3
  • 9