I have a website A with css and custom font which all work fine. Now I'm trying to refer to this css from my website B. Everything works fine css-wise, except that the font is not applied. When I look under the network tab of Firefox console, everything is loaded correctly, including the custom font.
Here is how I declared the font in my css:
#font-face {
font-family: 'Raleway Light';
src: url('http://website-a.com/fonts/Raleway-Light.ttf');
}
* {
font-family: 'Raleway Light', sans-serif;
}
I also tried to refer to the .ttf with relative path src: url('../fonts/Raleway-Light.ttf'); but it doesn't work either.
Any insight?
PS.: I tried different browser and cleaning the cache already.
Firefox does not allow cross-domain font embedding. See this similar question for various solutions.
.ttf is for windows fonts and true type fonts(.ttf) does not work on some browsers.
If you want use a font on web you better have the font in formats .ttf, .woff, .eot all and use them all to support all browsers.
And I do not agree this speak
Firefox does not allow cross-domain font embedding
Because i tested that previously and worked.
And in relative src please see if your #font-face style is in the html file or is in the external css file because each one has its src. Some times it make us confused.
Related
I was browsing a website earlier with a family of fonts that I didn't recognise as being available for web.
You can view them on this page http://www.etq-amsterdam.com/collection/mid-1-white
According to inspect element, the fonts are:
#font-face {
font-family:AvenirNextLTPro-Demi;
src:url(fonts/28C41E_0_0.eot);
src:url(fonts/28C41E_0_0.eot?#iefix) format("embedded-opentype"),url(fonts/28C41E_0_0.woff)format("woff"),url(fonts/28C41E_0_0.ttf) format("truetype") }
#font-face {
font-family:AvenirNextLTPro-Regular;
src:url(fonts/28C41E_1_0.eot);
src:url(fonts/28C41E_1_0.eot?#iefix) format("embedded-opentype"),url(fonts/28C41E_1_0.woff) format("woff"),url(fonts/28C41E_1_0.ttf) format("truetype") }
I tried using the "font-family:AvenirNextLTPro-Regular;" line as I would do with other typefaces but it didn't work. Is this easily achievable or are they likely to have bought a license to use the font (if that's even possible)?
The font-face tag loads the fonts from files, in this case, from http://www.etq-amsterdam.com/css/fonts/28C41E_0_0.woff, so you would need to also have those fonts loaded on your server in order to access them from the CSS
Although having read some articles about font-family, I still don't have a deep understanding how it works. So I'm hoping this question may help me better understand how font-family works.
I see some beautiful fonts on a website, the CSS of one of them is font-family:'Futura Today Bold',Arial,sans-serif. I try to copy it to my website, but it doesn't work. It seems the elements affected by this website are displaying default font. Here is a side question: how do I check what font an element is actually using? can I do it with javascript?
And the main question is, how do I use this 'Futura Today Bold' font on my website?
The problem with the font you intend to use is that it will not be installed on every user's device, which is why the fallback font (Arial) is specified in the website you checked.
You need to use web fonts if you wish to use a font that is not available on the user's device. Here's an example CSS code to do that:
#font-face {
font-family: 'Futura Today Bold';
src: url('http://path/to/futuratodaybold.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
url('http://path/to/futuratodaybold.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}
After including the above lines in your CSS code, the font can be applied by the CSS rule font-family:'Futura Today Bold' in your stylesheet.
Also note that as Christina pointed out in a comment, you should not use fonts that you do not have licensing rights to use.
Answering your other question as to how to find out which font is currently being applied, you can use your browser's developer tools to find that out. Here's a screenshot of how it can be done in Firefox.
Source.
Basically you need to have the font actually included in the bundle when the page loads to have access to it. You can easily do this once you have the file by using this html code in your <head>
<link href='font-name' rel='stylesheet' type='text/css' />
or like this into your css
#import('font-name');
After you have done this all you have to do is set the font like you did before
Update
This is needed to define the font name once you have the ttf. Put this in CSS
#font-face {
font-family: 'Futura Today Bold';
src: url('font-name.ttf');
}
If you look at this file:
http://t.whstonecabinet.com/templates/rt_chimera/css-compiled/demo-dee78feaa65fff084c041f8862da3088.css
Then at the beginning you can see this line which is what create the font and if you look in your file tree under fonts/Roboto-Regular-webfont.eot then you can find the eot file:
#font-face {
font-family:'Roboto';
src:url('../fonts/Roboto-Regular-webfont.eot');
src:url('../fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/Roboto-Regular-webfont.woff') format('woff'), url('../fonts/Roboto-Regular-webfont.ttf') format('truetype'), url('../fonts/Roboto-Regular-webfont.svg#Roboto') format('svg');
}
There are some sets of fonts that are available in the website by default. If you want to use any other fonts then you must specify the same in your css. Normally font files are available in ttf or otf format.
For example if you want to use Futura Today Bold you should first download the font file from this page.
Next, you can specify in your css, the font path that you intend to use. Visit this link to know more
If you trying to use a font in your website and it doesn't show, in many cases you just doesn't have the font available.
So google and download it (if allowed). To use it in your online websites, you have to provide the font, if you're not sure, wether everybody has this font or not. Providing can be done via #font-face. But keep copyrights in mind.
When a browser renders a page, it uses the fonts from left to right. If the most-left is not available, it goes one step to the right and so on. You will often see something like sans or sans-serif at the right and, to provide a fallback, where the browser just pick a default font of that type.
To see which font is currently used, you can right click that part (in Firefox or Chrome) and inspect the element. Look for the font section. There you can see which font is used. If you see multiple fonts, the most left/top value should be applied.
You would need to actually have the font file in your project or you can download the file using #font-face in your css.
There are quite a few services that offer fonts for download online. Some are free to download (Google Fonts, others are paid (Typekit).
This link explains a bit of how it is with fonts on the web today.
I'm currently finishing up a website but I have a weird problem. I have a font imported from Google, in my CSS file.
#import url(http://fonts.googleapis.com/css?family=Josefin+Slab);
Then I just do a normal font-family call on the body tag like this.
body{
font-family:'Josefin Sans', sans-serif;
}
It works fine in Chrome, Firefox, Exploder, Safari, Opera on Windows and whatever else I've been able to try it on.
I was at school yesterday between classes working on it, the computers in the lab are all Linux machines, I opened up the website with Firefox on Linux and the font didn't load on any of them. It defaulted to the sans-serif.
I also just checked on Safari on my Mac at work and it doesn't load there either. It defaults to sans-serif.
Is this a problem with the font file types on Google and would I have to go import the eof and ttf and all those in order to fix this? or is it something else?
The problem is you are importing Josefin Slab and are calling Josefin Sans.
#import url(http://fonts.googleapis.com/css?family=Josefin+Slab);
body{
font-family:'Josefin Slab', sans-serif;
}
That should work.
I would suggest uploading the font to http://www.fontsquirrel.com/ using the webfont generator.
This will then give you the fontface css and also different font file types for cross browser compatability.
My site here won't pick up 'proxima nova' otf in Chrome and can't understand why.. Here's the CSS:
#font-face {
font-family:'Proxima Nova';
src: url("/Fonts/ProximaNova-Regular.otf") format('opentype');
}
Any ideas much appreciated.
Just encountered the same problem, you don't need to specify format for otf fonts, just remove the last part of the src attribute:
#font-face {
font-family:'Proxima Nova';
src: url("/Fonts/ProximaNova-Regular.otf");
}
This comment helped me to sort this problem out:
https://github.com/facebook/create-react-app/issues/2609#issuecomment-311231425
different browsers like different font file formats, for example IE will only acknowledge .eot and i think im right in saying that webkit browsers prefer .ttf files.
Use Squirrel's font face generator to create all the various font files you need, it will also give you an example of how to include them all properly in your css font face declarations
If you see 404 error for this font request in browser console, the problem is not in the browser but rather on the server side. The solution is to add mime type for .otf file extension in IIS on the web server. Since otf is a pretty new format, it's not available in the default list of mime types in IIS serevr; you have to explicitly add one.
Best for chrome is base64
src: url(data:application/x-font-woff;charset=utf-8;base64
http://www.fontsquirrel.com/fontface/generator
co generate this
I am using the following CSS to define a custom font on a webpage:
#font-face
{
font-family:zapfino;
src:url("zapfino.ttf");
}
Next, I am defining an id that uses it:
#custom_font
{
font-family:zapfino;
font-size:18px;
}
I've tested the page on Safari and Chrome and it works fine. However, in firefox the font is not showing up, it is reverting to a default. Sorry if this is a repost but I have searched on StackOverflow and cannot find the answer! Does anyone know why this is happening? see it here: www.moosecodes.com (its still under construction! please pardon the mess!)
Each browser only reads one file type for webfonts. Unfortunately, they are all different file formats. In order for the font to display correctly in all browsers, you will need 4 different types of font file- TTF, WOFF, SVG & EOT. Your code will look something like this:
#font-face {
font-family: 'Zapfino';
src: url('Zapfino.eot');
src: url('Zapfino.eot?#iefix') format('embedded-opentype'),
url('Zapfino.woff') format('woff'),
url('Zapfino.ttf') format('truetype'),
url('Zapfino.svg#SansumiRegular') format('svg');
}
That code is based of the stylesheet included with FontSquirell fonts.
FontSquirell has a converter, but you do need to check your license. Zapfino is a commercial font owned by Adobe(?) and as far as I know using their fonts with #font-face is a violation of the fonts EULAs.
TypeKit offers commercial fonts for use with #font-face for a fee that complies with the foundries EULAs.
jlego is right - you should check out the FontSquirrel site - they have an excellent tool for building your kit and converting your files for you, AND you must always be sure that the font is legal to use on your site.
However Firefox and Chrome should both support TTF, which is the format you are using.
In researching your problem on your site, what I've found is that the font is not rendering properly in any browser I check in. What I've found is while the stylesheet is referencing the right file location, but the font file appears to be corrupted. I would suggest getting a new font file new replace the one you are using.
I had the same problem.... the answer by jlego was usefull to me.
My font was recognized in Chrome and IE.
In FF my TTF wasn't recognized untill I added the format('truetype') in my css file.