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 .
Related
I have a webpage where I'm using the "font-family: Poppins-Medium;"
In my PC the font is displayed correctly.
However, in other PCs, only "Times New Roman" font is displayed.
May someone give me a help?
See CSS code:
.txt2 {
font-family: Poppins-Regular;
font-size: 14px;
color: #999999;
line-height: 1.5;
}
Thanks.
PS: This is the link to the page:
http://ez2main.somee.com/estock/cliadd.asp
In order to use custom font you should first declare #font-face.
It's all written on that link, but let me sum it a little:
step 1: upload font files to the server
step 2: declare font name and use the src property to link those files.
step 3: Now custom font will show on every browser since they available on the server.
Hope that helps!
When this happens to me it is because I have the font installed on my computer but no on the server. Make sure to set up your custom font with #font-face before using it.
#font-face {
font-family: 'Poppins-Regular';
src: url('../font/Poppins-Regular.eot'); /* IE9 Compat Modes */
src: url('../font/Poppins-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../font/Poppins-Regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../font/Poppins-Regular.woff') format('woff'), /* Modern Browsers */
url('../font/Poppins-Regular.ttf') format('truetype'), /* Safari, Android, iOS */
}
Also make sure to add appropriate fall back fonts to make it fail more gracfully.
font-family: Poppins-Regular, 'second-closest-font', Arial, etc;
I recommend using websafe fonts instead.
https://www.w3schools.com/cssref/css_websafe_fonts.asp
The browser that does not have those fonts installed, tries to load them from the URL http://ez2main.somee.com/fonts/poppins/Poppins-Regular.ttf and that is not a valid URL.
If you provide want to provide those fonts, you should make them available from your server. Otherwise, use standard fonts that every browser would have.
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.
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);
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'm trying to smooth fonts in Chrome on Windows by forcing Chrome to use SVG files as described in this article here:
http://const.fr/chrome-webfonts-antialiasing-fixed.
For my test I used the CrusoeTextBold from the OpenFonts library website here:
http://openfontlibrary.org/en/font/crusoe-text.
My css code is pasted below.
If I look at the sample text on the OpenFonts lib web site (which is not an image) it look actually really good in Chrome although they appear to be using the ttf version. On my web site I'm using the SVG version and it looks crap-tastic! (see image below). I just don't understand why my sample looks so edgy compared to theirs...
Any help greatly appreciated. (I've been trying to figure this out for days.)
Thanks!
#font-face {
font-family: 'CrusoeTextBold';
src: url('../fonts/CrusoeText-Bold.eot');
src: url('../fonts/CrusoeText-Bold.eot?#iefix') format('embedded-opentype'),
url('../fonts/CrusoeText-Bold.woff') format('woff'),
url('../fonts/CrusoeText-Bold.ttf') format('truetype'),
url('../fonts/CrusoeText-Bold.svg#crusoetext-regular') format('svg');
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
#font-face {
font-family: 'CrusoeTextBold';
src: url('../fonts/CrusoeText-Bold.svg') format('svg');
}
}
Ok, it seems like I resolved the issue.
In the second statement the src: url also needed the font name, in this case '#CrusoeTextBold' so that the complete statement looks like this:
#media screen and (-webkit-min-device-pixel-ratio: 0) {
#font-face {
font-family: 'CrusoeTextBold';
src: url('../fonts/CrusoeText-Bold.svg#CrusoeTextBold') format('svg');
}
}