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.
Related
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.
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 am trying to upload a custom font to a webpage I am working on and cannot figure out why it won't work. I know it won't work in the snippet at the font file is not uploaded, but given the fact that the path to the file is correct and the css file is linked to the html document shouldn't it work properly?
#font-face {
font-family: 'customFont';
src: url(../fonts/BebasNeueBook.otf) format("otf");
}
.text{
color: rgb(87, 87, 87);
font-family: customFont !important;
}
<span class="phone text">T. 1 877 412 0888</span>
Honestly your code seems about right... but only .otf file.
Try dragging your otf font into this site: https://transfonter.org/ which will give you all the webfont formats in one download and the css needed to make it work.
If it doesn't show up after that, then something else is up
I have some issue with font_face
In css:
#font-face{
font-family: 'Optima';
src: url('fonts/OPTIMA_0.woff') format('woff');
font-weight: normal;
font-style: normal;
}
html{
font-family: 'Optima';
}
I use $_SERVER['REQUEST_URI'] for MVC routing, like:
site.com/main - call common page 'main'
site.com/contacts - call common page 'contacts'
site.com/services - call catalog page 'services'
site.com/services/serviceA - call concrete catalog page 'serviceA'
site.com/services/serviceB - call concrete catalog page 'serviceB'
....
But when I clear browser cache on page reload, I got font path in request uri, like:
site.com/application/css/fonts/OPTIMA_0.woff, not site.com/services/serviceA
In browser address bar I got correct uri
And the google fonts works fine, but i need this one..
Looks like font not load properly on page reload, but it applied to page style.
So the question is: how can I fix this?
It should consider the font file(OPTIMA_0.woff) as a static file just like the css or js file you used.
If your static directory is like this:
|-index.html
|-css/
|----/main.css
|-fonts/
|-----/OPTIMA_0.woff
You can use the relative path in css file, assuming the file called main.css.
#font-face{
font-family: 'Optima';
src: url('../fonts/OPTIMA_0.woff') format('woff');
font-weight: normal;
font-style: normal;
}
Sorry, it was my fault, wrong file name)
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.