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
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 font showing locally, have uploaded the file to the website, and it still is not showing up on several browsers that I have tried. I've tried many different ways in my stylesheet.css and the main.css, but nothing is working.
Can anyone help me to see where I am not getting something right?
It is only the "Sarah Brody" that I am looking to add a script font to.
Thanks in advance... sarahbrody.me is the website.
Sue
You must define your font in CSS. Something like this:
#font-face {
font-family: "Aphrodite Stylistic";
src: url('font/aphrodite-stylistic.eot');
src: url('font/aphrodite-stylistic.eot?#iefix') format('embedded-opentype'),
url('font/aphrodite-stylistic.woff2') format('woff2'),
url('font/aphrodite-stylistic.woff') format('woff'),
url('font/aphrodite-stylistic.ttf') format('truetype');
font-weight: normal;
}
I noticed that in main.css you are importing webfonts/Great_Vibes/stylesheet.css but that file is missing. That's probably causing the problem. Check it's URL.
I am trying to add a local font to a site I am testing. It is called "AcrosstheRoad.ttf" and can be found in my assets/fonts/ folder. I am doing the following to try to read it into the CSS file:
#font-face {
font-family: 'AcrosstheRoad';
src: url('assets/fonts/AcrosstheRoad.ttf') format('truetype');
}
And I want to use it as a certain header type so I am using
h3{
font-family: 'AcrosstheRoad';
color: #333;
}
But unfortunately the font is not loading in. Does anyone know what I'm doing wrong?
Thanks!
Christina
First add a slash before assets:
(('/assets/fonts/AcrosstheRoad.ttf'))
That may or may not be the problem, depending on where your CSS file is, and how your website is structured.
If the above doesn't work, convert the font to .woff2 and .woff (try using this: http://www.fontsquirrel.com/tools/webfont-generator). The reasoning behind this is that some browsers are really picky. Change your CSS to:
#font-face {
font-family: 'AcrosstheRoad';
src: url('/assets/fonts/AcrosstheRoad.woff2') format('woff2'),
url('/assets/fonts/AcrosstheRoad.woff') format('woff');,
url('/assets/fonts/AcrosstheRoad.ttf') format('truetype');
}
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.