• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

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

Participant ,
Aug 11, 2017 Aug 11, 2017

Copy link to clipboard

Copied

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?

TOPICS
Product issue

Views

13.6K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Aug 12, 2017 Aug 12, 2017

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"></scrip

...

Votes

Translate

Translate
Community Expert ,
Aug 11, 2017 Aug 11, 2017

Copy link to clipboard

Copied

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 & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Aug 11, 2017 Aug 11, 2017

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Aug 12, 2017 Aug 12, 2017

Copy link to clipboard

Copied

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.

Screen Shot 2017-08-12 at 4.02.12 AM.png

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Aug 12, 2017 Aug 12, 2017

Copy link to clipboard

Copied

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:

Screen Shot 2017-08-12 at 4.57.48 AM.png

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 12, 2017 Aug 12, 2017

Copy link to clipboard

Copied

This may help you to add the fonts to your website Help | Typekit

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 12, 2017 Aug 12, 2017

Copy link to clipboard

Copied

In order to use Typekit fonts, you need to add domain specific JavaScript to your <head> tag.  I suspect that's where the problem is.

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 12, 2017 Aug 12, 2017

Copy link to clipboard

Copied

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/Mk40okhWqYJ2vapFEU2RRXO9ESIBUVYqcYVdaikgrOvfeGwgf5zWHgJ1FRjhFRMDWh4cwQ8yFD..."></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.

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Aug 12, 2017 Aug 12, 2017

Copy link to clipboard

Copied

Thanks, Nancy and Ben. The TypeKit fonts are working now.

But what about the fonts that are on my system, many of which are still not working? Are there other codes I need to use for those as well?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 13, 2017 Aug 13, 2017

Copy link to clipboard

Copied

If you put your work online and post the URL we can take a look at your code.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 15, 2017 Aug 15, 2017

Copy link to clipboard

Copied

Without seeing the actual code, it's anyone's guess why some fonts that are on your system aren't working. My first guess would be that you're using a font with two or more words in its name, but not wrapping the font name with quotes in your css. You might have something like...

font-family: times new roman;

...when the multi-word font name calls for...

font-family: "times new roman";

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 15, 2017 Aug 15, 2017

Copy link to clipboard

Copied

LATEST

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).

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines