I have received a font, I uploaded the ttf given in a server with a public route accessible publicly via any browser.
I found a client who used same approach before but the solution was working for them, not for me, but they used woff instead of ttf, so I used the ttf format anf ttf file obviously.
#font-face {
font-family: 'TEST';
font-style: normal;
font-weight: 300;
src: local('TEST'), local('TEST'), url('https://publicurl/fonts/longines/myfontcalledBison.ttf') format('ttf');
}
And I used :
<span style="font-family: 'TEST'; "></span>
So same solution worked with one font, but did not work for an other. Knowing that both fonts are custom.
Also I converted my ttf file to woff using CloudConvert App and tried again :
#font-face {
font-family: 'TEST';
font-style: normal;
font-weight: 300;
src: local('TEST'), local('TEST'), url('https://publicurl/fonts/longines/myfontcalledBison.woff') format('woff');
}
But same thing.
Solution not working even in web browser.
Any help would be much appreciated.
Related
How do I use fonts such as Agency FB, Berlin Sans, Century Gothic etc. in my webpage which, when searched on Google fonts redirect to other sites like
https://store.typenetwork.com/foundry/fontbureau/fonts/agency-fb?src=GoogleFonts
https://www.fonts.com/font/monotype/century-gothic/regular
and if uploaded to Font Squirrel, display the following message
'Font Bureau has requested that their font Agency FB Regular be blacklisted by the Generator. You will not be able to convert this font.'
I have tried the following codes (which worked with fonts which are not of this type)
#font-face
{
font-family: 'airstrike';
src: url('fonts/airstrike-webfont.woff2') format('woff2'),
url('fonts/airstrike-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
Please experts, help me out with this basic (but detrimental to the design of my webpage) problem as this is one of the last ones remaining in my webpage.
Problem solved. I downloaded similar fonts of copyrighted originals from https://www.whatfontis.com/ took the .ttf file and uploaded it to https://www.fontsquirrel.com/ where it got converted into two files of .woff and .woff2 extensions and a sample stylesheet was provided. I just copied the code in my .css file and modified it accordingly. Here is the code i used
#font-face
{
font-family: 'agency';
src: url('fonts/agency-webfont.woff2') format('woff2'),
url('fonts/agency-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
I'm using wordpress and find it impossible to get my custom fonts to work on my site. I've looked through several threads with the same problem and none of the solutions worked or I applied them wrong. I use a free theme that I'm modifying as I go along. I'm editing the style.css sheet and can't figure out what I'm doing wrong. Some fonts work that can be found on my computer (and some don't, even if they can be found on my PC), so there seems to be something really weird going on. None of the #font-face things work on other devices.
I used font squirrel to make a set of webfonts and uploaded them to my server, under the theme in a separate font folder. The files should be accessible as the permissions are granted to user, group, world for read and execute. I also now tried using the font squirrel provided code added with complete addresses to implement the fonts. Nothing happens.
Now this is my first day into coding so it might be I'm not seeing what I'm doing wrong here. I inserted this new code after the HEADING-headline (I'm not sure if the positioning in the sheet makes a difference or is it just for the user for organizational purposes, but I've tried several) in the style file and this is a strip as is on the file:
.blog-title {
font-family: "daniel_blackregular";
font-size: 2.25em;
text-align: center;
}
#font-face {
font-family: 'daniel_blackregular';
src: url('/public_html/wp-content/themes/baskerville/Fonts/danielbk.eot');
src: url('/public_html/wp-content/themes/baskerville/Fonts/danielbk.eot?#iefix') format('embedded-opentype'),
url('/public_html/wp-content/themes/baskerville/Fonts/danielbk.woff2') format('woff2'),
url('/public_html/wp-content/themes/baskerville/Fonts/danielbk.woff') format('woff'),
url('danielbk.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Right now I'm thinking what if I'm addressing the font incorrectly, but I've tried everything there too. Please help.
To fix your issue you need to do a few things.
Move your #font-face to the top of your css file.
Update the url path in your #font-face call. Right now they are returning a 404 with the urls of:
#font-face {
font-family: 'daniel_blackregular';
src: url('/fonts/danielbk.eot');
src: url('/fonts/danielbk.eot?#iefix') format('embedded-opentype'),
url('/fonts/danielbk.woff2') format('woff2'),
url('/fonts/danielbk.woff') format('woff'),
url('/fonts/danielbk.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Remember the urls are relative to where the call is coming from. In this case it's gettning called from your css.
When I updated the paths in the css to: src: url('/public_html/wp-content/themes/baskerville/Fonts/danielbk.eot'); the font worked.
I wonder is it possbile to use otf fonts on web server? I am asking this question because the following font works well on localhost but does not when I upload it on IIS.
#font-face
{
font-family:"CustomArabicFont";
src: url("fonts/NassimArabicTEST-Regular.otf");
font-weight: normal;
font-style: normal;
}
This is how I am calling this font:
.custom-ar-font
{
font-family: CustomArabicFont, Tahoma;
font-size: 18px;
}
You'll need to configure the proper MIME types. OTF fonts should have a MIME-type of application/font-sfnt.
Check these links for implementation details:
http://sebduggan.com/blog/serving-web-fonts-from-iis/
http://codingstill.com/2013/01/set-mime-types-for-web-fonts-in-iis/
I have a huge problem with the rendering of the font 'Roboto' on the embedded google maps on my site:
Last year we decided to use on our site the font Roboto to render our head titles and vignette.
The site it's in greek language and so i loaded the fonts with greek extended:
#import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700|Roboto:900|Tinos:700&subset=greek-ext,latin-ext);
My problem now is: when my page load it does load the fonts right, but when it comes the embedded Google map, my fonts got lost...
I guess google maps load the 'roboto' font without the support to greek language and does an overwrite to my command... am I right?
Can somebody help?
I had the same problem with exactly the same font. When Google Maps has loaded their fonts all my previous styles changed. I decided to use simple solution. When You have Your web font link, for example:
<link href='http://fonts.googleapis.com/css?family=Roboto:300&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
It produces:
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
src: local('Roboto Light'), local('Roboto-Light'),
url(http://themes.googleusercontent.com/static/fonts/roboto/v10/Pru33qjShpZSmG3z6VYwnT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
As You see it has font-family property. I've decided to change it to, for example, to 'RobotoL':
#font-face {
font-family: 'RobotoL';
font-style: normal;
font-weight: 300;
src: local('Roboto Light'), local('Roboto-Light'),
url(http://themes.googleusercontent.com/static/fonts/roboto/v10/Pru33qjShpZSmG3z6VYwnT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
And then use it in your document, for example:
body {
font-family: 'RobotoL';
font-weight......
}
Then there is no need to use Google generated import or link, but write Your own. There is no Google Maps Roboto Font problem after version 3.14 any more )
There is only one tricky part to extract this long .woff url after Google inserts it, but You can do it easily using every modern browser developer tools (Firebug etc). I think it works for Condensed and other Roboto versions as well.
Ok, thanx for the workaround a lot!
So, I downloaded the fonts I use from fontsquirrel.com; Roboto, thank Christian Robertson, is a free web font ;)
I left the css code suggested from fontsquirrel (here an example from a specific type):
#font-face {
font-family: 'robotobold';
src: url('/fonts/Roboto-Bold-webfont.eot');
src: url('/fonts/Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'),
url('/fonts/Roboto-Bold-webfont.woff') format('woff'),
url('/fonts/Roboto-Bold-webfont.ttf') format('truetype'),
url('/fonts/Roboto-Bold-webfont.svg#robotobold') format('svg');
font-weight: 700;
font-style: normal;
}
and changed, as you told, all the calls to the font:
.class{font-family: 'robotobold', sans-serif;}
It's working with the Google maps, thanx!
I am trying to embed my custom font in my website, got a link folder from http://www.fontsquirrel.com/fontface/generator this site after uploading a font on this site, it gives me this CSS:
#font-face {
font-family: 'VoltaEFTU-Regular';
src: url('voltaeftu-regular-webfont.eot');
src: local('☺'),
url('voltaeftu-regular-webfont.woff') format('woff'),
url('voltaeftu-regular-webfont.ttf') format('truetype'),
url('voltaeftu-regular-webfont.svg#webfonttKmU3jX8') format('svg');
font-weight: normal;
font-style: normal;
}
But it's not working on my machines. How can I embed a font in my website?
Thanks
Mayur Mate
If I were doing it, I would take a look at how the Google Font API works…
#font-face code looks correct, but if you want use this font example in <p> you must use font-family: 'VoltaEFTU-Regular'; in this element. Look into generated demo.html file.