I can't seem to get #font-face to pull down these embedded fonts.
Page is here: http://clubs.speareducation.com/resources/
The header "Download Digital Resources" is suppose to be gotham_htfregular.
Take a look at my global.css stylesheet (fonts are at the top). Have tried double quotes, single quotes... I have never had trouble with this before... Am I missing something here?
Here is my CSS.
#font-face {
font-family: "gotham_htfregular";
src: url("gothahtfregular-webfont-webfont.eot");
src: url("gothahtfregular-webfont-webfont.eot?#iefix") format("embedded-opentype"),
url("gothahtfregular-webfont-webfont.woff") format("woff"),
url("gothahtfregular-webfont-webfont.ttf") format("truetype"),
url("gothahtfregular-webfont-webfont.svg#gotham_htfregular") format("svg");
font-weight: normal;
font-style: normal;
}
Thanks!
The URLs of the font files are not properly set. Check them out.
I see gothahtfbol-webfont-webfont, gothahtfboo-webfont-webfont, and gothahtfmed-webfont-webfont, all loaded as 'gotham_htfregular'; so tell me, which of these files you're importing contains 'gotham_htfregular'? looks like there's bold, medium, and something else, but none of them look like they're regular.
Related
i linked this custom font using #font-face rule
#font-face{
font-family: "jf_flatmedium";
src: url("../fonts/jf-flat/jf_flat_medium-webfont.eot");
src: url("../fonts/jf-flat/jf_flat_medium-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/jf-flat/jf_flat_medium-webfont.woff2") format("woff2"), url("../fonts/jf-flat/jf_flat_medium-webfont.woff") format("woff"), url("../fonts/jf-flat/jf_flat_medium-webfont.ttf") format("truetype"), url("../fonts/jf-flat/jf_flat_medium-webfont.svg#jf_flatmedium") format("svg");
font-weight: normal;
font-style: normal;
}
the browser (chrome & firefox) not rendering the font 'jf_flatmedium' insted it renders the fallback, i double checked the paths for font files.
and on a side notice in the font TTF file the font name is 'jf flat', if i change "font-family" attribute to be 'jf flat' it gets rendered .. so iam guessing this has something to do with the custom font-family name but can't figure out why
UPDATE: one thing i did not refer to in my question that iam displaying Arabic text, i just noticed that on English font is rendered fine . is there anything preventing using a particular font on any language i desire ?
Have a look at this i don't know if it will help but i hope so
http://www.fontspring.com/support/troubleshooting/troubleshooting-webfonts-and-browsers?utm_source=fontsquirrel.com&utm_medium=help_link&utm_campaign=trouble_shooting_webfonts
Fixed , it turned out to be fontsquirrel issue, i tried another webfont generator transfonter and it worked fine.
I'm using a css compiler (Stylus) for the first time, and I can't get Google Web Font urls to load correctly.
This:
#font-face {
font-family: 'Roboto';
font-style: light;
font-weight: 300;
src: local('Roboto Light'), local('Roboto-Light') url(https://fonts.googleapis.com/css?family=Roboto:300,500,700&subset=latin,latin-ext);
}
produces:
#font-face {
font-family: 'Roboto';
font-style: light;
font-weight: 300;
src: local('Roboto Light'), local('Roboto-Light') url("data:application/octet-stream;base64,QGZvbnQtZmFjZSB7CiAgZm9udC1mYW1pbHk6ICdSb2JvdG8nOwogIGZvbnQtc3R5bGU6IG5vcm1hbDsKICBmb250LXdlaWdodDogMzAwOwogIHNyYzogbG9jYWwoJ1JvYm90byBMaWdodCcpLCBsb2NhbCgnUm9ib3RvLUxpZ2h0JyksIHVybChodHRwczovL2ZvbnRzLmdzdGF0aWMuY29tL3Mvcm9ib3RvL3YxNS9QcnUzM3FqU2hwWlNtRzN6NlZZd25hQ1djeW5mX2NEeFh3Q0x4aWl4RzFjLnR0ZikgZm9ybWF0KCd0cnVldHlwZScpOwp9CkBmb250LWZhY2UgewogIGZvbnQtZmFtaWx5OiAnUm9ib3RvJzsKICBmb250LXN0eWxlOiBub3JtYWw7CiAgZm9udC13ZWlnaHQ6IDUwMDsKICBzcmM6IGxvY2FsKCdSb2JvdG8gTWVkaXVtJyksIGxvY2FsKCdSb2JvdG8tTWVkaXVtJyksIHVybChodHRwczovL2ZvbnRzLmdzdGF0aWMuY29tL3Mvcm9ib3RvL3YxNS9vT2VGd1pObHJUZWZ6TFltbFZWMVVLQ1djeW5mX2NEeFh3Q0x4aWl4RzFjLnR0ZikgZm9ybWF0KCd0cnVldHlwZScpOwp9CkBmb250LWZhY2UgewogIGZvbnQtZmFtaWx5OiAnUm9ib3RvJzsKICBmb250LXN0eWxlOiBub3JtYWw7CiAgZm9udC13ZWlnaHQ6IDcwMDsKICBzcmM6IGxvY2FsKCdSb2JvdG8gQm9sZCcpLCBsb2NhbCgnUm9ib3RvLUJvbGQnKSwgdXJsKGh0dHBzOi8vZm9udHMuZ3N0YXRpYy5jb20vcy9yb2JvdG8vdjE1Lzk3dWFoeGlxWlJvbmNCYUNFSTNhVzZDV2N5bmZfY0R4WHdDTHhpaXhHMWMudHRmKSBmb3JtYXQoJ3RydWV0eXBlJyk7Cn0K");
}
I've tried to troubleshoot, loading a character at a time, and can get part of the url to compile correctly, so this:
src: local('Roboto Light'), local('Roboto-Light') url(https://fonts.googleapis.com/css?family=Robot);
produces:
src: local('Roboto Light'), local('Roboto-Light') url("https://fonts.googleapis.com/css?family=Robot");
But as soon as I add the last 'o' to 'Roboto' it compiles as that crazy "data:application/octet-stream;base64,QGZv..." output.
I have tried other urls and get a similar result. Have also tried escaping the "=" sign. It escapes, but I still can't get it to compile correctly past 'Robot'.
For now, I'm hard coding the css file with the correct urls. Not a huge problem, but I'd like to figure out what I'm doing wrong.
I'm 100% sure that it's not Stylus produces this behavior. You can verify it at http://tinyurl.com/hqthyml (view compiled CSS). Probably it's some plugin or maybe build tool (gulp/webpack/...) that you're using with Stylus.
the font you are using from google fonmt its simple just
put this into you css file on the top
#import url(https://fonts.googleapis.com/css? family=Roboto:400,300italic,300,400italic);
and use simple like
body{
font-family: 'Roboto', sans-serif;
}
you are trying to call a html request into the css file which i understand thats why it compile this
I have a directory called project and in it i have the directories html,assets and javascript.The assets directory has the directories fonts and css.The css directory has a css file called typography.css.The fonts directory has all the fonts i am using.
Inside the html directory i have a file typography.html. To use the fonts i am using this code inside typography.css which is correctly linked/referenced in my html file.However this code inside typography.css
#font-face {
font-family: "LatoLight";
src: url('../fonts/lato-light-webfont.eot') format("embedded-opentype"), url('../fonts/lato-light-webfont.woff') format("woff"), url('../fonts/lato-light-webfont.ttf') format("truetype"), url('../fonts/lato-light-webfont.svg') format("svg");
}
h1{ font-family: LatoLight !important; }
does not produce the desired result.I am using twitter bootstrap 3.Why is this not working?.
Try:
#font-face {
font-family: 'LatoLight';
src: url('../fonts/lato-light-webfont.eot') format("embedded-opentype"),
url('../fonts/lato-light-webfont.woff') format("woff"),
url('../fonts/lato-light-webfont.ttf') format("truetype"),
url('../fonts/lato-light-webfont.svg') format("svg");
font-weight: normal;
font-style: normal;
}
I've switched double quotes to single. It MIGHT make a difference but i am not sure.
otherwise this might help Bootstrap 3 unable to display glyphicon properly i know it's glyphicons but firefox might just be having issues regarding other fonts.
I think it could be as simple as putting quotes around the font you want when you reference it.
h1{ font-family: "LatoLight" !important; }
I have the code below in my css file. The font renders as desired in all browsers on Mac OS, but will not render on Windows. Now before you say it's not Windows compatible, I have made a dummy page on the Windows machine, and it runs the '.woff' file fine in Chrome (not IE). Hovever IE can render this page. I feel like I'm missing something important in the #font-face. Here is my code:
#font-face { font-family: Skia;
src:url('./webfonts/skia.ttf') format('truetype'),
url('./webfonts/skia.eot') format('embedded-opentype'),
url('./webfonts/skia.woff') format('woff'),
url('./webfonts/skia.svg');
font-weight: lighter;
font-style: normal;
}
the 'webfonts' folder is in the same directory as the 'styles' folder where the css files are located.
>styles
>'style.css'
>webfonts
>'skia.ttf / woff / eot / svg'
In the <body> tag, I'm including font-family:Skia, sans-serif;
It looks like you're on the right track
#font-face {
font-family: "sansation";
src: url("fonts/sansation_light.eot");
src: url("fonts/sansation_light.eot?#iefix") format("eot"),
url("fonts/sansation_light.ttf") format("truetype"),
url("fonts/sansation_light.woff") format("woff"),
url("fonts/sansation_light.svg") format("svg");
font-weight: 200;
font-style: normal;
}
You do want to include the format, ie fixes for older versions of ie, woff for opera, and svg for mobile devices. This format usually never does me wrong!
Also, you can safely omit ./ since it relates to the current directory. You also should to include the font-weight and font-style. Checkout how google webfonts does this.
Building a site using custom fonts. Got .ttf files from a designer.
css looks like this:
#font-face{
font-family:MenuFont;
src: url("http://www.website.com/assets/fontfile.ttf");
}
.divClass{font-family:MenuFont;}
I've tried with a couple different font files he gave me. One of them doesn't show up at all. Even more strangely, a couple of them only effect certain letters. For instance, plugging in one file makes only O's, R's C's and P's use the correct font. I checked and it's the same letters across browsers.
Looking in firebug, I can see the whole font, when I roll over the font file url, so my Url's are fine, and the browser is getting the font.
What am I missing here?
Generate the correct font-face code and all the needed fonts with FontSquirrel. See: http://www.fontsquirrel.com/fontface/generator
You will get a more extended and compatible font-face declaration. Like this:
#font-face {
font-family: 'Meran';
src: url('../fonts/meran-normal-webfont.eot');
src: url('../fonts/meran-normal-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/meran-normal-webfont.woff') format('woff'),
url('../fonts/meran-normal-webfont.ttf') format('truetype'),
url('../fonts/meran-normal-webfont.svg#Meran') format('svg');
font-weight: normal;
font-style: normal;
}