So I have looked, looked, looked, changed and trialled but I can not for the life of me get this to work. Has anyone got any insight into where the problem lies?
#font-face {
font-family: 'customFont';
src: url('www.100%CorrectURL.com/font.eot');
src: url('www.100%CorrectURL.com/font.eot?#iefix') format('embedded-opentype'),
url('www.100%CorrectURL.com/font.woff') format('woff'),
url('www.100%CorrectURL.com/font.ttf') format('truetype'),
url('www.100%CorrectURL.com/font.svg#paulmaulregular') format('svg');
font-weight: normal;
font-style: normal;
}
The URL is definately correct (I have changed the one in the above source) but for some reason, it just doesn't load the font to the page.
Your code is correct, but you might remove this two tags:
font-weight: normal;
font-style: normal;
IT should work, otherwise, you need to use another webfont (google font are always working)
Note: the url "www.100%CorrectURL.com/font.eot" isn't existing, you need to add a correct url.
Related
I'm trying to add a custom font to my website, but keep getting the same error no matter what I try, and I can't find much about how to go about fixing it.
Here's my code:
#font-face {
font-family: "Moderna";
src: url("/MODERNA.TTF")
}
Suggestions?
The fontspring bulletproof syntax is just a recommendation. It declares your #font-face must satisfy below syntax to work properly in most cases:
#font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot?') format('eot'),
url('myfont-webfont.woff') format('woff'),
url('myfont-webfont.ttf') format('truetype'),
url('myfont-webfont.svg#svgFontName') format('svg')
}
Most browsers supports TTF fonts now but if you can't see the font in browser try this
#font-face {
font-family: "Moderna";
src: url("/MODERNA.TTF") format("ttf");
}
And if my memory serves me then the rule must be on top of your css file. And please check the file /MODERNA.TTF exists.
Pretty sure your path/url is causing this issue:
src: url("/MODERNA.TTF")
implies you're entering a direcory named 'MODERNA.TTF' and not a file.
As #Mik pointed out the recommended declaration should be fine – unless your file couldn't be found.
Depending on your html/css file structure it should rather be something like this:
(granted your font file resides in the same directory as your css.
#font-face {
font-family: 'Moderna';
src: url('MODERNA.eot?') format('eot'),
url('MODERNA.woff') format('woff2'),
url('MODERNA.woff') format('woff'),
url('MODERNA.ttf') format('truetype'),
url('MODERNA.svg#svgFontName') format('svg')
}
Keep also in mind, that referencing font files via #font-face is case-sensitive (there might be exceptions).
So double check if your exact font file name is really using uppercase letters (MODERNA.TTF or moderna.ttf).
Staging site: https://woocommerce-81222-860870.cloudwaysapps.com/
--
The live site shows the correct cursive font. But on the staging, it is not working. I had to update the theme, and now it does not work. I have the same paths too. Not sure whats going on.
I have tried different varieties of paths.
#font-face {
font-family: 'quentinregular';
src: url('font/quentin-webfont.woff2') format('woff2'),
url('font/quentin-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
I don't see any errors for the font face.
Image of the cursive font face
The font no longer exists at font/quentin-webfont.woff or font/quentin-webfont.woff2 you will need to locate the new path to the font files. Try searching in the file manager to find the fonts
In your head tag, you have a style tag that contains the following code:
#font-face { font-family:quentin;src:url(//81222-445514-raikfcquaxqncofqfm.stackpathdns.com/wp-content/uploads/2019/05/quentin.woff2) format('woff2'), url(//81222-445514-raikfcquaxqncofqfm.stackpathdns.com/wp-content/uploads/2019/05/quentin.woff) format('woff'), url(//81222-445514-raikfcquaxqncofqfm.stackpathdns.com/wp-content/uploads/2019/05/Quentin.ttf) format('truetype');}
So, there you have font-family:quentin;, but the CSS rules contain font-family:quentinregular;. You need to change that.
I have the following CSS code:
// theMixPlainSemiBold
#font-face {
font-family: 'theMixPlainSemiBold';
src: url('/css/fonts/... .eot');
src: url('/css/fonts/... .eot?#iefix') format('embedded-opentype'),
url('/css/fonts/... .svg#TheMixPlainSemiBoldSemiBold') format('svg'),
url('/css/fonts/... .woff') format('woff'),
url('/css/fonts/... .ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
I expect that this creates a new font family called theMixPlainSemiBold.
After importing this font I do:
.box {
...
font-family: 'theMixPlainSemiBold', sans-serif;
...
}
I have the box class that have theMixPlainSemiBold font family.
When I open the page I see sans-serif font in the .box.
What can be the problem? Same is happening for the other local web fonts while it works good with Google Fonts.
How can I debug the font problems? I don't see any errors/warnings in developer tools. It looks for me like the font is not loaded from local files...
First, using an unambiguous custom font-family name may help debugging since it will prevent your local fonts to be triggered and used.
Then, while this is not restricted to #font-face issues, Firefox developper tools' console can surely help debugging CSS issues.
In your case, it would have detected the bad comments:
Selector expected. Ruleset ignored due to bad selector. yourfile.css:23
In my case, due to bad editing after a copypasta I had a trailing comma instead of a semicolon, which prevented Firefox to download the font:
#font-face{
font-family: SuperFont;
src: url('../fonts/Superfont.ttf'),
}
The console came up with:
Error in parsing value for ‘src’. Skipped to next declaration. myfile:18
Or the console may complain about:
downloadable font: download failed (font-family: "myfont" style:normal weight:normal stretch:normal src index:0): status=2147746065 source: url/to/font.otf
(This would typically follow a 404 on the font URL, damned typos…)
While this is not a real answer to the question, I found the problem myself. Double-slashes (//) are not valid CSS comments! See this screenshot from Developer Tools:
So, my code becomes:
/* theMixPlainSemiBold */
#font-face {
font-family: 'theMixPlainSemiBold';
src: url('/css/fonts/... .eot');
src: url('/css/fonts/... .eot?#iefix') format('embedded-opentype'),
url('/css/fonts/... .svg#TheMixPlainSemiBoldSemiBold') format('svg'),
url('/css/fonts/... .woff') format('woff'),
url('/css/fonts/... .ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
The fonts are correctly loaded now.
#font-face {
font-family: anyname;
src: url('folder/folder2/folder3/theMixPlainSemiBold.ttf');
font-weight: normal;
font-style: normal;
}
then use it like this:
#sample{
font-family:anyname;
}
you can use any name in it. / is important in the url because it shows that it is inside a folder.
If you're prototyping and watching your freshly generated HTML as static, local files, the fonts might not load. ( Because of some cross-domain policies by the browser?)
So, would need to request your html via a (local) server.
please check your link to source
#font-face {
font-family: 'theMixPlainSemiBold';
src: url('../css/fonts/.eot');
src: url('../css/fonts/.eot?#iefix') format('embedded-opentype'),
url('../css/fonts/.woff') format('woff'),
url('../css/fonts/.ttf') format('truetype'),
url('../css/fonts/.svg#open_sanslight') format('svg');
font-weight: normal;
font-style: normal;
}
maybe you forgot about ../ because if fonts from google working normal so your link (source) your font must be wrong
I got this code that normally works but suddenly it does not, something I miss see that someone else see that's wrong?
#font-face {
font-family: 'OCRAExtendedRegular';
src: url('ocraextended.eot?#iefix');
src: url('ocraextended.eot?#iefix') format('embedded-opentype'),
url('ocraextended.woff') format('woff'),
url('ocraextended.ttf') format('truetype'),
url('ocraextended.svg#OCRAExtendedRegular') format('svg');
font-weight: normal;
font-style: normal;}
After coding this, I put in the html: font-family:'OCR A Extended'; at the div that's like this: <div id="left" style="padding-left:90px; margin-top:-67px; color:#ffffff; font-family:'OCR A Extended';">.
While typing: "font-family", you can add the font: OCR A Extended.
The CSS is linked with the webpage so in my opinion I think that there's nothing wrong..
Someone got an idea?
Thanks!
The name that you should call your font by in the CSS is defined in the #font-face declaration where it says font-family. You need to reference it with that name exactly:
font-family: 'OCRAExtendedRegular';
This documentation describes how font-family works in #font-face: it creates an arbitrary name which you can use to reference the font.
Use this
font-family: 'OCRAExtendedRegular';
instead of
font-family:'OCR A Extended';
this will work and also please be sure that the path you have given is correct
Here's what's frustrating here. I got a font pack for Sansation, and then tried to use it with #font-face. The regular version works and the "bold" version doesn't. I checked the filename and it's definitely correct. My understanding was that any font should work. Am I missing something?
#font-face
{
font-family: sansation_regular;
src: url('/fonts/sansation_regular-webfont.ttf'),
url('/fonts/sansation_regular-webfont.eot');
}
I then, without changing the font-family in the CSS corresponding to the text element, change it to:
#font-face
{
font-family: sansation_regular;
src: url('/fonts/sansation_bold-webfont.ttf'),
url('/fonts/sansation_bold-webfont.eot');
}
Thanks for any assistance.
You should probably also run the font through FontSquirel to get the full set
http://www.fontsquirrel.com/tools/webfont-generator
the css it'll generate will be something like:
/* fonts */
#font-face {
font-family: 'sansation_regular-webfont';
src: url('../fonts/sansation_regular-webfont.eot');
src: url('../fonts/sansation_regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/sansation_regular-webfont.woff') format('woff'),
url('../fonts/sansation_regular-webfont.ttf') format('truetype'),
url('../fonts/sansation_regular-webfont.svg#sansation_regular-webfont') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'sansation_bold-webfont';
src: url('../fonts/sansation_bold-webfont.eot');
src: url('../fonts/sansation_bold-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/sansation_bold-webfont.woff') format('woff'),
url('../fonts/sansation_bold-webfont.ttf') format('truetype'),
url('../fonts/sansation_bold-webfont.svg#sansation_bold-webfont') format('svg');
font-weight: normal;
font-style: normal;
}
Also I'd avoid using full ULR refs - just check the path to your fonts folder is correct from the css file
I've tested the Sansation with #font-face, and both the regular and bold versions seem to work when installed as system fonts. Maybe double check the paths?
If using a local file directory isn't working, try an absolute path. The following solution worked:
#font-face
{
font-family: sansation_regular;
src: url('http://www.siteAddress.com/fonts/sansation_bold-webfont.ttf'),
url('http://www.siteAddress.com/fonts/sansation_bold-webfont.eot');
}
As #DOLOisSOLO and #Mr. Lavalamp suggested, absolute paths should work.
For future reference, is your CSS file in a folder? If so then a relative path URL can be used, for example:
#font-face
{
font-family: sansation_regular;
src: url('../fonts/sansation_regular-webfont.ttf'),
url('../fonts/sansation_regular-webfont.eot');
}
The dots representing one level up each time.