I know that questions with similar titles already exist, but after reading them, I'm still stuck.
I'm developing a website using Django and serving static files (css and js) with no problem using {% static %} tag. I wanted to use a custom font so put this style tag in my base template. (and it ends up in <head> of the page the way I expect.)
<style>
#font-face {
font-family: IRANSansX !important;
font-style: normal;
font-weight: 400;
src: url({% static 'css/fonts/IRANSansX-Regular.woff2' %}) format('woff2'); /* final value -> url(/static/css/fonts/IRANSansX-Regular.woff2)*/
}
body {
font-family: IRANSansX, sans-serif;
}
</style>
To my surprise, nothing happened. In both Chrome and Firefox, the browser don't event send the request to download the font. I did several checks:
I tested and saw that Django serves the font if I manually create a url by appending the value of url() to my website domain.
I tried to apply the font to other elements, no success.
I tried '' and "" for my font-family name and the url, no success.
I tried another font, no success.
It's strange that bootstrap-icons.woff2 font, which is also of type woff2, is working properly and is loaded by browsers. The only difference is that, it's relatively addressed by bootstrap-icons.css file.
It was all to !important at the end of font-family definition. I removed it and everything worked!
It's strange that if !important is not a part of the font-face and actually breaks its functionality, how come my IDE (Pycharm) didn't even trigger a warning.
Related
I know it's been asked before, only none of the offered solutions seems to function for me. Sorry, I must be doing something wrong, but what?
I'm testing with Chilanka, because it's distinctive enough so I can see at a glance whether I've got this font or whether the browser defaulted to something resembling it.
I downloaded it and copied the Chilanka-Regular.ttf file both to /usr/share/fonts and to the directory containing my index.html file. Now Chilanka functions with kolorpaint (it didn't before), so the .ttf file seems OK.
I tried to include it in the web page :
<link href="Chilanka-regular.ttf">
<style>
/*#font-face {
font-family: Chilanka-regular;
src: url('Chilanka-regular.ttf');
} */
#font-face {
font: Chilanka-regular;
font-family: 'Chilanka-regular';
src: local("Chilanka-regular.ttf");
url('Chilanka-regular.ttf') format('truetype'),
font-weight: normal;
font-style: normal;
}
.chilanka-text {
font-size: 20px;
/*font-color: green; This syntax is within the <p> tag*/
color: green;
/* font: Chilanka-regular;
font-family: Chilanka-regular; */
font-family: 'Chilanka';
font-weight: normal;
font-style: normal;
}
</style>
Then I have :
<div name="chilanka-text" class="chilanka-text" id = "chilanka-text">
blabla
</div>
I shift/reload the page (firefox, but I would like it to function on all browsers)
The colour changes but no Chilanka.
Please help
Chilanka is available as an Google Font. See: https://fonts.google.com/specimen/Chilanka#standard-styles
Here you can select the font types you want to use and they will give you the correct options to load the fonts in you website <head> with <link or #import. Note that how more fonts and font styles (regular, bold etc) you add the longer it takes the visitor to load you website the first time.
Use CSS rules to specify families like
h1,h2,h4 {
font-family: 'Chilanka', cursive;
}
Local (Offline environment)
If you really need to use the fonts from your local files because it runs offline also check if the url to the font file is correct <link href="Chilanka-regular.ttf"> or <link href="/Chilanka-regular.ttf"> or <link href="/fonts/Chilanka-regular.ttf"> etc.
Check if the font can load
There can be multiple things going on. your first course of action should be to check weither the font is loading.
depending on how you host/serve your website. there should be an attempt by the browser to request the font. And a response from the server.
you can check this using your browser inspector/developer tools
#font-face {
font-family: myInvalidFont;
src: url("https://www.w3schools.com/cssref/sansation_light.woff");
}
#font-face {
font-family: myFirstFont;
src: url("https://fonts.gstatic.com/s/fascinate/v21/z7NWdRrufC8XJK0IIElS07zR.woff2");
}
.font {
font-family: myFirstFont;
color: green;
}
.font-invalid {
font-family: myInvalidFont;
color: darkred;
}
<h1>The #font-face Rule</h1>
<div class="font">this works, so i oooks kinda fancy</div>
<div class="font-invalid">this doesn't load due to cors</div>
Once you're certain that the font is loading, you can start to debug the css, or debug why it's not being served.
Include some information of the way you're serving content.
The server technologies differ (apache/iis/kestrel/php). sometimes there's build steps involved (like webpack).
Make absolutely sure the font is loading
The browser should attempt to load the file.
If its not showing up in the dev-tools network tab.
Move your #font-face rule to the top of your css file. Check if the css 100% valid.
If it does show up, but not as a 200 ok. Resolve the error code displayed, it might be CORS, might be an incorrect path, etc.
See this gif: it might help you find the issue.
I was in the same situation 4 months ago I tried to download a font and run it locally before (google font lobster) and it didn't work, Try to use the URL provided or the CDN provided instead of downloading it and running it locally.
Note: They aren't new. Just "not supported", somehow.
I'm trying to make simple controls for a element on my website, along the lines of a simple "mute" or "not mute" control.
However, I haven't been able to find any fonts capable of handling the newer Unicode symbols, such as the speaker symbols (🔇 to 🔊, or 🔇 to 🔊) which are broken (🔇 🔈 🔉 🔊) even on Stack Overflow, yet still - They can be found in the Unicode character listings and are somehow able to be displayed in my PDF reader and Internet Explorer, but not Chrome.
This is the first paragraph (above), from my perspective, with the characters broken:
Anyway, here's my snippit of the code. (The video controls are in plain view for testing purposes). The actual element has a z-index: -1000 attached to it; used as a video background.
function mute() {
document.getElementById("jsControl").setAttribute ("href", "javascript:unmute()");
document.getElementById("jsControl").innerHTML = "🔈";
document.getElementById("videoPlayer").volume = 0.0
};
function unmute() {
document.getElementById("jsControl").setAttribute ("href", "javascript:mute()");
document.getElementById("jsControl").innerHTML = "🔊";
document.getElementById("videoPlayer").volume = 1.0
};
<html>
<head>
<style>
body {
font-family: [Insert font names and attempts];
}
</style>
</head>
<body>
<video id="videoPlayer" src="..."></video>
<a id="jsControl" href="javascript:unmute()">🔈</a>
</body>
</html>
I've tried different web-safe fonts, such as Arial, Times New Roman and Tahoma and Sergoe UI.
Question: Is there any font that can be used that supports those unicode characters that works on Chrome?
(Even a font that has these remapped onto regular letters like Wingdings will be accepted as they can be attached using #font-face { ... }.)
Also, please don't complain about the broken Javascript (if it is not written correctly) - I can fix that myself. It's the font; text (missing symbols) that I'm worried about.
Update: Viewing the icons in Internet Explorer works fine. Seems to be a chrome-and/or-other-browser sort of issue.
Since you would use just a few symbols in a special context, rather than as text characters, the practical choice is to use images.
However, if you really want to use characters, there is a very limited set of fonts to consider. According to fileformat.info, U+1F507 is supported only by Quivira, Symbola, Segoe UI Symbol, and Segoe UI Emoji. The latter two are proprietary fonts, available only in relative new versions of Windows, and as different variants (e.g., my Windows 7 lacks Segoe UI Emoji and has a variant of Segoe UI Symbol that lacks the character).
Thus, the only way that works reasonably is to use either Quivira or Symbola as a downloadable font, via #font-face. As they are rather large fonts, and you would need to serve them in different font formats for cross-browser functionality, this approach is hardly a practical option (unless you have many other special characters, possibly used in text, that also need such special fonts).
You shouldn't assume the person viewing your site has necessary fonts installed. Instead, you should add an external font. Find a font that has an appropriate licence and contains the required symbols (for example http://emojisymbols.com/), and add it to CSS as with #font-face declaration:
/*
EmojiSymbols Font (c)blockworks - Kenichi Kaneko
http://emojisymbols.com/
*/
#font-face {
font-family: "EmojiSymbols";
src: url('EmojiSymbols-Regular.woff') format('woff');
text-decoration: none;
font-style: normal;
}
.controlIcon {
font-family: "EmojiSymbols";
}
I am trying to load a custom font in my website. In my style.css I have the following attributes declared
#font-face {
font-family: billabong;
src: url('./fonts/billabong.ttf');
font-weight: bold;
}
h1.header {
font-family: billabong;
}
And in my html I have the following code;
<h1 class="header">Welcome to</h1>
However, it seems to be defaulting to some other font type so i assume it cannot find it.
The font is back one directory from my css file, and inside a folder called fonts, have i provided the correct path for it to find it? If this is not the issue does anyone know what I am doing wrong?
try adding Apostrophes in the font-family attribute.
font-family: 'billabong';
Also use more formats. not all browsers support ttf.
read more about that here:http://socialcompare.com/en/comparison/browser-fonts-support-comparison
You could export ttf to webfont here: http://www.font2web.com/
I think the only problem here is your directory.
Try first putting your font file all the way up to the same directory as your html file.
Then try this code:
#font-face {
font-family: billabong;
src: url(billabong.ttf);
font-weight: bold;
}
h1.header {
font-family: billabong;
}
If this doesn't work try putting your font-weight:bold; into the header class see if that helps.
If it works then put it back to where you had it. I hate to guess but as i understand you have a fonts file inside your css file. I am assuming that your html file is one directory higher than your css file. In that case you can say
#font-face {
font-family: billabong;
src: url(css/fonts/billabong.ttf);
font-weight: bold;
}
h1.header {
font-family: billabong;
}
You don't need to use apostrophes for your attribute or source url i have made many websites using custom fonts and haven't seen a problem with compatibility and such.
In any case i would always refer to the w3schools website they explain it the best way:
http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp
Hopefully that helps.
I have some custom icons that I want to use as a webface font:
However, I can't seem to get them displayed.. All I get to see is the corresponding letter ('a' and 'f'). As shown here You'll also see the working example of the font 'socialico'
Use #font-face In the past I had lots of troubles with font-face but if you type it out right it works fine:
#font-face {
font-family: 'Custom Font Name';
font-style: normal;
font-weight: 400;
src: url(linktofont.com/font.ttf) format('truetype');
}
Replace "Custom Font Name" with what you would like your font to be named when using CSS. and replace "linktofont.com/font.ttf" with the path to the font.
EDIT
Sorry, I read that wrong, I found the problem. If you look at your #import
#import url (http://pastebin.com/raw.php?i=sc4rCApa);
You have a space between "url" and your path, so reaplace it with:
#import url(http://pastebin.com/raw.php?i=sc4rCApa);
I had the same issue - and all my syntax was correct. I was instructed by a friend that it may be the font itself that was broken or incorrect. Here's how it was resolved:
(1) Used original font downloaded from fontfabric.com
(2) Went to www.fontsquirrel.com to generate a new font kit... including the css
(3) Uploaded fonts generated from FontSquirrel
(4) Replaced my CSS with the css generated from FontSquirrel for the #font-face section
(5) Updated the name of the font that is called for later in the CSS
and that was it.... worked like a charm!
I have a standalone HTML document I want to distribute, without any external dependencies. I'm using a non-standard font in this document that only some of my users will have installed.
For those users that do not have the font installed, I am including a copy of the font in an embedded SVG document at the top of the <body>. (I'm using a one-glyph font for this example, the real document is using a complete font.)
<svg style="display: none;"><defs>
<font id="MyFontElement">
<font-face font-family="MyFont" />
<glyph unicode="A" horiz-adv-x="950" d="M0,0L0,100L100,100L100,200L0,200L0,300L100,300L100,400L200,400L200,500L300,500L300,600L400,600L600,600L600,500L700,500L700,400L800,400L800,300L900,300L900,200L800,200L800,100L900,100L900,0L600,0L600,100L700,100L700,200L800,200L800,300L100,300L100,200L200,200L200,100L300,100L300,0L0,0M300,400L600,400L600,500L300,500L300,400Z" />
</font>
</defs></svg>
SVG fonts do not look as nice as ordinary fonts, so I only want the SVG font to be used if the font is not installed locally. If the font was defined in an external SVG document, I could use it at a lower priority than the locally-installed font like this: (fiddle)
<style>
#font-face {
font-family: "My Font";
src: local("My Font"), url("fonts.svg#MyFontElement") format("svg");
}
</style>
<p style="font: 3em 'My Font';">
Alphabet
</p>
Unfortunately, none of the obvious variations seem to work for a font in the current document: (fiddle)
src: local("My Font"),
url("./#MyFontElement") format("svg"),
url("./#MyFontElement"),
url("#MyFontElement") format("svg"),
url("#MyFontElement");
Even without a #font-face declaration, the font is already available in the document as MyFont, the font-family specified in the <font-face />. However, this will be used at a higher priority than a native font named MyFont, so it is not an solution.
I hoped that I might be able to refer to it as local("MyFont")... (fiddle)
src: local("My Font"), /* local */
local("MyFont"); /* embedded */
...but that doesn't work either.
I could give the embedded font a different name and use it at a lower priority, style="font-family: LocalFont, EmbeddedFont", but I'm allowing users to import snippets from local files into the document and those local files will refer to the font only by the standard name. It would be possible to rewrite these references when they're imported, but I don't like that solution.
How do I refer to an SVG font embedded in the current document from a #font-face declaration?
Convert the font to a data URI and embedded it in the CSS declaration: (fiddle)
<style>
#font-face {
font-family: "My Font";
src: url("data:application/octet-stream;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCIgPgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+CiAgPGZvbnQgaWQ9Ik15Rm9udEVsZW1lbnQiPgogICAgPGZvbnQtZmFjZSBmb250LWZhbWlseT0iTXlGb250IiAvPgogICAgPGdseXBoIHVuaWNvZGU9IkEiIGhvcml6LWFkdi14PSI5NTAiIGQ9Ik0wLDBMMCwxMDBMMTAwLDEwMEwxMDAsMjAwTDAsMjAwTDAsMzAwTDEwMCwzMDBMMTAwLDQwMEwyMDAsNDAwTDIwMCw1MDBMMzAwLDUwMEwzMDAsNjAwTDQwMCw2MDBMNjAwLDYwMEw2MDAsNTAwTDcwMCw1MDBMNzAwLDQwMEw4MDAsNDAwTDgwMCwzMDBMOTAwLDMwMEw5MDAsMjAwTDgwMCwyMDBMODAwLDEwMEw5MDAsMTAwTDkwMCwwTDYwMCwwTDYwMCwxMDBMNzAwLDEwMEw3MDAsMjAwTDgwMCwyMDBMODAwLDMwMEwxMDAsMzAwTDEwMCwyMDBMMjAwLDIwMEwyMDAsMTAwTDMwMCwxMDBMMzAwLDBMMCwwTTMwMCw0MDBMNjAwLDQwMEw2MDAsNTAwTDMwMCw1MDBMMzAwLDQwMFoiIC8+ICAgIAogIDwvZm9udD4KPC9kZWZzPjwvc3ZnPgo=") format("svg");
}
</style>
<p style="font: 3em 'My Font';">
Alphabet
</p>
There's one caveat: you can't use an ID specifier (#MyFont) with a data URI like this. Therefore you can only have a single font in the encoded file, rather than having multiple and referring to them individually. (Not that you'd want to; duplicating the data for multiple embedded fonts in the declaration for each font would be a huge waste of space.)
Specify the local font name first in the css, then the embedded font name:
p {
font-family: MyFontLocalName, MyFontEmbeddedName;
}
http://jsfiddle.net/gilly3/xX6Bv/5/
If the MyFontLocalName is installed on the user's computer, that font will be used, otherwise MyFontEmbeddedName will be used.