I moved my html file "index.html" to my html folder named 'html' and now my css rules importing font-face are not working except for one. I have three one is directly from google api while the other two are on my computer. before i moved my html file they were all working fine. I have tried several suggestions form people I know marking it "!important," or even changing quotations and capitalization. I have made sure that each file's foont-family is directl the same name as the file and yet nothing unless i remove the the html file from the folder to its original position.
Please help. I would really appreciate it.
#font-face {
font-family: still time;
src: url ('../fonts/still time.ttf');
}
#font-face {
font-family: "The Next Font" !important;
src: url('www.dafont.com/the-next-font.font');
}
#font-face {
font-family: "Vintage Avalanche" !important;
src: url('../fonts/Vintage Avalanche.otf');
}
Since you moved your html to a different file location, it cannot access the right file anymore.
Change the link/path you are using to access files.
if you put the html inside a folder, try using "../" at the beginning of the path/link to signify that you want to go up, one folder from where you are right now.
The ../ signifies the fonts are trying to be loaded from the folder one level up from the folder where the file resides. Initially, you used one ../, meaning the fonts folder and the folder your index.html file were in were siblings:
root/fonts/[YOUR FONTS]
root/[SIBLING]/index.html
../fonts/ attempts to navigate out of the folder that index.html is in, and then into the fonts folder, where in finds the fonts. Now that you have a secondary html folder, Your HTML file is now one level deeper:
[ROOT]/fonts/[YOUR FONTS]
[ROOT]/[SIBLING]/html/index.html
So in order to reference the fonts, you need to move up two levels rather than one in order to find the fonts folder, by adding an extra ../ in order to move a directory higher:
#font-face {
font-family: still time;
src: url ('../../fonts/still time.ttf');
}
#font-face {
font-family: "The Next Font" !important;
src: url('www.dafont.com/the-next-font.font');
}
#font-face {
font-family: "Vintage Avalanche" !important;
src: url('../../fonts/Vintage Avalanche.otf');
}
The www.dafont.com font worked, because you provided an absolute URL, rather than a relative one. Also, note that the font-face is relative to the CSS, so if you use an external CSS file, they will be relative to the CSS file, not the HTML file!
EDIT
Based on your comment, you have your CSS in an external CSS file, using the following structure:
practice/fonts/[YOUR FONTS]
practice/css/style.css
practice/html/index.html
As I mentioned with the relative paths, the fonts are loaded relative to the CSS. practice/css/style.css correlates to http://[SITE]/practice/css/style.css. Your fonts are at http://[SITE]/practice/fonts/[FONT.EXT], so you need to go one level up:
#font-face {
font-family: still time;
src: url ('../fonts/still time.ttf');
}
#font-face {
font-family: "The Next Font" !important;
src: url('www.dafont.com/the-next-font.font');
}
#font-face {
font-family: "Vintage Avalanche" !important;
src: url('../fonts/Vintage Avalanche.otf');
}
If anything, your fonts shouldn't have worked before. Considering they did work, you might be able to reference the fonts by removing the leading ../:
#font-face {
font-family: still time;
src: url ('fonts/still time.ttf');
}
#font-face {
font-family: "The Next Font" !important;
src: url('www.dafont.com/the-next-font.font');
}
#font-face {
font-family: "Vintage Avalanche" !important;
src: url('fonts/Vintage Avalanche.otf');
}
Alternatively, to ensure they work no matter where your CSS / HTML files are located, you could reference them relative to the root as such:
#font-face {
font-family: still time;
src: url ('/fonts/still time.ttf');
}
#font-face {
font-family: "The Next Font" !important;
src: url('www.dafont.com/the-next-font.font');
}
#font-face {
font-family: "Vintage Avalanche" !important;
src: url('/fonts/Vintage Avalanche.otf');
}
Hope this helps :)
Related
I have downloaded the font and added it to the Atom text editor but it doesn't seem to work...
<style type="text/css">
#font-face {
font-family: "avocado";
src: url("AvocadoCreamy.ttf");
src: url("AvocadoCreamy.otf");
}
h1 {
color: hsl(93, 100%, 51%);
text-align: center;
font-family: "avocado";
}
</style>
In your case, while using the #font-face tag, maybe the address to the URL provided is wrong or incomplete. Try the full address if the font file is locally downloaded.
The font file can be directly written to URL if it exists in the same directory as the CSS file.
Also, I would recommend the use of #import tag to import fonts in CSS.
#import url('/*YOUR URL TO FONT HERE*/');
Assuming you've copied the font file into your root folder (where your index.html file usually is). Instead of a '.ttf' or '.otf', '.woff' or '.woff2' work best for web fonts so consider using that if available. Also make sure the name used i 'src' is exactly the same as the file name in your root folder.
see https://css-tricks.com/snippets/css/using-font-face/
also How to include a font .ttf using CSS?
#font-face {
font-family: "avocado";
src: url("AvocadoCreamy.ttf") format("truetype");
font-style: normal;
font-weight: 400;
}
i want to add a custom font to my html page, but it does not work, i tried everything possible, checked other questions, trying to solve it their way, but nothing.
the font is in the same folder as my html file(the css is in the html file)
In html css i wrote:
#font-face {
font-family: regular;
src: url("8bitoperator_jve.ttf");
//src: local("8bitoperator_jve.ttf"); i tried this too
}
body {
background-color: #000;
color: #FFF;
font-family: regular;
}
The src attribute of #font-face specifies the resource containing the font data. This can be:
url: a URL to a remote font file location;
local: the name of a font on the user's computer.
In your case, you are passing a URL to local. Instead, you should use url:
#font-face {
src: url('8bitoperator_jve.ttf');
}
If you want, you can also use both. But remember to give precedence to local, i.e.:
#font-face {
src: local('Name of your font here'), url('8bitoperator_jve.ttf');
}
You should find a specific font in local, but a font file in url. I mean, the local font doesn't need any path or file extension whereas a font file need it. If you want to target a local files first you can try like that:
#font-face {
font-family: regular;
src: local("8bitoperator_jve"),url("8bitoperator_jve.ttf") format('truetype');
}
Also you can try loading the font-face from an external CSS file.
I have recently been trying to embed font to my website. I don't get it to work, i have watched and read tutorials. I wan't to embed a font called "Ubuntu Light" in ttf format. This is what i have been trying:
#logBtn{
font-family: 'UbuntuLight';
}
#font-face{
font-family: "UbuntuLight";
src: url("CSS/Ubuntu-L.ttf");
}
And the file in the folder: Treeview of project
I'm almost new to this, i've been coding HTML and CSS in maybe 4 months now.
I have been stuck at this before, and that made me cancel my project, because i gave up. But i don't want to give up again. So i would really appreciate some help! :)
You can embed a font quick and easy by using this code:
#font-face {
font-family: 'Name';
src: url('Font.ext');
font-weight: 400;
font-style: normal;
}
Where Font.ext should be replaced with your font file and its extention (file type) e.g.
src: url('Ubuntu-L.ttf');
And the following font-weight and font-style should be referencing the specific font choice.
The url(...) path is relative to the stylesheet.
Therefore, because your stylesheet is in the CSS folder you don't need to include that in the url:
#font-face{
font-family: "UbuntuLight";
src: url("Ubuntu-L.ttf");
}
I am trying to add a local font to a site I am testing. It is called "AcrosstheRoad.ttf" and can be found in my assets/fonts/ folder. I am doing the following to try to read it into the CSS file:
#font-face {
font-family: 'AcrosstheRoad';
src: url('assets/fonts/AcrosstheRoad.ttf') format('truetype');
}
And I want to use it as a certain header type so I am using
h3{
font-family: 'AcrosstheRoad';
color: #333;
}
But unfortunately the font is not loading in. Does anyone know what I'm doing wrong?
Thanks!
Christina
First add a slash before assets:
(('/assets/fonts/AcrosstheRoad.ttf'))
That may or may not be the problem, depending on where your CSS file is, and how your website is structured.
If the above doesn't work, convert the font to .woff2 and .woff (try using this: http://www.fontsquirrel.com/tools/webfont-generator). The reasoning behind this is that some browsers are really picky. Change your CSS to:
#font-face {
font-family: 'AcrosstheRoad';
src: url('/assets/fonts/AcrosstheRoad.woff2') format('woff2'),
url('/assets/fonts/AcrosstheRoad.woff') format('woff');,
url('/assets/fonts/AcrosstheRoad.ttf') format('truetype');
}
I have been attempting to install a font and use it in my CSS and have been unsuccessful at this. I would like to figure out where am I going wrong. I uploaded the .tff file in the same folder as the CSS file and added to the updated my css file in the appropriate manner.
here is a copy of what I have in my css:
#font-face
{
font-family: ImpactLabel;
src: url('ImpactLabel.tff');
}
p.change
{
font-family:ImpactLabel;
color: #A70C1E;
font-size:3em;
}
Here is my html file:
<p class="change">Text</p>
Check this ->
#font-face {
font-family: ImpactLabel;
src: url('ImpactLabel.ttf'), <-- Check if the path is correct (ttf not tff)
url('ImpactLabel.eot'); /* IE9 */
}
Then just call on your class:
.change {
font-family: 'ImpactLabel';
}
try this http://www.fontsquirrel.com/tools/webfont-generator
#font-face {
font-family: 'primelight';
src: url('prime_light-webfont.eot');
src: url('prime_light-webfont.eot?#iefix') format('embedded-opentype'),
url('prime_light-webfont.woff') format('woff'),
url('prime_light-webfont.ttf') format('truetype'),
url('prime_light-webfont.svg#primelight') format('svg');
font-weight: normal;
font-style: normal;
}
p.change{
font-family: "primelight", Verdana, Tahoma;
}
creat a repository in your website : fonts/prime/
put the prime files inside make sure you have something like this :PrimeLight.otf
read more here I need Prime font for my web site
Upload it to the FontSquirrel Webfont Generator and use the code and files it gives you. Problem solved!
FontSquirrel will generate several different formats of the font which are loaded selectively by different browsers and devices (and thus will give you the broadest compatibility).
Edit: Apparently this font is actually on FontSquirrel already, so all you need to do is click here and download the webfont kit from them.