Font not rendering? - html

I have the following CSS (generated byn SASS):
#font-face {
font-family: "locust";
src: url(/assets/LOCUST.TTF) format("truetype");
src: url(/assets/LOCUST.svg) format("svg"); }
The path seems accessible - I'm on localhost:3000 and if I can download/see the fonts by typing localhost:3000/assets/LOCUST.TTF, for instance.
Yet Firefox don't render the font:
<h1 style="font-family: locust;">Test</h1>
I'm using Rails, but I don't think the problem is related, since the HTML and CSS generated seems correct to me, and the fonts are accessible. If I knew what I need to generate, most likely I would know how to fix.

Asset URL
Here is code we use:
#app/assets/stylesheets/fonts.css.scss
#font-face {
font-family: 'Lato';
src: asset_url('layout/fonts/lato/lato-hairline-webfont.eot');
src: asset_url('layout/fonts/lato/lato-hairline-webfont.eot?#iefix') format('embedded-opentype'),
asset_url('layout/fonts/lato/lato-hairline-webfont.woff') format('woff'),
asset_url('layout/fonts/lato/lato-hairline-webfont.ttf') format('truetype'),
asset_url('layout/fonts/lato/lato-hairline-webfont.svg#latohairline') format('svg');
font-weight: 100;
font-style: normal;
}
Notice asset_url is used -- this provides a CSS-compatible path to the url (hence why you're not able to access the path)
WebFonts
If you have full rights to use the font, you'd be better using the WebFont generator here: http://www.fontsquirrel.com/tools/webfont-generator
This creates cross-browser webfont files in .tff, .woff, .svg and .eot formats

Related

Custom fonts not displayed in Internet Explorer

My website uses custom fonts. They work on all browsers, except Internet Explorer (version 11.0.9600).
The CSS code:
#font-face {
font-family: 'almoni-dl';
font-weight: 700; /*(bold)*/
font-style: normal;
src: url('https://assets.mywebsite.com/fonts/almoni-dl-aaa-700.eot?#iefix') format('embedded-opentype'),
url('https://assets.mywebsite.com/fonts/almoni-dl-aaa-700.woff') format('woff'),
url('https://assets.mywebsite.com/fonts/almoni-dl-aaa-700.ttf') format('truetype');
}
html {
font-family: 'almoni-dl','Trebuchet MS',Helvetica,sans-serif;
}
What I've tried so far:
The fonts use an absolute path to a sub-domain. The response for these fonts includes the header Access-Control-Allow-Origin:*. I also tried using a relative path, no luck.
The fonts themselves are downloaded correctly, returning code 200.
Cache was cleared several times.
The fonts' Content-Types are: woff = application/font-woff; ttf = application/octet-stream; eot = application/vnd.ms-fontobject.
Other websites (such as www.newyorker.com) display custom fonts correctly on the same browser.
I also tried the following syntax:
#font-face {
font-family: 'almoni-dl';
font-weight: 700; /*(bold)*/
font-style: normal;
src: url('https://assets.kalir.co.il/fonts/almoni-dl-aaa-700.eot');
src: url('https://assets.kalir.co.il/fonts/almoni-dl-aaa-700.eot?#iefix') format('embedded-opentype'),
url('https://assets.kalir.co.il/fonts/almoni-dl-aaa-700.woff') format('woff'),
url('https://assets.kalir.co.il/fonts/almoni-dl-aaa-700.ttf') format('truetype');
}
What else could be wrong?
In the font-family property in css, try typing the actual full name of the font, if that doesn't work, try using the full filename (minus the extension) as the font-family.
IE has known issues finding the font if the font-family name is different than what it expects!

fonts.googleapis is showing different CSS files based on the browser type

