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/
Related
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.
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;
}
When I use fonts on my webpage, I either use Google Fonts or fonts that are installed on my system. I wanted to know, if it's possible to have a folder with fonts saved in the same folder as the index file, and use those fonts in the webpage without having to install them on the system.
You can use webfonts that live on your server alongside your html and css by referencing them in your css file:
#font-face {
font-family: "myFont";
src: url("myFont.ttf");
}
then you can use it as you would a google web font:
html {
font-family: "Bitstream Vera Serif Bold", serif;
}
More information and examples (including the ones I used) can be found on MDN.
If you look at the HAR file fonts.gstatic.com is present as is expected
However, it is not visible in the Google Chrome Network Tools tab (see sreenshot attached)
Is this a bug or am i missing something?
In the HAR file we can see fonts.gstatic.com is in an HTTP response "Link" header value and content (i.e. CSS file).
The Link property doesn't actually fetch the source as the font is available locally, it won't try to load via url.
For more info: https://developer.mozilla.org/en-US/docs/Web/CSS/#font-face/src
#font-face {
font-family: 'Pathway Gothic One';
font-style: normal;
font-weight: 400;
src: local('Pathway Gothic One'),local(PathwayGothicOne-Regular),url(http://fonts.gstatic.com/s/pathwaygothicone/v4/Lqv9ztoTUV8Q0FmQZzPqaBRcxZ7No-r1mAtcnpNU5cQ.woff2) format("woff2");
unicode-range: U+0100-024F,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF;
}
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!