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;
}
Related
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;
}
I am at that point where I don't know anymore what I should have coded wrong. For test purposes I want to use a local font for my website. But I don't get it to be displayed on all devices. Here's my code:
HTML:
<head>
some basic stuff ...
<link rel="stylesheet" href="css/style.css">
</head>
CSS:
body {
overflow-x:hidden;
font-family: 'Circular Std Book', Helvetica, Arial, " sans-serif"!important;
src: url('CircularStd-Book.eot');
src: url('CircularStd-Book.eot?#iefix') format('embedded-opentype'),
url('CircularStd-Book.woff') format('woff'),
url('CircularStd-Book.ttf') format('truetype'),
url('CircularStd-Book.svg#CircularStd-Book') format('svg');
}
Example image
It does work on my desktop computer, but not on any other pc...
Thanks for your help.
Still not working with this one:
#font-face {
font-family: 'Circular Std Book', Helvetica, Arial, " sans-serif"!important;
src: url('../font/CircularStd-Book.eot');
src: url('../font/CircularStd-Book.eot?#iefix') format('embedded-opentype'),
url('../font/CircularStd-Book.woff') format('woff'),
url('../font/CircularStd-Book.ttf') format('truetype'),
url('../font/CircularStd-Book.svg#CircularStd-Book') format('svg');
}
body {
overflow-x:hidden;
font-family: 'Circular Std Book', Arial, sans-serif;
}
Your example seems to be missing #font-face
See an example of it here: https://css-tricks.com/snippets/css/using-font-face/
#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 */
}
body {
font-family: 'MyWebFont', Fallback, sans-serif;
}
Also as mentioned, check the path is correct. The path is relative to the CSS file itself.
Defining a fallback option in the font-family with the !important tag caused this error. I've removed the fallback and here's the final working code:
#font-face {
font-family: 'CircularStdBook';
src: url('CircularStd-Book.eot');
src: url('../font/CircularStd-Book.eot?#iefix') format('embedded-opentype'),
url('../font/CircularStd-Book.woff') format('woff'),
url('../font/CircularStd-Book.ttf') format('truetype'),
url('../font/CircularStd-Book.svg#CircularStd-Book') format('svg');
}
body{
overflow-x:hidden;
font-family: 'CircularStdBook', Arial, sans-serif;
}
Thank's for your help.
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'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've tried many of the solutions found in other topics but still the font won't load in IE8.
The fonts are converted by FontSquirrel and also the CSS has been generated there. No alternation.
According to the other topics.. it should work now. But.. it does not. Is there any workaround to make it work? Or is it just one of those things i can keep hating ie8 about?
Problem can be seen on this URL: www.kokomogroningen.nl
Font-face is currently:
#font-face {
font-family: 'dincondregularregularcondRgRgularregularcondRgRgularregularcondRgRg';
src: url('/css/ff_din_condensed_regular-webfont.eot');
src: url('/css/ff_din_condensed_regular-webfont.eot?#iefix') format('embedded-opentype'),
url('/css/ff_din_condensed_regular-webfont.woff') format('woff'),
url('/css/ff_din_condensed_regular-webfont.ttf') format('truetype'),
url('/css/ff_din_condensed_regular-webfont.svg#dincondregularregularcondRgRgularregularcondRgRgularregularcondRgRg') format('svg');
font-weight: normal;
font-style: normal;
}
Source http://css-tricks.com/
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
This may also help
Font Face not working in IE8 as expected