insdie my CSS files i am referencing fonts suc as :-
http://fonts.googleapis.com/css?family=Droid+Sans:regular&subset=latin
But now i need to download these CSS and add them to my host, instead of downloading them from google. but the problem i am facing is that when i try to download the related CSS files by access the above link from my IE it downlaod the following :-
#font-face {
font-family: 'Droid Sans';
font-style: normal;
font-weight: 400;
src: url(http://themes.googleusercontent.com/static/fonts/droidsans/v4/s-BiyweUPV0v-yRb-cjciFQlYEbsez9cZjKsNMjLOwM.eot);
src: local('Droid Sans'), local('DroidSans'), url(http://themes.googleusercontent.com/static/fonts/droidsans/v4/s-BiyweUPV0v-yRb-cjciFQlYEbsez9cZjKsNMjLOwM.eot) format('embedded-opentype'), url(http://themes.googleusercontent.com/static/fonts/droidsans/v4/s-BiyweUPV0v-yRb-cjciBsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}
While on firefox it shows the following :-
#font-face {
font-family: 'Droid Sans';
font-style: normal;
font-weight: 400;
src: local('Droid Sans'), local('DroidSans'), url(http://themes.googleusercontent.com/static/fonts/droidsans/v4/s-BiyweUPV0v-yRb-cjciBsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}
So i got lost on which url() i should download ? the woff or the tff ?? or both ?
EDIT
I have replaced this
#import url(https://fonts.googleapis.com/css?family=Karla|Ubuntu);
with
/*#import url(https://fonts.googleapis.com/css?family=Karla|Ubuntu);*/
#font-face {
font-family: 'Karla';
font-style: normal;
font-weight: 400;
src: url('~/Content/fonts/8gO-GQO6h3meAtqRrd890A.eot');
src: local('Karla'), local('Karla-Regular'), url('~/Content/fonts/8gO-GQO6h3meAtqRrd890A.eot') format('embedded-opentype'), url('~/Content/fonts/azR40LUJrT4HaWK28zHmVA.woff') format('woff');
}
#font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 400;
src: url('~/Content/fonts/_tMhxyW6i8lbI7YsUdFlGA.eot');
src: local('Ubuntu'), url('~/Content/fonts/_tMhxyW6i8lbI7YsUdFlGA.eot') format('embedded-opentype'), url('~/Content/fonts/_xyN3apAT_yRRDeqB3sPRg.woff') format('woff');
}
But the fonts effect did not work ? although when using the #import i can see the fonts effect, while when i reference them locally they stopped working.
Thanks
If you do need to use the fonts locally (rather than linking to Google's hosted versions), then they provide a download link on each font's page (in the top right)1.
The download link offers the option to 'Download the font families in your Collection as a .zip file'. If you do that, you'll get all the different versions (.ttf/.eot etc) that are needed for cross-browser #font-face support2.
You should have a good reason for doing so however: linking to the hosted version is simpler, and you'll automatically be using the latest version of each font.
Different browsers require different formats (the multiple src's in your CSS). Again though, if you're not familiar with what's required just stick with linking to Google's hosted files.

HTML/CSS - Using Custom Font / FontSquirrel

I downloaded this font (https://www.google.com/fonts/#QuickUsePlace:quickUse/Family:Underdog) and then used FontSquirrel (http://www.fontsquirrel.com/tools/webfont-generator) with it.
However, I'm not sure where I should place the files in Eclipse...
This was in one of the css files that FontSquirrel generated and I placed it in my CSS file.
#font-face {
font-family: 'underdogregular';
src: url('underdog-regular-webfont.eot');
src: url('underdog-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('underdog-regular-webfont.woff') format('woff'),
url('underdog-regular-webfont.ttf') format('truetype'),
url('underdog-regular-webfont.svg#underdogregular') format('svg');
font-weight: normal;
font-style: normal;
}
FontSquirrel also generated these files:
underdog-regular-demo.html
underdog-regular-webfont.eot
underdog-regular-webfont.svg
underdog-regular-webfont.ttf
underdog-regular-webfont.woff
Would anyone know where I should place these?
Thank you for your help.
You would put those font files somewhere on your web server, then adjust the url path in the CSS to suit. So just as you might upload your background images to an /assets/images/ folder:
background-image: url("/assets/images/foo.jpg");
...you could upload the font files into an /assets/fonts directory and adjust the font squirrel CSS accordingly:
src: url('/assets/fonts/underdog-regular-webfont.eot');
src: url('/assets/fonts/underdog-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('/assets/fonts/underdog-regular-webfont.woff') format('woff'),
url('/assets/fonts/underdog-regular-webfont.ttf') format('truetype'),
url('/assets/fonts/underdog-regular-webfont.svg#underdogregular') format('svg');
Or, if you don't want to edit the CSS, just upload them to the same directory as the CSS file.

#font-face css not working

I'm having trouble with an #font-face declaration and I'm hoping someone can tell me what the problem is.
Here's my #font-face CSS:
#font-face {
font-family: 'MuseoSlab500';
src: url('fonts/Museo_Slab_500-webfont.eot');
src: url('fonts/Museo_Slab_500-webfont.eot?iefix') format('eot'),
url('fonts/Museo_Slab_500-webfont.woff') format('woff'),
url('fonts/Museo_Slab_500-webfont.ttf') format('truetype'),
url('fonts/Museo_Slab_500-webfont.svg#webfontyumMOUTD') format('svg');
font-weight: normal;
font-style: normal;
My font files are all in a folder in the root of my site called 'fonts'. The stylesheet and the html file (it's a one page site) are in the root. I'm looking at the #font-face and it looks no different than declarations I'ved before yet for some reason this one is not working. Can anyone tell me why this is?
Thanks,
Brian
I always put my web fonts folder inside my CSS folder like this:
#font-face{
font-family: 'CartoGothicStd-Bold';
src: url('#font-face/CartoStd-Bold.eot');
src: url('#font-face/CartoStd-Bold.eot?#iefix') format('embedded-opentype'),
url('#font-face/CartoStd-Bold.woff') format('woff'),
url('#font-face/CartoStd-Bold.ttf') format('truetype'),
url('#font-face/CartoStd-Bold.svg#webfont') format('svg');
}
My folder is called #font-face. Give it a go...see if you get the fonts working.
I just noticed you're missing }
Try to use .otf file instead of .ttf
I had also faced this problem. I got it working by replacing to .otf file.

#Font-face not working?

Im having trouble trying to get the font-face style working locally. I know it should work locally as the folder I downloaded from font-squirrel renders correctly.
Ive copy and pasted everything exactly into the same folder structure supplied by fontsquirrel...
CSS
#font-face {
font-family: 'URWClassicoItalic';
src: url('urw_classico_italic-webfont.eot');
src: url('urw_classico_italic-webfont.eot?#iefix') format('embedded-opentype'),
url('urw_classico_italic-webfont.woff') format('woff'),
url('urw_classico_italic-webfont.ttf') format('truetype'),
url('urw_classico_italic-webfont.svg#URWClassicoItalic') format('svg');
font-weight: normal;
font-style: normal;
}
#primary-navigation {font-family: 'URWClassicoItalic'; font-size:2em}
HTML
<div id="primary-navigation">TEST</div>
My font files are all in the root, same directory as my index file.
Any help would be brilliant, thankyou
#font-face urls that are specified in a separate CSS file must have a url relative to this CSS
for example:
src: url('../urw_classico_italic-webfont.eot');
if the CSS-file is one level above the folder, where the font-file is stored.