I want to have a custom font (HP Simplified Light) for my webpage. I have the font file uploaded to Dropbox, and I have the link here.
But nothing happens. I get Times New Roman as the font. I've tried testing locally, both hosting the font locally, and the HTML document, but with the same effect.
<html>
<head>
<style>
#font-face {
font-family: HP Simplified;
src: url('http://dl.dropboxusercontent.com/s/dau4s6y033jkg4y/HPSimplified_Lt.ttf');
}
h1 {
font-family: HP Simplified
}
</style>
Hello world!
</html>
Your CSS is only styling h1 elements with the font HP Simplified. The text "Hello world!" is not a h1. Either you can make it so:
<h1>Hello world!</h1>
Or you can have the CSS style everything with the font:
* {
font-family: HP Simplified
}
This is the error I get in chrome:
Redirect at origin 'http://dl.dropboxusercontent.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.
Download the file and host it locally. Also be sure to put the tags around your text and include a ; at the end of your font-family css. I did all that and it works. Example: http://catsarecrits.com/test.html
When I checked your font, it looks like an ordinary font and not a webfont. Correct me if I am wrong.
The othher possible reason is that Drop box have blocked your font file from being accessed on random location.
I have uploaded your font and converted it to different webfont formats.
test link
http://files.coderinthebox.com/webfont/
zip files
http://files.coderinthebox.com/webfont/webfontkit-20150531-215129.zip
Related
I'm creating personal blog with next.js.
Currently i use google fonts to provide fonts for my blog. Everything works fine except initial content shift on load.
When I load my web it will shift when new font loads (not all fonts have same spacing, sizes, etc...). So my question is how to prevent this content shift?
I have seen many suggestions to add loading screen until everything loads, but I think that the best solution would be just to bundle everything to the html itself. NextJs automatically inlines styles for me with <style/> tags and next-images will inline small images with base64. So how do I automatically inline my fonts (I dont want to always change tons of #font-face declaration when I decide to change font)?
Currently i use:
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
I would like NextJS to automatically convert it to something like this:
#font-face {
font-family: 'myfont';
src: url(data:font/truetype;charset=utf-8;base64,<<copied base64 string>>) format('truetype');
font-weight: normal;
font-style: normal;
}
You can use this amazing project to get any google font with base64 inlined src.
embedded-google-fonts
just put your google font link here: https://amio.github.io/embedded-google-fonts/
for example, for Barlow font: https://fonts.googleapis.com/css2?family=Barlow:wght#400;600;800&display=swap
then you can copy the result and create a <your-font>.css file in the project.
I have a problem when using yojo.ttf font.
Here is my simple html code
<html>
<head>
<style>
#font-face {
font-family: 'yojo';
src: url('./yojo.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
</style>
</head>
<body>
<p style="font-family: 'yojo'">ありがとう</p>
</body>
</html>
yojo.ttf
This font works well on Safari, but it doesn't work on chrome and firefox: the font of the text in the paragraph is not yojo font family, and the console just show a warning message:
Failed to decode downloaded font OTS parsing error: post: Failed to parse table
Is there any way to fix the problem without modifying the font file? Thanks!
I know this is a bit old, and you probably already figured it out, but just in case you didn't or someone has the same issue...
Had the same problem, and basically it seems Chrome and other browsers can't read the .ttf font format. Here's how I fixed it:
Convert your .ttf file into other font formats like .eot and .woff formats.
You can do that by going to this site...
https://transfonter.org/
Upload your font, then select all the formats you need (I selected everything), and I think you can leave everything else at the default setting.
Then hit the download button. You'll get a compressed file with all the font file formats and a css stylesheet that gives you an example of how your #font-face declaration should look like. You can copy this to your css file, or just make your own declaration. Of course you should also place the font files where you want your site to access them from.
And now it should work for Chrome, Safari, and Firefox. Not sure about other browsers though!
I hope that helps you or someone.
I am trying to use a custom font on my website that I have uploaded in a google drive. The reason I have to take this route is, the particular site is blogger which does not allow me to upload custom font. I have read articles where they had suggested to use pro version of dropbox, but at this moment I am not planning to invest in a pro account. The Code I am trying to use as follows
<!DOCTYPE html>
<html>
<head>
<style>
#font-face {
font-family: keycapsflf1-webfont;
src: url(https://docs.google.com/uc?authuser=0&id=0B80wMxxnziQZQ09hdVFTZWo1NFE&export=download);
}
#font-face {
font-family: keycapsflf1-webfont;
src: url(https://docs.google.com/uc?authuser=0&id=0B80wMxxnziQZQ09hdVFTZWo1NFE&export=download);
font-weight: bold;
}
div {
font-family: keycapsflf1-webfont;
}
</style>
</head>
<body>
<div>Testing</div>
</body>
</html>
But, this does not work. Any idea, what might be wrong?
Its not working because docs.google.com is sending a No 'Access-Control-Allow-Origin' header on the resource.
Here is the error from the console:
"Redirect at origin 'https://docs.google.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."
I tried removing the &export=download param on the url https://docs.google.com/uc?authuser=0&id=0B80wMxxnziQZQ09hdVFTZWo1NFE&export=download but this didn't work either so its definitely the resource sharing policy at fault.
edit based on Spencer Wieczorek's feedback
After disabling same origin policy in my chrome as follows the font loaded correctly confirming that the Cross-Origin Resource Sharing policy is the only issue that I'm facing with loading the font: Disable same origin policy in Chrome
See screenshot below:
You can upload custom font to your blog via google sites.
First create a new site by using Google account at http://sites.google.com.
Then create a directory name as "fonts" or whatever you want to choose.
Upload the font and then you will get the url of the font which you upload.
Add the font css source url to blogger header
Eg:
#font-face {
font-family: keycapsflf1-webfont;
src: url(https://sites.google.com/site/yoursitename/fonts/fontname.ttf);
}
I am working on a website which works in all browsers correctly but when I use google chrome sometimes it literally does not load the font. I have tried fallback fonts but still no luck - really struggling with this.
When I provide a fallback font it always ignores the custom one for a wierd reason, so the question is why is google chrome not loading the font correctly and is their a way i can force it to load?.
This is the website http://www.rpmediasolutions.com/wordpress
#font-face {
font-family: Solano;
src: url("http://www.rpmediasolutions.com/wordpress/Fonts/solanogothicmvb-sb.eot?#iefix") format("embedded-opentype")
, url("http://www.rpmediasolutions.com/wordpress/Fonts/solanogothicmvb-sb.svg#Solano Gothic MVB Lt") format("svg"),
url("http://www.rpmediasolutions.com/wordpress/Fonts/solanogothicmvb-sb.woff") format("woff"),
url("http://www.rpmediasolutions.com/wordpress/Fonts/solanogothicmvb-sb.ttf") format("truetype");
}
Figured it out.
Its a Chrome bug which does not render fonts correctly.
Here's the link to the bug https://code.google.com/p/chromium/issues/detail?id=336476
I tried CSS methods which were mentioned in the post but it didnt work for me.
So I placed jquery in my footer which happened to fix the issue, it hides all elements in the body and reshow it.
Their is like a few seconds delay before it shows but its a temporary fix until Google jump on this.
This jquery should be in the footer.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script> <script type="text/javascript" charset="utf-8">
$(function() { $('body').hide().show(); });
</script>
I had the same problem and was able to fix it by changing the url. Instead of going to "http://..." to find the file, just reference the directory where the font is stored on your server.
For example, if your font is in the public_html folder and your css file is in a folder within public_html then you just need to go back one directory (../) and access the font.
#font-face {
font-family: myFont;
src: url('../myFont.ttf')
}
<html>
<head>
<title> </title>
<body>
<font face="file:///E:/softwares/FONTS/alpha kufi regular.ttf" size="+2"> This is a tester for a font, that may not be installed on the machine </font>
</body>
</head>
</html>
This snippet doesn't show up the sentence in the intended font. What could be the reason for this ?
Note: I am aware that the font tag is not supported by HTML 5 and deprecated by HTML 4.
There are two basic problems here: the HTML face attribute (as well as its CSS counterpart, the font-family property) needs a font family name as value, not a URL of a font file, and a file: URL is inherently system-dependent and may fail to work in many circumstances.
The following works, provided that the font file alpha_kufi_regular.ttf (better avoid spaces in font names, as spaces as such are disallowed in URLs) is placed in the fonts subdirectory of the directoty where you have the CSS file and the browser supports TrueType fonts as “web fonts” (this need not be “web font” usage but could be local; the techniques are the same):
<style>
#font-face {
font-family: AlphaKufi;
src: url('fonts/alpha_kufi_regular.ttf');
}
</style>
<font face="AlphaKufi" size="+2"> This is a tester for a font,
that may not be installed on the machine </font>
Since not all browsers support TrueType fonts as “web fonts”, consider using FontSquirrel #font-face generator if you intend to use the font on a web page.
It is usually better to use CSS rather than HTML for font settings, but that’s a different issue. In theory, “web fonts” need not work with HTML <font face="..."> too (no specification requires that), but in practice they do.
I can't find a reference for it, but my best guess is that you can't access fonts using the file:// protocol (local filesystem). This is certainly true if the page is online or accessed through a local server (http://localhost or equivalent).
Also, there's no reason at all to ever use <font>. It might not work just because browsers don't support it fully anymore.
edit: in fact, I'm not sure <font> has ever supported using a font file instead of a font's name.
The solution for providing a font file is to use CSS's #font-face.
It's because font's face attribute does not take a path to a font file. It takes a comma separated list of font names. The browser searches the system for installed fonts and loads the relevant one from there (if it exists).
If you want to specify your own, you will probably need to use CSS #font-face.
Using Google Web Fonts API to add web fonts to your pages :
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=alpha kufi regular">
<style>
body {
font-family: 'alpha kufi regular';
font-size: 48px;
}
</style>
<title> </title>
<body>
<div>This is a tester for a font, that may not be installed on the machine</div>
</body>
</head>
</html>
~ Reference