How can I tell why the font is not being displayed?
I'm in Chrome - so .ttf should work.
I checked that I can navigate to the file using my URL bar, and I can download it so permissions are fine.
I have a page that declares a #font-face:
#font-face {
font-family: 'entypo';
src: url('/css/fonts/entypo.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
p { font-family: 'entypo'; }
The #font-face cannot be within a block. Common practice is to have it at the top of the CSS file.
Your source:
#lookgram {
#font-face {
font-family: 'entypo';
src: url("/entypo.eot");
src: url("/entypo.eot?#iefix") format("embedded-opentype"), url("/entypo.woff") format("woff"), url("/entypo.ttf") format("truetype"), url("/entypo.svg#entypo") format("svg");
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'entypo_social';
font-style: normal;
font-weight: 400;
src: url("/css/fonts/entypo-social.woff") format("woff");
}
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, "lucida grande", tahoma, verdana, arial, sans-serif;
}
There is a known bug with chrome relating to web-font as ive had a similar problem. Its worth noting the article at https://stackoverflow.com/questions/21984543/google-chrome-bug-website-not-displaying-text. The article gives a few ideas as how but not why this bug is occurring - and at times fairly random!
Hope this helps
Related
My custom font doesn't work on different browsers. I imported 3 font weights using #font-face, all of them .tiff. But when I imported other variations (.eot, .woff, .woff2, .svg) all the text goes bold.
#font-face {
font-family: 'Bicyclette';
src: url('fonts/Bicyclette-Light.ttf') format('truetype');
font-weight: lighter;
}
#font-face {
font-family: 'Bicyclette';
src: url('fonts/Bicyclette-Regular.ttf') format('truetype');
font-weight: normal;
}
#font-face {
font-family: 'Bicyclette';
src: url('fonts/Bicyclette-Bold.ttf') format('truetype');
font-weight: bolder;
}
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: 'Bicyclette', Helvetica, sans-serif;
}
I also added Helvetica as a secondary font, but most browsers display it as Arial.
My website is deployed at novarion.ro.
My questions are: how can I make my custom font work on most browsers? And if that doesn't work, is there a way to keep it always Helvetica as the second option?
Using numeric font-weight seems to be more robust.
You might also add a font-style value if there are any italic styles in your html/css:
#font-face {
font-family: 'Bicyclette';
src: url('fonts/Bicyclette-Light.ttf') format('truetype');
font-style: normal;
font-weight: 300;
}
#font-face {
font-family: 'Bicyclette';
src: url('fonts/Bicyclette-Regular.ttf') format('truetype');
font-style: normal;
font-weight: 400;
}
#font-face {
font-family: 'Bicyclette';
src: url('fonts/Bicyclette-Italic.ttf') format('truetype');
font-style: italic;
font-weight: 400;
}
#font-face {
font-family: 'Bicyclette';
src: url('fonts/Bicyclette-Bold.ttf') format('truetype');
font-style: normal;
font-weight: 700;
}
body{
font-family: 'Bicyclette', Helvetica, sans-serif;
}
h1{
font-weight:700;
}
.light{
font-weight:300;
}
Besides, make sure all font-files are properly loaded (check your dev tool's console for 404s).
Helvetica Fallback
Provided, there is some Helvetica installed on a system - font-family names can be quite different.
You could add alternative font-family names as described by Chris Coyier: Better Helvetica
to make the browser search for several font names.
body {
font-family: Bicyclette, "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
However, this approach merely improves your chances of seeing a proper Helvetica, if one is available.
Here's my problem:
In order to improve my SPEED mark on google speed insight, I had to switch from render-blocking google fonts to loaded locally google fonts.
So far so good except that I have a HUGE problem.
Before I was loading my fonts in this way:
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700|Open+Sans+Condensed:300|Ubuntu+Condensed|Ubuntu:300,700" rel="stylesheet">
And in my huge style-sheet, I was just calling them normally for example:
body {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
}
But now, since I had to download them to avoid the render-blocking red flag, I'm calling them in this way:
#font-face {
font-family: "Opens Sans";
src: url("/fonts/OpenSans-Regular.ttf");
font-style: normal;
font-weight: 400;
}
#font-face {
font-family: "Opens Sans";
src: url("/fonts/OpenSans-Light.ttf");
font-weight: 300;
}
#font-face {
font-family: "Opens Sans";
src: url("/fonts/OpenSans-Bold.ttf");
font-weight: 600;
}
#font-face {
font-family: "Opens Sans";
src: url("/fonts/OpenSans-ExtraBold.ttf");
font-weight: 700;
}
#font-face {
font-family: "Opens Sans Condensed";
src: url("/fonts/OpenSansCondensed-Light.ttf");
font-weight: 300;
}
#font-face {
font-family: "Ubuntu Condensed";
src: url("/fonts/UbuntuCondensed-Regular.ttf");
font-weight: 300;
}
#font-face {
font-family: "Ubuntu";
src: url("/fonts/Ubuntu-Regular.ttf");
font-weight: 300;
}
#font-face {
font-family: "Ubuntu";
src: url("/fonts/Ubuntu-Bold.ttf");
font-weight: 700;
}
And here you can see my PROBLEM.
I call different fonts with the same name, but they have different weights. Obviously, I can call them with a different name, for example, "Ubuntu Bold" but then I would have to change my entire stylesheet, for example, I should now declare:
body {
font-family: 'Open Sans Normal', sans-serif;
// font-weight: 400; //
}
p {
font-family: 'Open Sans Bold', sans-serif;
// font-weight: 700; //
}
Essentially, no more font-weight, only different font-family names to state the weight.
Is there any solution to my problem?
Even though the font files are different, you don't need to set a different font-family for each variation of the font. You can just set one font-family, and specify the different variations in the different #font-face properties.
You should define each #font-face with the same font-family name, like so:
#font-face {
font-family: 'Opens Sans';
src: url("/fonts/OpenSans-Regular.ttf");
font-style: normal;
font-weight: 400;
}
#font-face {
font-family: 'Opens Sans';
src: url("/fonts/OpenSans-Italic.ttf");
font-style: italic;
font-weight: 400;
}
#font-face {
font-family: 'Opens Sans';
src: url("/fonts/OpenSans-Bold.ttf");
font-style: normal;
font-weight: 600;
}
Note that each different font file has a separate #font-face with different properties that correspond to the specific font file, but they have the same font-family. You can then use the font in your css like so:
body {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
}
.bold {
font-family: 'Open Sans', sans-serif;
font-weight: 600;
}
.italic {
font-family: 'Open Sans', sans-serif;
font-style: italic;
}
The other properties in your css classes (font-weight, font-style, etc) will determine which #font-face is used.
I need to embed local .ttf files on a JavaFX project with some variants (bold, italic and so on) but the css parser seems to not support font properties in #font-face declaration:
#font-face {
font-family: 'Open Sans', sans-serif;
src: url('fonts/OpenSans-Regular.ttf');
}
#font-face {
font-family: 'Open Sans', sans-serif;
src: url('fonts/OpenSans-Bold.ttf');
font-weight: bold;
}
#font-face {
font-family: 'Open Sans', sans-serif;
src: url('fonts/OpenSans-ExtraBoldItalic.ttf');
font-style: italic;
}
WARNING: CSS Error parsing
jar:file:/home/test/dist/run736633436/test.jar!/it/test/vending/css/application.css:
Unexpected TOKEN [:] at [8,15] mag 06, 2015 3:40:15 PM
com.sun.javafx.css.parser.CSSParser fontFace WARNING: CSS Error
parsing
jar:file:/home/test/dist/run736633436/test.jar!/it/test/vending/css/application.css:
Unexpected TOKEN [:] at [13,14]
How could I achieve this?
==EDIT==
Notice that the parser complains on font-weight: bold; and font-style: italic; rules.
I think I found a solution. Try to swap the font-weight and font-style attributes with the src attribute. In your case your css would look like:
#font-face {
font-family: 'Open Sans', sans-serif;
src: url('fonts/OpenSans-Regular.ttf');
}
#font-face {
font-family: 'Open Sans', sans-serif;
font-weight: bold;
src: url('fonts/OpenSans-Bold.ttf');
}
#font-face {
font-family: 'Open Sans', sans-serif;
font-style: italic;
src: url('fonts/OpenSans-ExtraBoldItalic.ttf');
}
I had the same issue and swapping the attributes did the job. I have no idea why that is but it seems to resolve the issue.
i use this for invoke news fonts to my page, but not result. Why?
This fonts don't exist for default. I did download and insert in a folder Font in my skin.
#font-face {
font-family: 'akzidenzgroteskregular';
src: url('Font/Akzidenz-Grotesk (R) Extended Regular.ttf') format('truetype');
font-style: normal;
}
#font-face {
font-family: 'klavikaRegular';
src: url('Font/klavika-regular-webfont.ttf') format('truetype');
font-style: normal;
}
#font-face {
font-family: 'KlavikaBold';
src: url('Font/klavika-bold-webfont.ttf') format('truetype');
font-style: normal;
}
I used this in some projects:
.AFDefaultFont:alias,
body
{
font-family: Comic Sans, Tahoma, sans-serif !important;
font-size: 14px !important;
}
Here's the top of my style sheet:
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url(https://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
body{
font-family:"Open Sans";
background-image:url(images/greyFadeBG.jpg);
background-repeat:repeat-x;
background-color:#ffffff;
margin:0px;
padding:0px;
height:100%;
min-width:870px;
font-size:14px;
color:#666666;
}
This displays the custom font in IE(9 and 10)
If I change the line from font-family:"Open Sans"; to font-family:"Open Sans", sans-serif;
The custom font will show in IE7, but all IE version will show the san-serif font.
I've tried this from Font Squirrel with no luck:
#font-face {
font-family: 'open_sansregular';
src: url('opensans-regular-webfont.eot');
src: url('opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('opensans-regular-webfont.woff') format('woff'),
url('opensans-regular-webfont.ttf') format('truetype'),
url('opensans-regular-webfont.svg#open_sansregular') format('svg');
font-weight: normal;
font-style: normal;
}
Any ideas?
for the second #font-face to work you'll need to change the body font-family to
body{
font-family: "open_sansregular";
}
or better yet
body{
font-family: "Open Sans", "open_sansregular", sans-serif;
}