@font-face not working
Double period (..) means you go up one folder and then look for the folder behind the slash.
For example:
If your index.html is in the folder html/files
and the fonts are in html/fonts
, the .. is fine (because you have to go back one folder to go to /fonts
). Is your index.html in html
and your fonts in html/fonts
, then you should use only one period.
Another problem could be that your browser might not support .eot font-files.
Without seeing more of your code (and maybe a link to a live version of your website), I can't really help you further.
Edit: Forget the .eot part, I missed the .ttf file in your css.
Try the following:
@font-face {
font-family: Gotham;
src: url(../fonts/gothammedium.eot);
src: url(../fonts/Gotham-Medium.ttf);
}
CSS @font-face not working?
Best practices is to always use a relative paths not absolute ones, to ensure it works for any domain.
From your code, I'm assuming you are having the following structure:
- Root
- index.html
- add_ons
- style_sheets
- style.css
- sources
- fonts
- Pier.woff2
- Pier.woff
- Pier.ttf
- fonts
- style_sheets
You could simply update your paths in the CSS from:
@font-face {
font-family: 'Pier';
src: url('add_ons/sources/fonts/Pier.woff2') format('woff2');
src: url('add_ons/sources/fonts/Pier.woff') format('woff');
src: url('add_ons/sources/fonts/Pier.ttf') format('truetype');
}
To:
@font-face {
font-family: 'Pier';
src: url('../sources/fonts/Pier.woff2') format('woff2');
src: url('../sources/fonts/Pier.woff') format('woff');
src: url('../sources/fonts/Pier.ttf') format('truetype');
}
@font-face is not working for CSS with correct format, generation, and directory path
I found out what was the issue:
@font-face {
font-family: "Sevastopol_Interface";
src: url("Fonts//Sevastopol-Interface//Sevastopol-Interface.ttf");
}
The issue is that my path was not quite right. Backslashes are indeed correct but I needed two of them instead of one as I am on a windows machine. Not something like linux where you would only need one. Thanks to @Syed Muhammad Moiz and @Kusal Darshana for leading me to that conclusion.
@font-face not working in CSS
Try to include all the glyphs from here. Including only ttf
doesn't work in all browsers. Change your stylesheet to reflect something like this, which is the standard way:
@font-face {
font-family: 'myFont';
src: url('tiza-webfont.eot');
src: url('tiza-webfont.eot?#iefix') format('embedded-opentype'),
url('tiza-webfont.woff') format('woff'),
url('tiza-webfont.ttf') format('truetype'),
url('tiza-webfont.svg#TizaRegular') format('svg');
font-weight: normal;
font-style: normal;
}
And make sure you are adding this CSS file on the same directory as all your font files exist. And use the CSS to link here.
So if you have the font files (ttf
, svg
, woff
, etc.) in the directory: myserver/Fonts/
, then you need to add the CSS file like tiza.css
in myserver/Fonts/tiza.css
.
Make sure the above CSS is accessible publicly by a web browser through HTTP like:
http://mydomain/myserver/Fonts/tiza.css
And include it in your HTML like:
<link rel="stylesheet" href="http://mydomain/myserver/Fonts/tiza.css" />
The main thing is that you must make sure you are clear of any 404
or 4xx
errors on your console. Something like this is what that makes it not work:
@font-face not working at all
We couldn't figure out another way around, as it appeared all of our settings on Amazon were fine. Instead, we just embedded the font definition itself into a data-uri call, as seen below. Much of the font definition has been omitted to size constraints of answers in StackOverflow, but this should give you a good idea of our approach.
@font-face {
font-family: "PFDinTextPro-Light";
src: url("233cd7_2_0-webfont.eot");
}
@font-face {
font-family: "PFDinTextPro-Light";
font-style: normal;
font-weight: normal;
src: url("233cd7_2_0-webfont.eot?#iefix") format("embedded-opentype"), url("data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAFq4ABEAAAAAmrQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABgAAAABwAAAAcYqvy...dRcDMyMXA5M2mM+m4LqJvRPKYQVy2CKhHBYgh9USyuGAaJOCaeMESnLMgHAYN3BBDecFinIdZ9LeyOxWBuTyALm8+XAuN5DLEwjn8oGM5Kr/zwAX4Qcq4HsC5woAufy1MG7kBhFtANGLRQMAAVB7j+oAAA==") format("woff"), url("233cd7_2_0-webfont.ttf") format("truetype");
}
@font-face not working, fonts seems not to be loaded
The issue you are having is because you are using ~ to select your home directory.
Try to upload the fonts somewhere else and reference to the files either with absolute URL path:
url ('http://www.anywebsite.com/Content/fonts/BYekan.eot');
or with relative path for example:
url ('Content/fonts/BYekan.eot');
In your case the issue it's because you cannot reach the directory containing the font files because CSS does not understand the symbol ~ for referencing your home directory.
@font-face not working locally but works when linked externally
local()
accepts locally installed fonts' system identifier, not path to file, see: https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face#specifying_local_font_alternatives
Related Topics
Firefox 1 Pixel Bug with Border-Collapse, Workaround
How to Apply CSS to HTML5 Custom Elements
How to Draw a Checkmark/Tick Using CSS
Add a Text Suffix to <Input Type="Number">
Textarea's Rows, and Cols Attribute in CSS
How to Position a Div in the Middle of the Screen When the Page Is Bigger Than the Screen
Line-Height as a Percentage Not Working
Finding "Equivalent" Color with Opacity
Why Is Gmail Blocking CSS in Emails
How to Make a Twitter Bootstrap Modal Slide from the Side or Bottom Instead of Sliding Down
Twitter Bootstrap: Center Text on Progress Bar
Background:None VS Background:Transparent What Is the Difference
R Shiny - Background of Sidebar Panel