I'm working with html and CSS, and I need to load a font which is in my local storage, but it gives me the following error:
downloadable font: download failed
I'm using font-face to try to load it, but it doesn't work. I'm working with mozilla-firefox for linux mint. Hope anyone can help me
This is what i've tried:
#font-face {
font-family: 'qebab';
src: local('qebab'), url('fonts/qebab-webfont.ttf')format('truetype');
}
and then I try to use it in my class
.important-font {
font-family: 'qebab';
}
Related
So, I have a .ttf font (plus others) that I'm using for a website, with the code formatted as follows:
#font-face {
font-family: DEP;
src: local("fonts/DEP/DEP.ttf") format("truetype");
src: local("fonts/DEP/DEP.woff") format("woff");
src: local("fonts/DEP/DEP.otf") format("opentype");
src: url(https://codehs.com/uploads/98892640bda8f3fe5654e3c6d20d5c8c) format("truetype");
}
I know it's good to have a fallback link in case the local files fail to load, but I noticed when I was editing the code offline that the local files weren't working. I triple-checked the folder structure, tested the code (minus the external link) on the main site to see if it was just my html previewer, etc etc. I don't understand why it won't link properly.
My code is also on github if you want to investigate this further. Thanks!
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
A specific font with format .ttf is not loading on the webserver. Its an adobe font called Edwardian Script that ive been using from the adobe typekit.
I have tried to load this font on the live website but it doesn't seem to want to load.
I have tried changing file paths, i have added the format("truetype") as suggested answer in another SO Question but this didn't work either.
I had thought about loading it from google fonts but it costs money here and we already have this font in our libraries.
Ive been emptying caches and retrying on a separate computer.
I might note that it does show in Dreamweaver so I've been using a separate computer to confirm if its corrected.
I feel its a file path issue but i don't seem to be getting the right path.
Its hosted with cPanel in a public_html folder within a folder called fonts
public_html > fonts > Edwardian-Script > Edwardian-Script-ITC.ttf
CSS
#font-face {
font-family: Edwardian Script ITC;
src: url('/fonts/Edwardian-Script/Edwardian-Script-ITC.ttf') format("truetype");
}
.logo-text {
font-family: Edwardian Script ITC;
text-transform: none;
font-weight: 100;
font-kerning: none;
font-stretch: normal;
letter-spacing: normal;
}
HTML
<h3 class="logo-text"> Header Title </h3>
Expected to see loaded font from the server fonts folder
Maybe you need to add MIME Types on your server.
Log in to cPanel.
In the ADVANCED section of the cPanel home screen, click MIME Types
I am using Nunito Sans for the English version of a website and saw here: https://localfonts.eu/?s=Nunito+Sans&post_type=product
that there is also a Bulgarian version of the font, which is exactly what I need.
I tried downloading and adding it into my project folder.
#font-face {
font-family: NunitoSans;
src: url('fonts/NunitoSans-Light.ttf');
}
body {
font-family: NunitoSans;
}
Unfortunately that did not have any effect.
Replace the existing source URL with the new URL you created by
uploading each file.
By default, the source URL location is set within the downloaded Web
Font Kit. It needs to be replaced by the location on your server.
Ref:
https://www.pagecloud.com/blog/how-to-add-custom-fonts-to-any-website
How do I add octicons as font similar to the way atom did it?
Whilst inspecting the atom codebase I discovered that they are using the octicon icon set as font (font-family: 'Octicons Regular' & content: "\f0a4"). How would I implement the set in such a way to my own project? Is there a public release?
The following picture is a screenshot of the atom src showing the styles. (Ctrl+Shift+I)
There are no available CDNs for Octicons Regular so you have to get your own WebFontkit. Then you have to add the fonts using #font-face parameter.
Follow the below steps to add custom fonts to your HTML:-
1. Download the Octicons font:- The Octicons Regular fonts are available in this link. Download the TrueType Font file format (.ttf).
2. Create a WebFont Kit:- Upload the downloaded (.ttf) file to WebFontkit Generator.. Then download the optimal WebFontkit.
3. Extract and Upload the font files to your hosted site:- Edit the stylesheet.css file to update the url. For instance if you have url like, www.example.com. So your .css file after update woluld look like:-
#font-face {
font-family: "Octicons";
src: url("https://example.com/css/fonts/Octicons.woff") format("woff"),
url("https://example.com/css/fonts/Octicons.woff2") format("woff2")
}
4. Use Octicons font in your CSS declarations:- As you have added css fonts to your site you can use this in your CSS declarations. For e.g,
p {
font-family: Octicons;
font-weight:normal;
font-style:normal;
}
I have never used a custom font before and have been trying to add it into my application. I have downloaded this font onto my computer and have made a separate file called 'Font' and in that i have put the font file.
I went into my CSS and have wrote this code:
#font-face {
font-family:'Open Sans';
src: url('../Font/OpenSans-Light.ttf');
}
The font isn't working at all and I'm wondering why it is not working?
Any ideas?
I am applying it to different sections, I should of said:
.title {
font-family: 'Open Sans';
font-size: 25px;
margin: 0 auto;
color: #52a3cc;
text-align: center;
}
I get this error message in IE Developer Tools:
"#font-face failed OpenType embedding permission check. Permission must be Installable."
You code should work if you can download http://www.yoursite.com/CorrectPath/OpenSans-Light.ttf in a browser.
If you cannot download it, you need to add at MIME types like SethG suggested.
Other thought
Open Sans is available via Google Fonts, so you do not have to host it by yourself.
I've had issues with this in the past. If you're using IIS Express to test this, you might have issues. For some reason, when IIS doesn't have a MIME type with which to serve content, it won't serve it. Make sure that whatever version of IIS you're using, be it IIS Express or IIS, has a MIME type for .ttf files.