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
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 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
I am trying to add 'MyriadPro' font using the #font-face. Here's the fiddle
HTML code:
<h1> Test Heading </h1>
CSS Code:
#font-face {
font-family: 'MyriadPro Regular';
src: url('http://consumemarketing.com/thai-works/MyriadPro-Regular.woff') format('woff'), /* FF 3.6, Chrome 5, IE9 */
url('http://consumemarketing.com/thai-works/MyriadPro-Regular.ttf') format('truetype'), /* Opera, Safari */
url('http://consumemarketing.com/thai-works/MyriadPro-Regular.svg#font') format('svg'); /* iOS */
}
h1{
font-family: 'MyriadPro Regular', sans-serif;
}
I've tried to test this locally, doesn't work, not sure what's missing.
You spelled MyriadPro as MyriaedPro
h1{
font-family: 'MyriadPro Regular', sans-serif;
}
Edited
This is the error being displayed in the console.
Font from origin 'http://consumemarketing.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
and this is the error being displayed in your fiddle.
Mixed Content: The page at 'https://jsfiddle.net/krish7878/27tp756L/' was loaded over HTTPS, but requested an insecure font 'http://consumemarketing.com/thai-works/MyriadPro-Regular.woff'. This request has been blocked; the content must be served over HTTPS.
You are trying to load the fonts locally, which is not allowed as the requested resource doesn't have a header and in your JSFiddle, it doesn't allow the font to load as it is from an insecure origin (http). So instead download the fonts locally and try using them, which works surely.
The website that you are trying to load the font(s) from is blocking the loading of the fonts onto your page as web fonts are subject to Cross-Origin Resource Sharing (CORS). CORS is basically a way for a remote host to control access to certain types of resources, so without the owner of the server that you are trying to access the fonts from modifying their .htaccess file to include the header to allow the CORS, you are unable to utilize these fonts from that server.
More info on CORS can be found here if you want to learn some more.
The simplest thing to do would be to download the fonts you have specified by placing the URL you used in the #font-face property in your browser and then putting them in the folder where your site's folder, and modifying the #font-face URL's to direct to your local folder.
For example if you were to download the fonts to your site's folder in a subfolder called /fonts, you would modify the #font-face src to the following:
#font-face {
font-family: 'MyriadPro Regular';
src: url('fonts/MyriadPro-Regular.woff') format('woff'), /* FF 3.6, Chrome 5, IE9 */
url('fonts/MyriadPro-Regular.ttf') format('truetype'), /* Opera, Safari */
url('fonts/MyriadPro-Regular.svg#font') format('svg'); /* iOS */
}
Apart from avoiding your issue, the other thing is that by storing the files locally, it greatly reduces the loading time for the user as it is not relying on the external server to provide the files.
Hope this clears everything up.
When I run my project locally on Visual Studio 2013, Font Awesome Icons work. However when deployed they are absent.
When run from the server, the IE developer tools shows the Css coming in but there is NO CALL to the fonts. No 404 error! No 403 error! Nothing. It's like the Css is skipping over the #font-face declaration because it does not even try to call the EOT file.
Here are the facts:
Mime Types are all added to IIS 7.0 (eot, svg, woff, woff2, ttf)
The File structure to css is -- fonts > font-awesome > css
The File structure to fonts is -- fonts > font-awesome > fonts
#font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.3.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'),
url('../fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'),
url('../fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'),
url('../fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'),
url('../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular')
format('svg'); font-weight: normal;font-style: normal;
}
There's really not enough here to say for sure, but if I had to hazard a guess, I'd imagine you're including Font Awesome in a bundle, and the bundle path is breaking the font references.
The bundle path, i.e. ~/bundles/foo is a literal path. When the bundler joins and minifies everything it saves the file to that location. Style bundles typically use ~/Content/foo because of the tendency to reference things like images and fonts in ~/Content. Of course, bundling only happens in production, by default, so it won't affect you in development either way. I'm not sure what you're actually using as a bundle path, but that would be the first place I looked.
Another potential problem is that perhaps the bundle is not being loaded at all. This is common when you accidentally create a bundle path that maps to a physical directory. For example, if your bundle path is ~/Content/fonts, and you have a physical folder named fonts under ~/Content in your project, then your bundle will not be loaded and none of the scripts/css in that bundle would be applied to the page. Make sure your bundle path does not reference a physical directory.
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.