Can someone please assist me, I'm struggling to make #font-face work.
I have tried just about everything, I know I'm probably missing something silly.
Can anyone tell me what I'm doing wrong, please?
#font-face {
font-family: "Asbah";
src: url('http://www.dafont.com/asbah.font.ttf') format ('truetype'),
url('http://www.dafont.com/asbah.font.woff2') format('woff2'),
url('http://www.dafont.com/asbah.font.woff') format('woff'),
p {
font-family: 'Asbah';
font-size: 12px;
}
<p>
Hallo this is font Asbah...which is noooot workingggg
<p>
Use this:
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
Different browser use different font format. If you don't have some format at this website you car generate all: https://transfonter.org/
Take a look at this for technical insight: https://css-tricks.com/snippets/css/using-font-face/
Make sure font URL is correct. Or serve it from CDN or Local
Have you added the mime types properly?
I think you can have a look here in this link:
http://codingstill.com/2013/01/set-mime-types-for-web-fonts-in-iis/
#font-face only work on fonts which are hosted on your server.
Otherwise you need to use #import.
Like you want to use google fonts then -
#import url(//fonts.googleapis.com/css?family=Open+Sans);
Related
Trying to get the font-face to work but can't seem to change the font family. This is what I have.
I downloaded panton as a folder and transferred four files
into assests/fonts but it still doesn't show up?
Thanks in advance
#font-face {
font-family: 'panton';
src: url('assests/fonts/Panton-BlackCaps.otf'); /* IE9 Compat Modes */
src: url('assests/fonts/Panton-BlackitalicCaps.otf') format('embedded-opentype'), /* IE6-IE8 */
url('assests/fonts/Panton-LightCaps.otf') format('woff2'), /* Super Modern Browsers */
url('assests/fonts/Panton-LightitalicCaps.otf') format('woff'), /* Pretty Modern Browsers */
}
(resolved in comments, answer added for completeness)
Relative paths in CSS as used here are always interpreted relative to the source of the CSS file.
I have a problem with the font-family property in my css. I have a title that I want to style using a particular font. I am using #fontface. On my desktop it works fine, but on iPhone and iPad I get some standard font (I think it might be times but I am not sure). I did some research and tried different formats otf ttf etc... but still wasn't working. Finally, fed up, I've tried just changing fonts on my css to other system fonts and the phone is still not recognising them. Basically it's stuck with one font. Here is a couple of examples of fonts on the desktop:
The three first images are different font-families I have applied on the desktop version. There is a system font, a google font and a custom font using #fontface. All work.
The fourth image is what shows both on iPhone and iPad for each one of the fonts. Always the same one. What on earth is happening? Any suggestions appreciated.
My code for the custom font is:
#font-face {font-family: QuaestorSans;
src: url("fonts/QuaestorSans-Rg.otf") format("opentype"),
url("fonts/QuaestorSans.ttf") format("opentype");
}
.title{
font-family: QuaestorSans;
font-size: 2em;
letter-spacing: 1.4px;
}
the html
alice soyer
sky on earth
There is a little animation that fades the letters in, but I wouldn't have thought that would interfere with the font-family (and only on mobile devices?).
If you want the check out the web site it's alicesoyer.com
there is only one rule for the font-family, but if you test the site on desktop and on mobile (i am testing on iPhone and iPad for now) you will see different families. Thanks
Most likely caused by not having the right font format for mobile devices, try using a service like https://www.fontsquirrel.com/tools/webfont-generator to generate the correct code for the fonts you're using
Try all this formats(just example font-family)..
#font-face {
font-family: 'LatoRegular';
src: url('../fonts/LatoRegular.eot');
src: url('../fonts/LatoRegular.eot') format('embedded-opentype'),
url('../fonts/LatoRegular.woff2') format('woff2'),
url('../fonts/LatoRegular.woff') format('woff'),
url('../fonts/LatoRegular.ttf') format('truetype'),
url('../fonts/LatoRegular.svg#LatoRegular') format('svg');
}
use all those formats it should work because some browsers need different formats.
I'd like to add for the answer of #Venu Madhav and #JezEmery
beside fontsquirel you can also try
Transfonter
and for the code if you are using multiple fonts on your web enclose every font in
#font-face {
//font number 1 here
}
#font-face {
// font number 2 here and so on
}
because I did try
#font-face {
font-family: 'LatoRegular';
src: url('../fonts/LatoRegular.eot');
src: url('../fonts/LatoRegular.eot') format('embedded-opentype'),
url('../fonts/LatoRegular.woff2') format('woff2'),
url('../fonts/LatoRegular.woff') format('woff'),
url('../fonts/LatoRegular.ttf') format('truetype'),
url('../fonts/LatoRegular.svg#LatoRegular') format('svg');
font-family: 'font 2';
src: url('../fonts/LatoRegular.eot');
src: url('../fonts/LatoRegular.eot') format('embedded-opentype'),
url('../fonts/LatoRegular.woff2') format('woff2'),
url('../fonts/LatoRegular.woff') format('woff'),
url('../fonts/LatoRegular.ttf') format('truetype'),
url('../fonts/LatoRegular.svg#LatoRegular') format('svg');
font-family: 'font 3';
src: url('../fonts/LatoRegular.eot');
src: url('../fonts/LatoRegular.eot') format('embedded-opentype'),
url('../fonts/LatoRegular.woff2') format('woff2'),
url('../fonts/LatoRegular.woff') format('woff'),
url('../fonts/LatoRegular.ttf') format('truetype'),
url('../fonts/LatoRegular.svg#LatoRegular') format('svg');
/* ----- so on */
}
to save lines of codes, yes it still worked on desktop but it failed in mobile.
trying to add a custom font into my wordpress website but it's just not working. I tried using one of the plugins but I only see the change in font in 'edit mode' but when i actually go on the public webaddress the font does not load.
I've converted futura condensed light into the various types and added this in my style.css on the theme I'm using
#font-face {
font-family: 'Conv_futura-condensedlight-normal';
src: url('fonts/futura-condensedlight-normal.eot');
src: url('fonts/futura-condensedlight-normal.eot?#iefix') format('embedded-opentype'),
url('fonts/futura-condensedlight-normal.woff') format('woff'),
url('fonts/futura-condensedlight-normal.ttf') format('truetype'),
url('fonts/futura-condensedlight.svg#Conv_futura-condensedlight-normal') format('svg');
font-weight: normal;
font-style: normal;
}
and also added this
h7{font-family: 'Conv_futura-condensedlight-normal';}
On the page where I want the text to change I have:
<h7>LOGIN</h7>
but the text does not change..
I've also uploaded the files into the fonts folder in the theme directory (where other fonts are)
Can't seem to find the bug. Help would be appreciated!
Try #font-face for custom fonts. Use below code.
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
and specify it as below :
font-family: 'MyWebFont', Fallback, sans-serif;
Refer : https://css-tricks.com/snippets/css/using-font-face/
They may be several reasons but the first thing I'm seeing wrong is the <h7> tag because it doesn't exist. You should use from h1 to h6.
If that doesn't solve the issue please try with browser's console as #War10ck said, missing files is a signal of path issues.
When I created a custom font and used it on my website, this was the CSS I used:
#font-face {font-family:'CUSTOM_FONT_NAME';src:local('CUSTOM_FONT_NAME'), url(http://MY_URL/MY_FONT_PATH/MY_FONT.ttf) format('truetype');}
.my_custom_font_class {font-family:'CUSTOM_FONT_NAME',serif;}
I believe I had to use a global path to get my font to load, so you might try that.
The src:local('CUSTOM_FONT_NAME') part is just to verify that it's working at all from your machine with the font installed. (You'll need the font name to match the name it's registered under in your machine, in this case).
I have searched this on net found many articles and tutorials, I followed some of them but still not getting the desired results.
I have downloaded the font and place this in the my project folder. This is the code I am writing but it's not changing the font-style.
#font-face
{
font-family: Montereybold;
src: url(font/Montereybold.ttf);
}
h1
{
font-size:36px;
font-family:Montereybold;
}
Kindly guide me what I am doing wrong here.
Thanks
¿Have you tried quoting the font name? Also, for better compatibility, upload several font formats.
#font-face {
font-family: 'Montereybold';
src: url('font/Montereybold.eot'); /* IE9 Compat Modes */
src: url('font/Montereybold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('font/Montereybold.woff') format('woff'), /* Modern Browsers */
url('font/Montereybold.ttf') format('truetype'), /* Safari, Android, iOS */
url('font/Montereybold.svg#Montereybold') format('svg'); /* Legacy iOS */
font-weight:normal;
font-style:normal;
}
Using it:
font-family:'Montereybold';
Maybe the url is wrong. Is there "font" folder in parent folder of your css file ? Otherwise, try "../font/Montereybold.ttf".
Also, ttf is not supported by all browser. Use font-face generator for a best result : http://www.fontsquirrel.com/tools/webfont-generator .
I just started using Entypo font-face to make my social icons, but in IE8 or later, it displays the font as an empty box. I don't know if there is something wrong with my code or their font.
#font-face {
font-family: 'entypo-social';
src: url('entypo-social.eot');
src: url('entypo-social.eot?#iefix') format('embedded-opentype'),
url('entypo-social.woff') format('woff'),
url('entypo-social.ttf') format('truetype'),
url('entypo-social.svg#svgFontName') format('svg'); }
.social_font a{
font: 47px/20px 'entypo-social', Arial, sans-serif; }
Entypo does not work in IE8. i just visited their website in IE8 and their demos are completely broken.
This is the code i've been using for font-face:
#font-face {
font-family: 'ChunkFive';
src: url('ChunkFive.eot');
src: url('ChunkFive.eot?#iefix') format('embedded-opentype'),
url('ChunkFive.woff') format('woff'),
url('ChunkFive.ttf') format('truetype'),
url('ChunkFive.svg#font') format('svg'); ;
font-weight: normal;
font-style: normal;
}
you could take a llok at this.
http://css-tricks.com/snippets/css/using-font-face/
By the way: font-face Do works in IE8.
Try to use http://fontello.com/ - choose the entypo icons you need and download their package.
That worked in IE7+ for me.
Double check you’ve not got IE’s Compatibility View selected. Just wasted over an hour without checking and it works fine when de-selected.
Also if you’re using html5shiv, try placing it after your css file containing the fonts.