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 ;(
Related
I'm at my wits end with this problem. I'm trying to include a font. The CSS file is located at project/css/.
My font is located at project/fonts/iconfont/.
I have the following font files in that folder (even though I'd probably only need woff):
icons.eot
icons.svg
icons.ttf
icons.woff
This is how I try to include my font:
#font-face {
font-family: icons;
src: url(../fonts/iconfont/icons.woff) format('woff');
font-weight: normal;
font-style: normal;
}
However I can't use the font. Checking with Chrome developer tools it doesn't even load. What am I doing wrong here?
Try to link all fonts format in #font-face selector and call font-family with custom name in quotation marks.
/*--- Define a custom web font ---*/
#font-face {
font-family: 'YourWebFont';
src:
url('../fonts/iconfont/icons.woff') format('woff'),
url('../fonts/iconfont/icons.ttf') format('ttf'),
url('../fonts/iconfont/icons.eof') format('eof'),
url('../fonts/iconfont/icons.svg') format('svg');
}
/*--- Use that font on the page ---*/
body {
font-family: 'YourWebFont', sans-serif;
}
Good luck!
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'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.
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
#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;
}