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.
Related
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'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';
}
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
My MVC4 website uses a .woff font, which is stored locally within my Visual Studio project (RootFolder/Content/font/myfont.woff).
When I debug locally, it works fine (meaning, I can see the desired font).
I then publish to the remote server, test it and the font isn't doing what it should be doing. I can see the relevant text, but with the 'default' font
I logged onto my remote server, and have verified the files are there!
I know the font I'm using is not installed on the server, but that I don't think matters from what I've read.
My CSS is simply
#font-face {
font-family: corsive;
src: url("font/MT.woff") format('woff');
}
h1,h3 {
font-family: 'corsive';
font-size: 1.2em;
}
If I visit mysite.com/content/font/MT.woff then the browser tries to open it.
My site doesn't use SSL, so it's HTTP only.
The same issue persists in FireFox, Chrome and IE
How can I debug this issue?
IIS has security settings that by default deny access to any file extension that has not been defined in MIME types. As the direct link to the font file doesn't seem to work, but causes a 404, this might be the case.
Normally a .woff file extension has no MIME type set, so check the server configuration.
I'm currently developing a browser extension for Chrome and Safari. To be more specific, a tooltip appears when the user hovers over certain keywords. Currently, i'm using #font-face with a link to certain fonts hosted on my website. The problem is - they take a long time to load. Is it possible to include fonts locally in the browser extensions instead of linking to them externally? Can you just package the fonts (or even images?) with the other extension files?
Yes you can, it is quite common. Just make sure you have permissions to distribute all fonts/images that you did not author. Owning a personal license doesn't count.
Every extension is saved locally, whether the code that makes it function requires internet access and server-side scripting or not. A Chrome extension is just a directory saved as a crx archive, which is literally a renamed zip file. The directory, along with the necessary Developer info and metadata, is just like that of any other site, with html, and css, javascript, fonts, images, etc. Obviously if your extension does use server-side scripts, those need to be hosted. I'm sure you know most of this if you are building extensions, but I am elaborating so beginners can follow along.
Generally speaking, fonts are tiny files (rarely over 200k unless they are grunge type, or you are embedding way more characters than necessary) and so if they are self-hosted and taking too long to load, the problem is likely with your host. If I were you, I would use Google Fonts which don't need to be self-hosted and are free.
There are several ways
to embed them, no matter which you option you choose. But here is an example of how to link to fonts stored locally within the .crx file, <style> tags go between the <head> tags:
<style>
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url("fonts/OpenSans-Regular-webfont.woff") format("woff");
}
#font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 400;
src: local('Open Sans Italic'), local('OpenSans-Italic'), url("fonts/OpenSans-Italic-webfont.woff") format("woff");
}
</style>
Obviously, all paths are relative to the html file in your crx directory.