I'm trying to load some custom fonts, but for some reason, only one weight is loaded on the front-end. I have checked in the devtools.
Here's my CSS:
/* FONTS */
#font-face {
font-family: 'CalibreWeb';
src: url('http://staging.parcelpet.com/wp-content/themes/oceanwp-child-theme/fonts/CalibreWeb-Regular.eot'); /* IE9 Compat Modes */
src: url('http://staging.parcelpet.com/wp-content/themes/oceanwp-child-theme/fonts/CalibreWeb-Regular.woff2') format('woff2'), /* Super Modern Browsers */
url('http://staging.parcelpet.com/wp-content/themes/oceanwp-child-theme/fonts/CalibreWeb-Regular.woff') format('woff'), /* Modern Browsers */
font-weight: 400;
}
#font-face {
font-family: 'CalibreWeb';
src: url('http://staging.parcelpet.com/wp-content/themes/oceanwp-child-theme/fonts/CalibreWeb-Semibold.woff2'); /* IE9 Compat Modes */
src: url('http://staging.parcelpet.com/wp-content/themes/oceanwp-child-theme/fonts/CalibreWeb-Semibold.woff2') format('woff2'), /* Super Modern Browsers */
url('http://staging.parcelpet.com/wp-content/themes/oceanwp-child-theme/fonts/CalibreWeb-Semibold.woff') format('woff'), /* Modern Browsers */
font-weight: 600;
}
You can check it here that there are some text which tries to use the CalibreWeb font-family with a font-weight of 400 (e.g. the subheading after Advice Hub.)
Any idea what could be the issue?
It appears there is an error in your CSS syntax, causing some of the fonts to not be loaded.
To fix the syntax, use a semicolon on the second line of the second src value.
#font-face {
font-family: 'CalibreWeb';
src: url('http://staging.parcelpet.com/wp-content/themes/oceanwp-child-theme/fonts/CalibreWeb-Regular.eot');
src: url('http://staging.parcelpet.com/wp-content/themes/oceanwp-child-theme/fonts/CalibreWeb-Regular.woff2') format('woff2'),
url('http://staging.parcelpet.com/wp-content/themes/oceanwp-child-theme/fonts/CalibreWeb-Regular.woff') format('woff');
font-weight: 400;
}
#font-face {
font-family: 'CalibreWeb';
src: url('http://staging.parcelpet.com/wp-content/themes/oceanwp-child-theme/fonts/CalibreWeb-Semibold.woff2');
src: url('http://staging.parcelpet.com/wp-content/themes/oceanwp-child-theme/fonts/CalibreWeb-Semibold.woff2') format('woff2'),
url('http://staging.parcelpet.com/wp-content/themes/oceanwp-child-theme/fonts/CalibreWeb-Semibold.woff') format('woff');
font-weight: 600;
}
Related
View on Mac Safari:
View on Windows Chrome:
Here is the css stye
#font-face {
font-family: Gotham HTF Light;
src: url(gothamlight.ttf) format("truetype");
src: url(gotham-black.otf) format("otf");}
#font-face {
font-family: Gotham HTF Book;
src: url(gothambook.ttf) format("truetype");
src: url(gotham-black.otf) format("otf");
}
#font-face {
font-family: Gotham HTF Medium;
src: url(gothammedium.ttf) format("truetype");
src: url(gotham-black.otf) format("otf");
}
html, body {
text-rendering: optimizeLegibility;
}
body{
font-weight:normal;
}
*{
font-family:'Gotham HTF Light';
font-weight: normal;
font-style: normal;
}
input, select, textarea, button,label{
font-family:inherit;
}
How can resolve this problem if I removed the font-family:'Gotham HTF
Light'; then its working fine but whe I apply custom font it dont work
on form fields.
I had this problem and turns out the .ttf file that I was using was defective. I did not realize that right away, because in chrome worked.
To solve the problem I just downloaded other .ttf file (that worked on Safari).
User all font format to support all browse and safari too, Try This
#font-face {
font-family: 'Gotham HTF Light';
src: url((gothammedium.eot);/* IE9 Compat Modes */
src: url((gothammedium.eot?#iefix) format('embedded-opentype'),/* IE6-IE8 */
url(gothammedium.woff2) format('woff2'), /* Super Modern Browsers */
url(gothammedium.woff) format('woff'), /* Pretty Modern Browsers */
url(gothammedium.ttf) format('truetype'), /* Safari, Android, iOS */
url(gothammedium.svg) format('svg');/* Legacy iOS */
}
Gone through some other threads regarding a similar problem, but their solution didn't work. I had been successfully using the code below to add a font to our site which was based off a comprehensive bootstrap template. I now started work on a new site, this time from only a base bootstrap template and tried to add fonts via the same method.
#font-face {
font-family: 'myfontname';
src: url('font/myfontname-Regular.svg');
src: url('font/myfontname-Regular.eot');
src: url('font/myfontname-Regular.eot?#iefix') format('embedded-opentype'),
url('font/myfontname-Regular.woff2') format('woff2'),
url('font/myfontname-Regular.woff') format('woff'),
url('font/myfontname-Regular.ttf') format('truetype')
}
#font-face {
font-family: 'myfontname';
font-weight: bold;
src: url('font/myfontname-Bold.svg');
src: url('font/myfontname-Bold.eot');
src: url('font/myfontname-Bold.eot?#iefix') format('embedded-opentype'),
url('font/myfontname-Bold.woff2') format('woff2'),
url('font/myfontname-Bold.woff') format('woff'),
url('font/myfontname-Bold.ttf') format('truetype')
}
.myfontnameBOLD{
font-family: myfontname;
font-weight: bold;
text-transform: uppercase;
}
.myfontnameREG{
font-family: myfontname;
}
Files are all stored in the same manner as previous ( a Font folder within my css folder). However this time I get the following error
uncaught syntaxError:Invalid or unexpected token
In Chrome the debug highlights the very first line where it says "#font-face"
I ran this through a Linter and no problem, but even I.E is giving an error and highlighting #font-face and saying it has a missing semi-colon.
Anyone able to see what might be wrong? thanks
ok I found the answer and it was a silly one. thanks for your replies. the problem was the actually declaration of the css file in my HTML. I had put it in <script> tags by mistake instead of <link>. slaps self
Could it be the missing semi-colon after url('font/myfontname-Regular.ttf') format('truetype') and url('font/myfontname-Bold.ttf') format('truetype') ?
#font-face {
font-family: 'myfontname';
src: url('font/myfontname-Regular.svg');
src: url('font/myfontname-Regular.eot');
src: url('font/myfontname-Regular.eot?#iefix') format('embedded-opentype'),
url('font/myfontname-Regular.woff2') format('woff2'),
url('font/myfontname-Regular.woff') format('woff'),
url('font/myfontname-Regular.ttf') format('truetype');
}
#font-face {
font-family: 'myfontname';
font-weight: bold;
src: url('font/myfontname-Bold.svg');
src: url('font/myfontname-Bold.eot');
src: url('font/myfontname-Bold.eot?#iefix') format('embedded-opentype'),
url('font/myfontname-Bold.woff2') format('woff2'),
url('font/myfontname-Bold.woff') format('woff'),
url('font/myfontname-Bold.ttf') format('truetype');
}
I've added the semi-colon
I believe that Ayush's answer may solve your problem! I would also like to add that the order in which the fonts are loaded may create some problems in some browsers and platforms. The order in which the src element is read varies depending on what browser and version are using it. Take the example below from CSS-Tricks,
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compatible 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 */
}
It's best to include SVG last because it might be picked up by some browsers (like the modern ones) where woff or woff2 is supported.
I have 4 Fonts I need to use on a website and i have there files in my website folder
Baskerville.ttc
BellGothicstd-Black.otf
BellGothicstd-Bold.otf
JennaSue.ttf
I have tried to Import the using #Import and The fonts still do not work here is what I used:
#import url(../fonts/BellGothicStd-Black.otf);
#import url(../fonts/BellGothicStd-Bold.otf);
#import url(../fonts/Baskerville.ttc);
#import url(../fonts/JennaSue.ttf);
I also tried to use the #font-face Rule this is what I used:
#font-face {
font-family: 'BellGothicBlack';
src: url('../fonts/BellGothic-Black.otf') format('OpenType'),
}
#font-face {
font-family: 'BellGothicBold';
src: url('../fonts/BellGothicStd-Bold.otf') format('OpenType'),
}
#font-face {
font-family: 'Baskerville';
src: url('../fonts/Baskerville.ttc') format('OpenType'),
}
#font-face {
font-family: 'JennaSue';
src: url('../fonts/JennaSue.ttf') format('TrueType'),
}
Could someone tell me what I'm doing wrong? I think I might be missing some code I'm not really sure.
Thanks in Advance
Tom
You will need to convert the font into the correct formats for all browsers to display them.. (check rights before you do this)
http://www.fontsquirrel.com/tools/webfont-generator
Your #font-face rule will also need to include all the font types...
Example:
#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 */
}
U need to generate font-faceto all the fonts for OS and Browser compatibility.
Font-face generator URL:http://www.fontsquirrel.com/tools/webfont-generator
#font-face {
font-family: 'Helvetica';
src: url('helvetica.eot');
src: url('helvetica.eot?iefix') format('eot'),
url('helvetica.woff') format('woff'),
url('helvetica.ttf') format('truetype'),
url('helvetica.svg#helvetica') format('svg');
font-weight: normal;
font-style: normal;
}
I'm using #font-face in my project for loading a specific webfont ("Amsi Pro"). The main problem is that it works on most of the computers I tested, but not on all (On those where it didn't work other websites with #font-face still worked).
Is there anything I've missed, or any server settings to set that will give me full support?
Some information of a PC where #font-face doesn't work:
whatsmybrowser.org/b/Q2TJ80F
Live Preview:
christlicher-gesundheitskongress.de
CSS:
#font-face {
font-family: 'AmsiPro';
font-weight: 400;
src: url('../webfonts/2E508B_0_0.eot');
src: url('../webfonts/2E508B_0_0.eot?#iefix') format('embedded-opentype'),
url('../webfonts/2E508B_0_0.woff2') format('woff2'),
url('../webfonts/2E508B_0_0.woff') format('woff'),
url('../webfonts/2E508B_0_0.ttf') format('truetype');
}
#font-face {
font-family: 'AmsiPro';
font-weight: 600;
src: url('../webfonts/2E508B_1_0.eot');
src: url('../webfonts/2E508B_1_0.eot?#iefix') format('embedded-opentype'),
url('../webfonts/2E508B_1_0.woff2') format('woff2'),
url('../webfonts/2E508B_1_0.woff') format('woff'),
url('../webfonts/2E508B_1_0.ttf') format('truetype');
}
html,body {
font-family: 'AmsiPro', Helvetica, sans-serif;
}
Even though it seems that Firefox 38 should support #font-face, there may be a partial use issue. Try using an app like Font-Squirrel to develop an SVG of your font and then reorder your #font-face like so:
#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 */
}
Per this source, it should maximize the amount of support your font has.
Hope this helped!
I was using the Open Sans Font-Family from the Google Fonts Library, where you can just use this:
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
And it will export all the fonts at once and when you are using Open Sans as Font-Family you can simply put font-weight: XXX and it will automatically use the right font for it.
I downloaded the files directly because we have to use them local now, but it gives me like 10 different fonts for each style and weight (normal, medium, bold, bold italic e.g). I don't want to import them separately and use font-family: Open-Sans-Bold (for example)
Is there any way to import them all at once or tell CSS that it's basically the same Font-Family just a different weight?
(Please excuse my example of Comic Sans neue, just something I had laying about)
You have to add them all separate, look at the following code. Each one has a different 'font-weight' and has a new font file (light, regular and bold).
Each font file has a different font-size which means that if you want to add all of them, you'll have to add them all this way (for each one you want).
#font-face {
font-family: 'Comic Neue';
src: url('../fonts/ComicNeue-Light.eot'); /* IE9 Compat Modes */
src: url('../fonts/ComicNeue-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/ComicNeue-Light.woff') format('woff'), /* Modern Browsers */
url('../fonts/ComicNeue-Light.ttf') format('truetype'); /* Safari, Android, iOS */
font-weight: 100;
}
#font-face {
font-family: 'Comic Neue';
src: url('../fonts/ComicNeue-Regular.eot'); /* IE9 Compat Modes */
src: url('../fonts/ComicNeue-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/ComicNeue-Regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/ComicNeue-Regular.ttf') format('truetype'); /* Safari, Android, iOS */
font-weight: 300;
}
#font-face {
font-family: 'Comic Neue';
src: url('../fonts/ComicNeue-Bold.eot'); /* IE9 Compat Modes */
src: url('../fonts/ComicNeue-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/ComicNeue-Bold.woff') format('woff'), /* Modern Browsers */
url('../fonts/ComicNeue-Bold.ttf') format('truetype'); /* Safari, Android, iOS */
font-weight: 700;
}
Calling it is simple after, in your CSS:
p {
font-family: 'Comic Neue', sans-serif;
font-weight: 300; /*or 100/700*/
}
Obviously, you'd replace this with Open Sans and the Open Sans font files.