I'm struggling with web fonts, I'm using DejavuSans to display Georgia ქართული text.
Unfortunately it doesn't get applied and I'm out of ideas.
#font-face {
font-family: 'DejaVuSans';
src: url('font/DejaVuSans.eot');
src: url('font/DejaVuSans.eot?#iefix') format('embedded-opentype'),
url('font/DejaVuSans.woff') format('woff'),
url('font/DejaVuSans.ttf') format('truetype'),
url('font/DejaVuSans.svg#bolnisiregular') format('svg');
font-weight: normal;
font-style: normal;
}
body
{
font-family: 'DejaVuSans' !important;
}
I downloaded it from here: http://www.fonts2u.com/dejavu-sans.font
And I applied it here: http://mac.idev.ge:800/breakmedia/
Chrome inspector tells me that css is correctly overwritten, but where are the fonts themselves??
Urls are relative to the folder containing the css file. So your url to the font needs to be absolute and point to the root e.g:
/font/DejaVuSans.eot
or relative and point to one folder up:
../font/DejaVuSans.eot
etc depending on where your stylesheet and fonts are located.
Related
I wrote my custom font in JSON theme's file and made report in iframe.
There are span and iframe tags in my test website. My span see custom font and show it correctly, but, unfortunately iframe no.
My DevTools in Chrome show that span and iframe's text use my custom font.
in index.css i have next font-face:
#font-face {
font-family: 'XXSansUI-Regular';
src: url('./fonts/XXSansUI-Regular.eot');
src: url('./fonts/XXSansUI-Regular.eot?#iefix') format('embedded-opentype'),
url('./fonts/XXSansUI-Regular.woff2') format('woff2'),
url('./fonts/XXSansUI-Regular.woff') format('woff'),
url('./fonts/XXSansUI-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: auto;
}
I tried to use preload attribute for link tag and also change font-display, but it isnt working ;(
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;
}
Here is the website in question: https://www.cocokeyorlando.com
IE8 is not rendering my custom font-faces when I first go to the page. There are two font-faces that should be loading for the slider text. If I reload/refresh the page nothing changes.
However, when I click on the logo to go back to the homepage, they start working.
Here is the code I am using to load them.
#font-face {
font-family: 'neoretrodrawregular';
src: url('fonts/NEORD.eot');
src: url('fonts/NEORD.eot?#iefix') format('embedded-opentype'),
url('fonts/NEORD___-webfont.woff') format('woff'),
url('fonts/NEORD___-webfont.ttf') format('truetype'),
url('fonts/NEORD___-webfont.svg#neoretrodrawregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'blackjackregular';
src: url('fonts/black_jack.eot');
src: url('fonts/black_jack.eot?#iefix') format('embedded-opentype'),
url('fonts/black_jack-webfont.woff') format('woff'),
url('fonts/black_jack-webfont.ttf') format('truetype'),
url('fonts/black_jack-webfont.svg#blackjackregular') format('svg');
font-weight: normal;
font-style: normal;
}
Any help is greatly appreciated!
Make sure you fonts/black_jack.eot file is there, and the CSS is all correct.
The site is not rendering well in IE11, or in IE8 mode. The site works fine in Chrome.
Check out these...
Font Face not working in IE8 as expected
I coded a website on my mac, and i used a custom font. I defined the custom font with this font-face rule:
#font-face
{
font-family: gnuolane;
src: url('../fonts/gnuolane.otf'),
}
The problem is that the font is not loaded on any windows version of any browser. On my mac, on Safari/Chrome/FF is working perfect.
This is the website.
And this is how it is supposed to look like, when font-face is working correctly:
Thanks
LE:
I generated this code and all those files from fontsquirrel.com. Still not working. I tried with both '../fonts/gnuolane....' and '/fonts/gnuolane....'
#font-face {
font-family: 'gnuolane';
src: url('../fonts/gnuolane_rg-webfont.eot');
src: url('../fonts/gnuolane_rg-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/gnuolane_rg-webfont.woff') format('woff'),
url('../fonts/gnuolane_rg-webfont.ttf') format('truetype'),
url('../fonts/gnuolane_rg-webfont.svg#gnuolane_rgregular') format('svg');
font-weight: normal;
font-style: normal;
}
Still not working tho'..
Move all your font files (the actual fonts I mean) to the same folder as your CSS file...
Then use this block of CSS. Tell me if it works. I sense it's a path issue...
#font-face {
font-family: 'gnuolane';
src: url('gnuolane_rg-webfont.eot');
src: url('gnuolane_rg-webfont.eot?#iefix') format('embedded-opentype'),
url('gnuolane_rg-webfont.woff') format('woff'),
url('gnuolane_rg-webfont.ttf') format('truetype'),
url('gnuolane_rg-webfont.svg#gnuolane_rgregular') format('svg');
font-weight: normal;
font-style: normal;
}
try this
#font-face {
src: local('gnuolane'), url('/path_to/gnuolane.otf') format('truetype');
}
#font-face {
font-family: "England Hand";
src: url("fonts/englandhand.eot?#iefix") format("embedded-opentype"),url("fonts/englandhand.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
I have the above as the font style. Its included in the body of the page. I have not added the font family to a div and it renders there ohk. When I create a clone of this div and assign it another position and id, the font stops rendering.
There is also no error in the console. This error only occurs on IE 8 and works fine on IE 9 .
SOLUTION
Look out for js errors. Surely there will be one in there leading to the issue
I think your missing some prefixes for the ie8/ie9 support. Your code needs to look something like:
#font-face {
font-family: 'deutsch_gothicnormal';
src: url('deutsch-webfont.eot');
src: url('deutsch-webfont.eot?#iefix') format('embedded-opentype'),
url('deutsch-webfont.woff') format('woff'),
url('deutsch-webfont.ttf') format('truetype'),
url('deutsch-webfont.svg#deutsch_gothicnormal') format('svg');
font-weight: normal;
font-style: normal;
}