I am not sure what is wrong, but my phone was unable to show my blog post using this font. It reverts back to the standard font used in blogspot again
#font-face{
font-family: 'citystencilregular';
src: url('https://www.dropbox.com/s/3p2opgb34hqtabs/citystencil-webfont.woff2?dl=0') format('woff2'),
url('https://www.dropbox.com/s/0vrf25i02ol7qpz/citystencil-webfont.woff?dl=0') format('woff');
font-weight: normal;
font-style: normal;
}
Of course you can not. If I use your link, I do not get the font file, but an HTML which offers me download the file to load page.
Get this to work needs the font file being send back, not a html page.
Like here: https://fonts.googleapis.com/css?family=Open+Sans
Related
Very entry-level here.
I have a .ttf font file I'd like to use for my blog, but I am unsure of how/where I can get its coding (?). Is this about right?
* {
font-family: 'providence-bold';
src: url('/font/providence-bold.regular.ttf');
}
feel free to skewer this, as I said I've little idea of what I'm doing.
EDIT: Here is a link to the font I'm trying to use. (If it helps) https://ufonts.com/download/providence-bold.html
#font-face {
font-family: 'providence-bold';
src: url('/font/providence-bold.regular.ttf');
}
This is the format I use. Just make sure you're path is correct.
Side note: I don't like using underscores (_) and dashes (-) in variables.
It's recommended to get in the habit of writing variables as camelCase or PascalCase.
I would advice and is a better way to include fonts is by converting it into these formats.
You can get the code from here after you converting your fonts into the formats you wanted -> link
After you convert your fonts it will produce a rar file extract it you will find the font.css where you can find these codes.
#font-face {
font-family: 'providence-bold';
src: url('../fonts/providence-bold.eot');
src: url('../fonts/providence-bold.eot?#iefix') format('embedded-opentype'),
url('../fonts/providence-bold.woff') format('woff'),
url('../fonts/providence-bold.ttf') format('truetype'),
url('../fonts/providence-bold.svg#providence-bold') format('svg');
font-weight: normal;
font-style: normal;
}
Be sure to check your url to the fonts' location.
You need to add the link to the font from the url provided here:
https://ufonts.com/download/providence-bold.html
if you add them like this ../providence-bold.html they are relative to your html document. So would need to be installed on your server http://yourname.tumblr.com or whatever.
If you change the urls to point to the resource at ufonts, then it should work.
So
#font-face {
font-family: 'providence-bold';
src: url('https://ufonts.com/fonts/providence-bold.eot');
src: url('https://ufonts.com/fonts/providence-bold.eot?#iefix') format('embedded-opentype'),
url('https://ufonts.com/fonts/providence-bold.woff') format('woff'),
url('https://ufonts.com/fonts/providence-bold.ttf') format('truetype'),
url('https://ufonts.com/fonts/providence-bold.svg#providence-bold') format('svg');
font-weight: normal;
font-style: normal;
}
However these resources must exist at the ufonts url. If it is just a place to download the ttf file, this will not work. They have to be served from somewhere, and tumblr will not allow you to upload font files to their servers.
First of all, you need to get fonts in a proper format. Youca n download them in the required .ttf format at such websites as https://fontsly.com/gothic/celtic or youc an use some converters.
I am using custom web font in my blogger blog. It is not working since few weeks ago. There is a solution for this error that i show on stackflow website but i can't apply it for blogger blog because there is no .htaccess file in blogger. please some one help me. my font face code here. and my website is http://vishwatestblog.blogspot.com/
#font-face {
font-family: 'fmmalithix';
src: url('https://googledrive.com/host/0ByuGuHHrxa5GY0JSNTR4TUhaZ3c');
src: url('https://googledrive.com/host/0ByuGuHHrxa5GY0JSNTR4TUhaZ3c?#iefix') format('embedded-opentype'),
url('https://googledrive.com/host/0ByuGuHHrxa5GMm45RW5zWkd1Slk') format('woff2'),
url('https://googledrive.com/host/0ByuGuHHrxa5GUUJGS0dxME5XbDQ') format('woff'),
url('https://googledrive.com/host/0ByuGuHHrxa5GN2xhWmQ2bHdDRDA') format('truetype'),
url('https://googledrive.com/host/0ByuGuHHrxa5GRzhxSzRhN1dBTEE#fmmalithix') format('svg');
font-weight: normal;
font-style: normal;
}
It looks like the font files doesn't have the CORS headers and thats the reason, you aren't able to see the font being applied.
Also, as the files are being downloaded from googledrive, you need to be signed in to access the file.
I dont think you can host the font files on a google drive and access without authorization.
you can check it yourself, font urls you mentioned throw a 404 if you open in incognito mode.
Please Check, you have correctly placed the font file and the google drive directory.
#font-face
{
font-family: 'Font Family';
src: url('source.ttf') format('truetype'); ---> Font Type
}
enter code hereI am working on a Sitefinity 3.7 site and the template I'm building requires some custom fonts from the 'opensans' font family. I created a folder called "Fonts" inside the theme I made for this template and put the .svg, .eot, .tff, and .woff files in there. In the style sheet, I have tried setting up some of the opensans fonts I will be using but they don't appear to be working--I just see standard Arial/Verdana fonts in the browser.
#font-face {
font-family: 'open_sansregular';
src: url('/App_Themes/ResCare/Fonts/opensans-regular-webfont.eot');
src: url('/App_Themes/ResCare/Fonts/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('/App_Themes/ResCare/Fonts/opensans-regular-webfont.woff') format('woff'),
url('/App_Themes/ResCare/Fonts/opensans-regular-webfont.ttf') format('truetype'),
url('/App_Themes/ResCare/Fonts/opensans-regular-webfont.svg#opensansregular') format('svg');
font-weight: normal;
font-style: normal;
}
I figure I must be doing this wrong but I'm not sure what's wrong. I've never tried to add in custom fonts into a Sitefinity site before, and I know this is an old site, but I can't help the latter.
Is there a way to get these opensans fonts to work for my template?
Add this cdn from google fonts in your header and apply the css to any element you wish to have Open Sans as the font.
HTML
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
CSS
font-family: 'Open Sans', sans-serif;
Here is the original link so you can edit the information and view the documentation if you wish: http://www.google.com/fonts#UsePlace:use/Collection:Open+Sans
#font-face {
font-family: iconFont;
src: local(iconFont), url('fonts/iconFont.ttf') format('opentype');
}
The font file is not corrupt and installs fine in OSX etc. letting me preview it. But it won't render anything when I try to use it on a web page or even if I select it in illustrator it just switches to another font if I touch any key.
The font is for 'regular' and I have tried other options, but it won't work. Have tried typing with caps on/off etc. Using numpad, nothing. Have re-installed it and made sure there are no duplicates. It also won't work in Windows. Not sure if I need to change my css somehow or the fault lays with the font.
Here's a link to the font for anyone wanting to try. It's a bunch of metro icons. http://www2.zippyshare.com/v/23494573/file.html
Not sure if this will help, but this is the CSS I use, and it works fine. The webfonts directory is in the same directory as the css file, and includes three file types: .eot .ttf .woff
#font-face {
font-family: 'AvenirLT-Book';
src: url('webfonts/25EE2B_0_0.eot');
src: url('webfonts/25EE2B_0_0.eot?#iefix') format('embedded-opentype'), url('webfonts/25EE2B_0_0.woff') format('woff'), url('webfonts/25EE2B_0_0.ttf') format('truetype');
}
a typical class decleration:
.AvenirLT-Book {
font-family: AvenirLT-Book;
font-weight: normal;
font-style: normal;
}
perhaps you need to change the format to ('truetype') instead of ('opentype') ?
I have added a font to a site, added the CSS and uploaded the font files and it is working in IE but not in Firefox. Why is that?
CSS:
#font-face {
font-family: 'MyFont';
src: url('MyFont.eot');
src: url('MyFont.eot?#iefix') format('embedded-opentype'),
url('MyFont.woff') format('woff'),
url('MyFont.ttf') format('truetype'),
url('MyFont.svg#MyFontRegular') format('svg');
font-weight: normal;
font-style: normal;
}
label { font-family: 'MyFont'; font-size: 20px; }
The label was just a test, but it's working. The font files are in the same directory as the CSS.
I've tried almost everything, and its still not working....
Does anybody know what's wrong? Any help appreciated.
In order:
Check if the font is on Google Web Fonts. If it is, use that version, don't embed your self (for ease of use, caching, browser update compat. etc.)
If not, then check your MIMEs. To do this, use Firebug's Net panel to look at the headers and check they are correct.
If the MIME is wrong, then fix it using either .htaccess, or by writing a PHP file that uses file_get_contents() and header() to fix it.
I found out there was another CSS file, overwriting the one i made.
Problem solved