Skip to main content
T
The Mavo
Inspiring
August 11, 2017
Answered

Fonts used in CSS do not display correctly in browsers. Why?

  • August 11, 2017
  • 3 replies
  • 15291 views

I'm noticing that some of the fonts I've used in CSS are missing whenever I preview the webpage in any browser (Firefox, Safari or Chrome). In particular, the TypeKit fonts, like "acumin-pro-extra-condensed" are not displaying in the browsers even though the CSS coding seems correct. But even some of the fonts on my local workstation, such as Univers, are not appearing.

What could be the problem?

This topic has been closed for replies.
Correct answer BenPleysier

PT Sans, another TypeKit font, also is not displaying correctly. Here's the CSS code:

.intro p {

  font-family: "pt-sans-narrow";

  color: #343144;

  text-align: center;

  text-transform: uppercase;

  font-size: 2.5em;

  line-height: 1.8em;

  letter-spacing: 0.325em;

}

...and here's what the page looks like in Chrome, where the copy in the white box is supposed to be PT Sans and the other type are variants of Acumin Pro Extra Condensed:


What Nancy says is correct. Have a look at meet-bok where the name of the 'kid' is in a Type Kit font.

Once the font has been registered to your website as per the link that I supplied, you will be given the correct URL as per

<script src="http://use.typekit.net/ik/Mk40okhWqYJ2vapFEU2RRXO9ESIBUVYqcYVdaikgrOvfeGwgf5zWHgJ1FRjhFRMDWh4cwQ8yFDJUFR9DjRjtF2SUwRsKZcjhw2Bc5248wRS3eKBKiAoR-eNn-AsDOcNkZkUaiaS0j1m0jhyz-h8qSkozScSKBasnOABDieNudcs8SKuDSWmyScmqOA4KH6GJTtCfIMMjgkMfP6medeBD-4MgnTkhk39.js"></script>

<script>var totalTypekitFonts=1;</script>

This script is unique to the registered web site and, because it is not registered to my local system, it will default to another font when developing the site on my local server.

Just follow the instructions in reply 5 and make sure that you also register the local server with 'localhost' or '127.0.0.1' if you want to see the font locally.

3 replies

pziecina
pziecina
Legend
August 15, 2017

It may also be worth checking the font format of your local fonts, as eps fonts will not work in browsers and ttf will only work in modern browsers, the encapsulated format of ttf has very little support in any browser, (woff fonts).

mollybd
mollybd
Participating Frequently
August 11, 2017

Hello! Can you please post a link to your page that's having the issue? You can also email us at support@typekit.com.

Thanks,

Molly

T
The MavoAuthor
Inspiring
August 12, 2017

Hi, Molly and Nancy

The site is not online. Actually, I was practicing one of the tutorials found with Dreamweaver Help. I did not modify that part of the code from what already was provided from the tutorial, yet the font Acumin is not displaying correctly. Just to be sure, I tested the page after modifying the code such that the page would use some different fonts. Some of my local fonts, like Chalet Comprime, worked. Others, like Gill Sans, did not.

For your reference, the applicable tutorial files can be downloaded from

Lay out and style web pages with CSS |​

Here's example of the CSS code as it appears in the tutorial:

.hero-content {

  font-family: 'acumin-pro-extra-condensed', sans-serif;

  color: #fff;

  position: absolute;

  z-index: 20000;

  padding-top: 4em;

  top: 0;

  bottom: 0;

  width: 100%;

  text-align: center;

}

And here's a screen shot of what the page looks like in Firefox. It looks the same in Safari and Chrome.

I want to make sure such basic issues are resolved before I really begin to build my own sites.

T
The MavoAuthor
Inspiring
August 12, 2017

PT Sans, another TypeKit font, also is not displaying correctly. Here's the CSS code:

.intro p {

  font-family: "pt-sans-narrow";

  color: #343144;

  text-align: center;

  text-transform: uppercase;

  font-size: 2.5em;

  line-height: 1.8em;

  letter-spacing: 0.325em;

}

...and here's what the page looks like in Chrome, where the copy in the white box is supposed to be PT Sans and the other type are variants of Acumin Pro Extra Condensed:

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
August 11, 2017

Is your site online?  I think you need to be online to see Typekit fonts.

Are you defining fonts properly in your CSS?

Custom fonts are dicey because people won't see them unless they have that font on their system.   For routine stuff, I use font families from the Win/Mac web safe fonts list.

CSS Font Stack: Web Safe and Web Font Family with HTML and CSS code.

Example:

body {font-family: Futura,'Trebuchet MS',Arial,sans-serif;}

Nancy O'Shea— Product User & Community Expert
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices