I'm working on this website and so far for my fonts I have been using variables such as:
#mainFont: {
font-family: 'Open Sans', sans-serif;
}
The client I'm working for has finally bought the Adobe font he wants to use. He sent me two otf files and I can't get them to work in my css. I've installed them just by right-clicking them and selecting "Install" and I've added them into the work folder. My VS code plugin for folder navigating shows me I'm selecting the right files, and I'm using the code here:
#font-face: {
font-family: mainFont;
src: url(../fonts/nameoffont.otf);
}
CSS
h2 {
font-family: mainFont;
}
Unfortunately, doesn't work. I've tried putting "mainFont" with quotation marks as well.
Can someone please help me? I'd first love to use the font myself and second - make sure that it's visible for everyone out there.
Thank you kindly, Delo
Related
After reviewing https://developer.mozilla.org/en-US/docs/Web/CSS/#font-face as well as every single Big Cartel post on the internet regarding this specific issue, I have found no luck. The code is placed at the top of the document. I have tried it with and without apostrophes, format, and the formal font name "When Regular". I have copied and pasted the code from my CSS below.
Any ideas? Thank you. !!!
Edit: When hosting locally, the font still did not work. Shouldn't the answer to this be very simple?
#font-face {
font-family: when;
src: url(https://github.com/zenblatchley/when/blob/main/When-Regular.ttf) format(truetype);
}
* {
font-family: when;
}
I've just installed a new text font called Skyfont. Can't get it to work and I've been declaring it with #font-face and there is no element in the html that should block it. Here's the CSS code:
h1 {
text-align: center;
font-family: 'Skyfont Regular';
color: #000000;
font-size: 26pt;
font-weight: bold;
margin-top: 26px;
right: 50%;
text-decoration: none;
}
#font-face {
font-family: 'Skyfont Regular';
font-style: normal;
font-weight: normal;
src: local('Skyfont Regular'), url(fonts/Skyfont-NonCommercial.otf) format('otf');
}
Thanks for all help I can get :) I
f there is anything missing that I haven't written, please tell me.
A few plausible explanations:
you forgot the quotes around the url path in the src property
you are targeting the wrong path. Have a look at the developer console of your browser to check whether your are successfully requesting the font file or not. You can open it by pressing Control+Shift+J (or Command+Option+J on Mac) in Chrome or Control+Shift+K (or Command+Option+K on Mac). Head over to the network window and reload the page. Try to find the name of the font file (which should be Skyfont-NonCommercial.otf according to your css). You should see a 200 status next to it, meaning your browser successfully fetched the file. If not, it means your file cannot be found at the given address (for other HTTP status codes, see here).
your .otf file is corrupted or has the wrong file extension
I hope this helps.
There is strange browser behavior with fonts installed locally in Windows 10.
If you drag fonts files to C:\Windows\Fonts windows installs them into user profile
C:\Users\YourName\AppData\Local\Microsoft\Windows\Fonts.
Chrome won't see that font in #font-face tag, so local('Skyfont Regular') will never work.
This may be unexpected consequence of this bug, that got fixed recently #font-face src: local() should take font face name, not family name
Workaround is to install fonts into C:\Windows\Fonts, you can do this by right-clicking fonts files and choose 'Install fonts for all users'.
This morning my webpage and whole website looked totally different.
Although I didn't even touched anything. I found other people on the Google product forum who complain about the same thing. But I want a solid solution.
I use a css file from where I import the font
#import url(https://fonts.googleapis.com/css?family=Josefin+Sans);
This is used on every page.
Now it seems that Google changed the font this night into a, for me, horrible looking font.
Now I found another font, which I want to download and use on my server, so this kind of google jokes never effect me anymore.
But I can't if I can do this and how.
My question is: can I download a font store it on my server and use it in my CSS?
Sure, you just need to define the font in your CSS and where it is located
You can define a font with
#font-face { font-family: 'myfont';
src: url('path/to/yourfont.ttf') format('truetype'); }
and then use it like this (with a Fallback to a default font):
.classname {
font-family: 'myfont', Arial, Helvetica, sans-serif;
}
I found a 'fast' solution for this
The 'thin' version was used here, but was not specified. Google changed the options and you need to specify with specific font version you want. In my case it was
#import url(https://fonts.googleapis.com/css?family=Josefin+Sans:300);
My website looks 'normal' again :)
The Google blog forum discribes some other solution
Google blog
I have seen so many questions relevant to this,and also i tried them too,but none of them helped me.
I have downloaded a font and placed it inside my project folder in asp.net.
I called that font using #font-face.
But it never works.
I gave reference for all the three formats of fonts namely .eot,.otf,.ttf.
Can anybody help me to fix this..
CSS
#font-face
{
font-family: MyriadPro-Regular;
font-style: normal;
src: url('Fonts/MyriadPro-Regular.ttf'),
url('Fonts/myriadpro-regular.eot'),
url('Fonts/MyriadPro-Regular.otf');
}
Thanks in advance..
You have to check VS version and its compatibility with the font you downloaded.
I am working on a website that needs embedded fonts.
Everything looks great, except, if I delete the local Prelo fonts from my machine (backed them up) the fonts stop working in the browser. Of COURSE this is because there is an error in my code and I fix it and it works again.
(so the problem is... is there a work-around for "disabling" the local fonts or telling the browser not to look locally for fonts other than needed system fonts?)
Is there a way other than deleting the fonts locally to test in the browser? It seems that Chrome and FF default to my system fonts if they can't find the embedded fonts.
Thanks in advance!
Just rename the font you want to test, make sure its not a name you have locally.
i.e:
change:
#font-face {
font-family: System;
font-style: normal;
src: url(system.eot);
}
div {
font-family: System;
}
to
#font-face {
font-family: WebTest;
font-style: normal;
src: url(system.eot);
}
div {
font-family: WebTest;
}
Type Wonder will let you type in a URL and select a web font. Then it will show you what your page would look like with the new font. Pretty slick.
http://typewonder.com