I have a font file that I want to use called Gotham Light Regular. How would you access that file to change the font? Below is what I have now, but it isn't working.
.name{
font-family: myFirstFont;
}
<style>
#font-face {
font-family: myFirstFont;
src: url(fonts/Gotham Light Regular/Gotham Light Regular.otf);
}
</style>
<div class= "name">
<h1>Hello</h1>
<h2>Bye</h2>
</div>
Put font files to web accessible location and put proper CSS for it.
You can download this font from internet (e.g. cufonfonts) or find your font files on computer (example).
Then put CSS:
#font-face {
font-family: 'GothamLight';
src: url('/fonts/Gotham-Light.eot');
src: url('/fonts/Gotham-Light.otf') format('opentype'),
url('/fonts/Gotham-Light.eot?iefix') format('embedded-opentype'),
url('/fonts/Gotham-Light.woff') format('woff'),
url('/fonts/Gotham-Light.ttf') format('truetype'),
url('/fonts/Gotham-Light.svg#gothamlight') format('svg');
}
body {
font-family: GothamLight;
}
Related
I'm trying to import a CSS font but unfortunately it's not working and I'm really unsure why.
The font in the filesystem called 'deadjim.ttf' It is placed inside my main public_html and yes it is the correct path, visiting the path downloads the file.
#font-face {
font-family: 'deadjim';
src: url('http://url.com/deadjim.ttf'); /*URL to font*/
}
I've tried clearing my cache but this hasn't worked either. Apparently it's working on Safari but I have no means of checking having a windows PC
Make sure that you're calling the font like normal; #font-face doesn't apply any styles to the html, it just defines the font.
#Define your font
#font-face {
font-family: 'deadjim';
src: url('http://url.com/deadjim.ttf'); /*URL to font*/
}
#Will apply the font as default on the entire page
html, body{
font-family: 'deadjim';
}
To be sure your font works in all browser / most platforms, you will need to do something similar to this (with all formats provided) - it's not enough to just have the .ttf-file.
Here's an example of including FontAwesome:
#font-face {
font-family: 'fontawesome';
src: url('fontawesome-webfont.eot?v=4.7.0');
src: url('fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),
url('fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
url('fontawesome-webfont.woff?v=4.7.0') format('woff'),
url('fontawesome-webfont.ttf?v=4.7.0') format('truetype'),
url('fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
I am making a basic informational website. In my CSS file I have the following:
#font-face {
font-family: "Nilland";
src: local('Nilland.ttf');
}
body{
background: #FFF;
font-size:14px;
font-family: Nilland;
}
The .ttf file is in the same directory as the index.html file. Why is this not working?
You need to include all types of your font instead of only .ttf, should be something like:
#font-face {
font-family: 'Nilland';
src: url('Nilland.eot');
src: url('Nilland.eot?#iefix') format('embedded-opentype'),
url('Nilland.woff') format('woff'),
url('Nilland.ttf') format('truetype'),
url('Nilland.svg#Nilland') format('svg');
}
Put the ttf files in the folder where the css file is.
The path in the css file is relative to the css-file, not the html file
Try specifying the complete path
#Felix is right although; try separate block for normal and bold font. Use svg and other formats for multiple browser compatibility and path may be issue not to work.
#font-face {
font-family: 'Nilland';
src: url('../fonts/Nilland.ttf') format('truetype'), url('fonts/Nilland.svg') format('svg');
src: url('../fonts/Nilland.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "Nilland";
src: url("../fonts/Nilland.ttf") format('truetype');
font-weight: bold;
font-style: normal;
}
I'm using two #font-face in CSSreset.css exactly like each other, and just one of them works!
This is the style code:
#font-face {
font-family: 'B Mitra';
src: url('./fonts/B Mitra.eot');
src: url('./fonts/B Mitra.eot?#iefix') format('embedded-opentype'),
url('./fonts/B Mitra.woff') format('woff'),
url('./fonts/B Mitra.ttf') format('truetype'),
url('./fonts/B Mitra.svg#webfont') format('svg');
}
#font-face {
font-family: 'BBCNassim';
src: url('./fonts/BBCNassim.eot');
src: url('./fonts/BBCNassim.eot?#iefix') format('embedded-opentype'),
url('./fonts/BBCNassim.woff') format('woff'),
url('./fonts/BBCNassim.ttf') format('truetype'),
url('./fonts/BBCNassim.svg#webfont') format('svg');
}
The second #font-face not working well. this is how I use them in my stylesheet:
#Download > a {
font-family: 'BBCNassim';
}
This is not working and shows "tahoma" font. the wierd part is, if the "BBCNassim" font not load correctly, the default browser font shows.
So, when I use font-family: 'BBCNassim';, the font will be tahoma.
This is the "B Mitra" font witch shows and load correctly:
#Map_Eshterak {
font-family: 'B Mitra';
}
SCREENSHOT: http://i.imgur.com/UXmSOmJ.jpg
The problem is not from the font; because if i copy "B Mitra" fonts, and change the name to "BBC Nassim", the same thing will happen.
this is my directory : http://i.imgur.com/xV6R8lw.png
Could it be the CSS selectors you're using? Does it work if you change your code to:
#Map_Eshterak {
font-family: 'BBCNassim';
}
And as a side-note, once you get this working you may want to give a font stack, in case your #font-face fonts don't load properly. (For example, font-family: 'BBCNassim', Helvetica, sans-serif; will show Helvetica is BBCNassim isn't available)
I created a webpage with the custom font, I can see the fonts applied in the browser but its not applied in the printed page.
I followed the below way for printing :
The fonttest.css file contains the following content :
#font-face {
font-family: "myriad";
src: url("../fonts/myriad.otf") format('truetype');
}
#font-face {
font-family: "serifa-bold";
src: url("../fonts/serifa_bold.ttf") format('truetype');
}
#font-face {
font-family: "serifa";
src: url("../fonts/serifa.ttf") format('truetype');
}
#font-face {
font-family: "AlexandriaFLF";
src: url("../fonts/AlexandriaFLF.ttf") format('truetype');
}
#font-face {
font-family: "AlexandriaFLF-Bold";
src: url("../fonts/AlexandriaFLF-Bold.ttf") format('truetype');
}
#font-face {
font-family: "AlexandriaFLF-BoldItalic";
src: url("../fonts/AlexandriaFLF-BoldItalic.ttf") format('truetype');
}
#font-face {
font-family: "AlexandriaFLF-Italic";
src: url("../fonts/AlexandriaFLF-Italic.ttf") format('truetype');
}
In the HTML file the CSS file is linked as below :
<link rel='stylesheet' type='text/css' media='all' href='resource/css/fonttest.css' />
I was printing the following below lines :
<p style="font-family:myriad;color:#000000">myriad-abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</p>
<p style="font-family:serifa-bold;color:#000000">serifa-bold-abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</p>
<p style="font-family:serifa;color:#000000">serifa-abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</p>
<p style="font-family:AlexandriaFLF;color:#000000">AlexandriaFLF-abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</p>
<p style="font-family:AlexandriaFLF-Italic;color:#000000">AlexandriaFLF-Italic-abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</p>
<p style="font-family:AlexandriaFLF-Bold;color:#000000">AlexandriaFLF-Bold-abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</p>
<p style="font-family:AlexandriaFLF-BoldItalic;color:#000000">AlexandriaFLF-BoldItalic-abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</p>
please help me ?
Try to put your stylesheet media attribute to print :
<link rel='stylesheet' type='text/css' media='print' href='resource/css/fonttest.css' />
If you don't find a way to do this, there is an alternative.
You could use wkhtml2pdf and make a printable PDF file.
Maybe you may need to include more fonts formats in your css.
Something like this:
#font-face {
font-family: 'XXXXX';
src: url('XXXXX.eot');
src: url('XXXXX.eot?#iefix') format('embedded-opentype'),
url('XXXXX.woff') format('woff'),
url('XXXXX.ttf') format('truetype'),
url('XXXXX.svg#XXXXX') format('svg');
font-weight: normal;
font-style: normal;
}
the url https://bugzilla.mozilla.org/show_bug.cgi?id=468568 which explains why print is not working for custom fonts, so I tested in firefox-20.0a1.en-US.win32.installer.exe. The fonts with ttf and otf are applied exactly as it should be.
I downloaded some otf fonts and then converted them to eot using: https://onlinefontconverter.com but when I view the site in IE8, the fonts do not show (they show in Chrome, Firefox, Opera, Android). Something must be wrong with either my code or the eot. Does anyone know what's wrong?
(Download Roboto here: http://www.fontsquirrel.com/fonts/roboto )
(Convert it here: https://onlinefontconverter.com )
STYLES.CSS
#font-face
{
font-family: RobotoCondensed;
src: url("Roboto-Condensed.eot");
}
#font-face
{
font-family: RobotoCondensed;
src: url("Roboto-Condensed.ttf");
}
.myDiv
{
font-family: RobotoCondensed, Arial, Helvetica;
font-size: 10px;
color: #e8e8e8;
}
index.html (relevant code)
<div class="myDiv">Some font in here that shows incorrectly as Arial!</div>
The stylesheet and font are in the same folder.
Thanks for all the help. It looks like the problem was the font converter. The eot file was not being recognized as valid by IE. Thanks to "Joel Eckroth" for suggesting I try other converters.
Try this
#font-face
{
font-family: 'RobotoCondensed';
src: url('Roboto-Condensed.eot');
src: url('Roboto-Condensed.eot?#iefix') format('embedded-opentype'),
url('Roboto-Condensed.woff') format('woff'),
url('Roboto-Condensed.ttf') format('truetype'),
url('Roboto-Condensed.svg#') format('svg');
}
.myDiv
{
font-family: RobotoCondensed, Arial, Helvetica;
font-size: 10px;
color: #e8e8e8;
}
I had a problem and no amount of tweaking and web research helped
Until I edited head tag to include meta
<head>
<meta http-equiv="Content-type" content="text/html;charset=utf-8"/>
</head>
The meta tag solved problem and every variation worked!
Variation 1
<style type="text/css">
#font-face
{
font-family: 'SolaimanLipi';
src: url('SolaimanLipi.eot');
src: local('SolaimanLipi'),url('SolaimanLipi.ttf') format('truetype');
}
#font-face
{
font-family: 'Yogesh';
src: url('CDACOTYGN.eot');
src: url('CDACOTYGN.ttf') format('truetype');
}
</style>
Variation 2
<style type="text/css">
#font-face{
font-family: 'solaimanlipi';
src: url('cdacotygn-webfont.eot');
src: url('cdacotygn-webfont?#iefix') format('embedded-opentype'),
url('solaimanlipi-webfont.woff') format('woff'),
url('solaimanlipi-webfont.ttf') format('truetype'),
url('solaimanlipi-webfont.svg#webfont') format('svg');
}
#font-face {
font-family: 'cdacotygn';
src: url('cdacotygn-webfont.eot');
src: url('cdacotygn-webfont.eot?#iefix') format('embedded-opentype'),
url('cdacotygn-webfont.woff') format('woff'),
url('cdacotygn-webfont.ttf') format('truetype'),
url('cdacotygn-webfont.svg#svgFontName') format('svg');
}
</style>
We think complex but often needle in haystack is elsewhere head meta tags
You may try and view source
http://www.weloveseppa.com/jnc/jncTryBangla.html
http://www.weloveseppa.com/jnc/try1/jncTryBangla.html
Works in all the browsers including the old IE8
Try
font-family: "RobotoCondensed", Arial, Helvetica;
The quotes should force it as your primary option