I want to use Gotham font for my website which is not a web-safe font so I have the font sitting in the directory called 'gotham':
index.html
style.css
Gotham/Gotham-Light.otf
Here's what my CSS file looks like in the part that sets the font:
p.gotham-thin{font-family:"Gotham-Light";}
#font-face {
font-family: Gotham-Light;
src: url('Gotham/Gotham-Light.otf') format('opentype');
}
here's what index.html does:
<p style="margin-top:140px; font-size:54px;" class="gotham-thin">ABOUT DIALOGIC</p>
but the Gotham font is only working on my computer in Google Chrome since I have the font installed locally, but when I run a VM that doesn't have the font installed then it will just use Tahoma font instead.
Is the problem that I'm using the OTF font file type?
Here are my steps to have the font working:
Font face first in css (font code on top of master css)
Have the type/format of font - EX: src: url(Gotham.ttf) format('truetype')
Also multiple fonts to support all browsers like the comment replied you got.
Make sure your host (local or not) has the MIME type for these fonts
Related
My site's text is 'Cooper Black' as dictated by in my CSS. When viewed in Android Chrome browser i see that the text is default and not Cooper Black.
I'm assuming my font is not preloaded, anything i can do?
.sitetext-white {
font-family: 'Cooper Black';
color: white;
}
Cooper Black is not what we call a Web Safe Font, because it is not found on a high percentage of OS's. Even then, font's like Arial are only found on Windows machines so they need to have a fallback.
The font-family property should hold several font names as a "fallback" system, to ensure maximum compatibility between browsers/operating systems. If the browser does not support the first font, it tries the next font.
Start with the font you want, and end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available:
If you want to use a non-standard font, we have what we call Font Face.
With the #font-face rule, web designers do no longer have to use one of the "web-safe" fonts.
In the new #font-face rule you must first define a name for the font (e.g. myFirstFont), and then point to the font file(s).
If you want to find a nice font to use with #font-face, I would suggest you head over to Font Squirrel and use the Webfont Generator.
How to best set up your #font-face syntax can be found on this article by Paul Irish from Google:
#font-face {
font-family: 'Graublau Web';
src: url('GraublauWeb.eot?') format('eot'), url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}
This is the Fontspring #font-face syntax. I’ll circle back to why this is the best possible solution but let’s first review the other techniques’ weaknesses. Of course, the problem at the center of this is that IE needs an .eot font, and the other browsers must take a .ttf or .otf.
If your application is on the web, you can also use Google Fonts which has a very nice library, and means that all you need to do is link to it in your website.
I only want to use a font (and have the browser download it) if the OS the browser is on doesn't have that font built in. Is this possible?
Currently, I define the font with #font-face but this causes the broswer to download the font automatically. I only want that to happen if that font is not already on the system.
In the #font-face, specify a local source, e.g.
#font-face {
font-family: Open Sans;
src: local('Open Sans'), url('../fonts/open-sans.woff') format('woff');
}
Note that users may have broken local fonts.
i remember my IT teacher saying something about if i wanted to download my own font and put it on my website i will need to upload the font file as well. Thats straightforward but if i wanted to host my website how would i go about this?
Thanks
The way you control the fonts used in you HTML is through CSS. To use a custom font, you must first define it in the CSS like so:
#font-face {
font-family: myFirstFont;
src: url(somefont.otf);
}
After defining it, you can use it by applying it in other CSS like so:
div {
font-family: myFirstFont;
}
The font files that are generally used are TrueType (.ttf) or OpenType (.otf). There are other types that a proprietary, such as *.eot (Internet Explorer).
You will need to upload these font files along with the other files such as .html, .css, .js etc.
There are few ways to implement font on a website, but first I would strongly recommend reading few articles as using font-face, base64 embedding fonts in css and Getting started with Google fonts. I am sure everything will be clear than.
In order to make add costum font support for all type of browser then you should firstly convert the costum font to other font formats like eot, woff, etc. There are a couple of online converters that do that (they will autogenerate actualy the css rules to add to your site.
#font-face {
font-family: 'icomoon';
src:url('fonts/icomoon.eot?-jvpy8e');
src:url('fonts/icomoon.eot?#iefix-jvpy8e') format('embedded-opentype'),
url('fonts/icomoon.woff?-jvpy8e') format('woff'),
url('fonts/icomoon.ttf?-jvpy8e') format('truetype'),
url('fonts/icomoon.svg?-jvpy8e#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
This is work in progress, but I've uploaded the code here
http://crea8tion.com/ChristmasMessage/index.html
I've downloaded and placed the font MerryXmas.ttf into the root directory where my index html document is held.
In css I've added
#font-face{
font-family: "MerryXmas";
src: url('MerryXmas.ttf');
}
h4 {
font-family: MerryXmas;
}
But the font should look like this http://www.dafont.com/merry-xmas.font but you will see it doesn't. The site is built using a foundation 5 framework, but I've removed the style link at the moment to make sure that wasn't impacting the font.
From using Google console as far as I can see the font is being referenced correctly, just not sure what I'm over looking?
Change src: url('MerryXmas.ttf'); to src: url('../MerryXmas.ttf'); and try again
the font path must be relative to the CSS file
I m getting a problem while embedding a font in my web site i m using a css3 rule of font selector code is
#font-face {
font-family:'VoltaEFTU-Regular';
src: url(/fonts/VoltaEFTU-Regular.ttf) format("truetype");
}
.sample { font-family: 'VoltaEFTU-Regular'; font-size: 10em; }
I put my volta font in truetype format in fonts folder of my website folder but its not working
my html code is :
<div class="sample">
typetrigger
</div>
Check if the ttf file is at the location you point to.
You should use firebug to check if your font gets applied in the css.
If yes, your font is not loaded.
If no, then the css class is not applied or overwritten by something else.
Firstly, you need to add comas to the src. It should be:
src: url('fonts/VoltaEFTU-Regular.ttf') format('truetype');
I also would recommend heading over to font squirrel though, and creating a woff and eot files to use along side the ttf.
You can read up on all the different formats here:
http://www.fontsquirrel.com/fontface/generator
Code looks good. I agree with Thariama. Try specifying the path relatively to your CSS instead of absolute (../fonts/VoltaEFTU-Regular.ttf) if your css file is in a subdir of your web root. Also, make sure the browser you are testing in supports #font-face and truetype fonts