I have done this before, but still haven't mastered it. I downloaded a font kit from fontsquirrel.com and tried to get my custom font to work on my site. I have tried so many variations including the "bullet proof" methods found online that I have now confused myself. Could someone look at the code below and show me how to correctly get a custom font to work on a website using #font-face?
I have a style sheet named fonts.css located in a folder named css. This is being used to call the custom font. The font files are located in a folder from the root named fonts.
The css for the style sheet fonts is:
#font-face {
font-family: 'BebasNeueRegular';
src: url('../fonts/bebasneue-webfont.woff') format('woff'),
url('../fonts/bebasneue-webfont.ttf') format('truetype'),
url('../fonts/bebasneue-webfont.webfontABYyK1dn') format('svg');
font-weight: normal;
font-style: normal;
The other styles sheets for layout, etc call the font like this:
}
#merchandise h1 {
font-family: "Bebas Neue", Arial, Helvetica, sans-serif;
font-size: 33px;
font-weight: normal;
line-height: normal;
text-transform: uppercase;
letter-spacing: 1px;
}
Anything obvious? Of course, it works locally on my machine because I have the font installed.
In #merchandise h1, font-family: "Bebas Neue" needs to be font-family: "BebasNeueRegular"
or
In #font-face, font-family: 'BebasNeueRegular' needs to be font-family: 'Bebas Neue'
Related
So I downloaded a font (legally I bought it)
and the font looks really good. but it only displays in the brackets live preview.
when I open it in chrome, it just refuses to work. I followed all the instructions on the font when I bought it. Can anyone help me?
This is an image of the bracket font display which is what I want:
And this is the exact same code when I open the index.html file in Google Chrome.
This is the code I am using to get the font in CSS
#font-face{
font-family:"Ethnocentric W05 Italic";
src:url("/fonts/MTI-WebFonts-367222846/Fonts/5118942/e91f32ff-44ec-47c0-afd3-5cdeeb6c73c8.woff2")
format("woff2");
}
and this is what I used to put it in the header
font-family: "Ethnocentric W05 Italic";
If you declare a custom font using #font-face, the browser will try to fake the bold and italic styles if it can’t find them.
Instead of defining separate font-family values for each font, You can use same font-family name for each font, and define the matching styles, like so:
[css]#font-face {
font-family: 'Ubuntu';
src: url('Ubuntu-R-webfont.eot');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'Ubuntu';
src: url('Ubuntu-I-webfont.eot');
font-weight: normal;
font-style: italic;
}
#font-face {
font-family: 'Ubuntu';
src: url('Ubuntu-B-webfont.eot');
font-weight: bold;
font-style: normal;
}
#font-face {
font-family: 'Ubuntu';
src: url('Ubuntu-BI-webfont.eot');
font-weight: bold;
font-style: italic;
}
.test {
font-family: Ubuntu, arial, sans-serif;
}[/css]
Then all you need to do is apply that single font-family to your target, and any nested bold or italic styles will automatically use the correct font, and still apply bold and italic styles if your custom font fails to load.
I am beginner in a coding world and asking the first question in here, hope I will explain myself correctly!
I have uploaded Proxima Nova Regular and Open Sans Light via font face and included below styling in my css file. Both fonts work, but not the way they should be. Proxima Nova renders with much more weight on, in comparison to the one installed on my computer. Also both fonts don't pick up html bolding feature? to make text bold I need to specify font weight in css file, there is no other way? Not sure what the problem is. I have tried to find a solution but couldn't find any. Maybe it is something really basic that I haven't been able to grasp yet during my learning journey.
I have downloaded fonts with the Font Squirrel.
Fonts are based in a separate assets folder to my css file.
I have tried to clear my font cache multiple times and it didn't help.
I am working with Chrome however have the same issue with other browsers: Mozilla and IE.
This is a font I am after and I had it working on my pc, having proxima nova and open sans installed locally: https://www.katietreggiden.com/about
this is what i get via font face and web server: https://youmedigital.com/
Thank you for your help in advance:-)
#font-face {
font-family: "Proxima Nova";
src: local("Proxima Nova");
src: url("assets/fonts/Proxima Nova.woff") format("woff"),
url("assets/fonts/Proxima Nova.woff2") format("woff2"),
url("assets/fonts/Proxima Nova.ttf") format("truetype");
font-style: normal;
font-weight: normal;
}
#font-face {
font-family: "Open Sans";
src: local("Open Sans");
src: url("assets/fonts/Open Sans Light.woff") format("woff"),
url("assets/fonts/Open Sans Light.woff2") format("woff2"),
url("assets/fonts/Open Sans Light.ttf") format("truetype");
font-style: normal;
font-weight: normal;
}
body {
font-family: "Proxima Nova";
font-weight: 300;
color: #575757;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Open Sans";
font-weight: 300;
color: #000000;
}
I installed a font to the site but it will only show on Chrome (I checked on Firefox and Explorer). I dont know if I am missing something in the coding?
Font Face
#font-face {
font-family: 'octin_sports_freeregular';
src: url('octinsports-webfont.eot');
src: url('octinsports-webfont.eot?#iefix') format('embedded-opentype'),
url('octinsports-webfont.woff') format('woff'),
url('octinsports-webfont.ttf') format('truetype'),
url('octinsports-webfont.svg#octin_sports_freeregular') format('svg');
font-weight: normal;
font-style: normal;
}
Then in the HTML:
<link rel="stylesheet" href="http://weareprodigy.co/stylesheet.css" type="text/css" charset="utf-8">
And in the headings:
h1 {
font-size: 32px;
font-size: 2.25rem;
font-family: 'octin_sports_freeregular', Impact, Charcoal, sans-serif;
text-shadow: 2px 4px 3px rgba(0,0,0,0.7);
}
h2 {
font-size: 28px;
font-size: 1.875rem;
font-family: 'octin_sports_freeregular', Impact, Charcoal, sans-serif;
color: #8CC63E;
-webkit-text-stroke-width: .5px;
-webkit-text-stroke-color: black;
}
Link: www.weareprodigy.co
Each browser uses a different way of loading in the font, some use the EOT file, some use the WOFF file.
You currently only have the EOT file uploaded to the server and chrome uses the EOT file but IE & Firefox will use one of the other two formats.
You will need to make sure that the files are uploaded in the correct place and that within your CSS, you are linking to the correct place.
EDIT
Just had a look through your CSS. Theres no need to have the additional style.css at root level because in the actual theme, the fonts are already been called in. My guess is that the fonts have been put at the root level and not within the theme folder.
EDIT 2
Change your themes style.css file (wp-content/themes/epik/style.css) to show this
#font-face {
font-family: 'octin_sports_freeregular';
src: url('../../../octinsports-webfont.eot');
src: url('../../../octinsports-webfont.eot?#iefix') format('embedded-opentype'),
url('../../../octinsports-webfont.woff') format('woff'),
url('../../../octinsports-webfont.ttf') format('truetype'),
url('../../../octinsports-webfont.svg#octin_sports_freeregular') format('svg');
font-weight: normal;
font-style: normal;
}
Since the fonts are in the root, that should direct to the root file as the css is looking for the fonts in the epik theme folder atm.
So I'm having problems understand why IE is ignoring my CSS here. I have this code:
<h2>Har du stadsnät eller kan du få det?</h2>
I.e. nothing weird or anything.
And here is the resulting rendering:
But here is the CSS code for this HTML:
.rubrik, h2 {
font-family: Lato;
font-size: 32px;
font-weight: normal;
line-height: 38px;
font-variant: normal;
font-style: normal;
color: #969696;
}
Which clearly states that the H2 should have "normal" as font weight, yet the rendered text is clearly bold, here is a correct rendering (from Safari)
So, using the included developer tools of Internet Explorer 8, I inspect the CSS interpretation, and that looks like this:
As I understand it, what I am looking at here is IE8's interpretation of my CSS, and suspiciously missing is the "normal" attribute. IE has converted the CSS to the one-line version of "font" but didn't include the "normal" part. Now, the font "Lato" is a font-face font, and the font-face CSS is here:
#font-face {
font-family: Lato;
src: url('/media/fonts/Lato.eot');
src: local('nofont'), url('/media/fonts/Lato.ttf') format('truetype');
}
#font-face {
font-family: Lato;
src: url('/media/fonts/Lato-Bold.eot');
src: local('nofont'), url('/media/fonts/Lato-Bold.ttf') format('truetype');
font-weight: bold;
}
#font-face {
font-family: Lato;
src: url('/media/fonts/Lato-Bold-Italic.eot');
src: local('nofont'), url('/media/fonts/Lato-Bold-Italic.ttf') format('truetype');
font-weight: bold;
font-style: italic;
}
#font-face {
font-family: Lato;
src: url('/media/fonts/Lato-Italic.eot');
src: local('nofont'), url('/media/fonts/Lato-Italic.ttf') format('truetype');
font-style: italic;
}
Even when specifying "normal" in the font-face declaration for font-weight, it doesn't work. So I'm stuck here, trying to figure out what I am doing wrong not to have IE include "font-weight: normal" in the declaration for H2... Any guesses? Thanks in advance...
I think you need to change the name of the font-family: Lato; on each fontface property, as IE is possibly getting confused. Instead try putting font-family: Lato-bold;, font-family: Lato-italic etc. Also, if the font has a bold face (like Lato does and you have referenced in the fontface properties) then you do not need to add font-weight: bold; for a fontface property, as the font is already bold and adding the font-weight will just add faux-bold and make it look bad.
This means that for your h2, you only need to put font-family: Lato; if you want it to be the normal, non-bold version.
This may be an inheritance issue. Have you tried putting the !important keyword.
font-weight: normal !important;
I'm trying to use #font-face, but I'm not being very successfull.
Up till now, I've been using Google fonts:
// HTML header
<link href='http://fonts.googleapis.com/css?family=Cuprum' rel='stylesheet' type='text/css'>
//CSS
#leftSection nav {
font-family: "Cuprum", Verdana, Arial, sans-serif;
}
Then I downloaded the fonts and tried using font-face:
This is my CSS:
#font-face {
font-family: 'Cuprum';
font-weight: normal;
font-style: normal;
font-size: 0.5em;
src: url('cuprum.eot?') format('eot'),
url('cuprum.woff') format('woff'),
url('cuprum.ttf') format('truetype'),
url('cuprum.svg#Cuprum') format('svg');
}
#leftSection nav {
font-family: "Cuprum", Verdana, Arial, sans-serif;
}
The fonts are located in the same folder as the CSS.
I've looked at, and tested oteher solutions, but I'm still not able to get it wokring.
I'm testing with the following browsers: FF7, IE8
Update
I've added font-size: 0.5em; This should at least change the font size. But that's not happening either. So I'm guessing the entire #font-face is ignored.
Did you try using the Font Squirrel generator? Just upload the font and it will do everything for you, it's real simple.
Here is the link:
http://www.fontsquirrel.com/fontface/generator
Hey Steven are you done with this?
Why dont you try this out.
insert this inside your css:
#font-face {
font-family: 'Cuprum';
font-style: normal;
font-weight: normal;
src: local('Cuprum'), url('http://themes.googleusercontent.com/static/fonts/cuprum/v1/sp1_LTSOMWWV0K5VTuZzvQ.woff') format('woff');
}
#leftSection nav {
font-family: Cuprum, Verdana, Arial, sans-serif;
}
i hope it will work. :)
I think you could try it without the quotes around "Cuprum".
#leftSection nav {
font-family: Cuprum, Verdana, Arial, sans-serif;
}
Also, there is sometime an issue if you/the user have that font installed locally.
To get around that, you can set a fake local reference.
See Paul Irish's Bulletproof #font-face syntax
EDIT
Two other things you might try:
change the font name to lowercase, cuprum.
Remove the following from the declaration:
font-weight: normal;
font-style: normal;
font-size: 0.5em;