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?
1 Correct answer
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
...
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;}
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
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.
I want to make sure such basic issues are resolved before I really begin to build my own sites.
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:
Copy link to clipboard
Copied
This may help you to add the fonts to your website Help | Typekit
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
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.
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?
Copy link to clipboard
Copied
If you put your work online and post the URL we can take a look at your code.
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";
Copy link to clipboard
Copied
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).

