I am trying to embed a font and I tried it before and it works. My code was just a regular one which is accepted by other browsers.
#font-face {
font-family: KozGoPr6N;
src: url('../font/KozGoPr6N-Bold.otf') format('opentype');
src: url('../font/KozGoPr6N-Bold.woff') format('woff');
font-weight: normal;
font-style: normal;
}
But then when I am trying to embed ShinGoPro it doesn't work at all.
This is my code before:
#font-face {
font-family: ShinGoPro-Bold;
src: url('../fonts/ShinGoPro-Bold.otf') format('opentype');
src: url('../fonts/ShinGoPro-bold.woff') format('woff');
font-weight: bold;
font-style: normal;
}
Then I use fontsquirrel and still it doesn't work.
#font-face {
font-family: 'a-otf_shin_go_pror';
src: url('../fonts/shingopro-regular-webfont.eot');
src: url('../fonts/shingopro-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/shingopro-regular-webfont.woff2') format('woff2'),
url('../fonts/shingopro-regular-webfont.woff') format('woff'),
url('../fonts/shingopro-regular-webfont.ttf') format('truetype'),
url('../fonts/shingopro-regular-webfont.svg#a-otf_shin_go_pror') format('svg');
font-weight: normal;
font-style: normal;
}
Somehow I've been thinking if this font is not applicable for embedding but then I do need to get this font to work for my web page. Does this font cannot really be embedded in CSS? Is there anything I can do for this to work?
EDIT
My code is for crossbrowser and it doesn't work at all. I linked the file of the font so that people can try what I'm trying to do. I already tried using fontsquirrel and it doesn't work at all.
Does this font cannot really be embedded in CSS? Is there anything I can do for this to work?
^ This is referring to all browsers.
Related
I am creating a simple web page and I am applying a custom font (Roboto). I have declared them in the CSS file but Chrome detects it fine and Safari does not.
#font-face {
font-family: 'Roboto';
src: url('/fonts/roboto500.eot');
src: url('/fonts/roboto500.eot') format('embedded-opentype'),
url('/fonts/roboto500.woff2') format('woff2'),
url('/fonts/roboto500.woff') format('woff'),
url('/fonts/roboto500.ttf') format('truetype'),
url('/fonts/roboto500.svg') format('svg');
}
#font-face {
font-family: 'Roboto';
src: url('/fonts/roboto700.eot');
src: url('/fonts/roboto700.eot') format('embedded-opentype'),
url('/fonts/roboto700.woff2') format('woff2'),
url('/fonts/roboto700.woff') format('woff'),
url('/fonts/roboto700.ttf') format('truetype'),
url('/fonts/roboto700.svg') format('svg');
}
h1.site-title,
h2.subtitles {
font-family: 'Roboto' !important;
font-weight: bold;
}
h4.subtitles {
font-family: 'Roboto' !important;
font-weight: bold;
}
p {
font-family: 'Roboto' !important;
font-weight: normal;
color: rgb(90, 90, 90);
}
I checked with the Safari console to see if it was getting the fonts, and it does, but when I look at the files one by one, they don't match the original font.
Finally, thanks to some comments and such, I got it to work using another download link:
https://fonts.googleapis.com/css?family=Roboto
From here Google offers different components to add to the CSS of your project, what I did was, just in case in the future that typography was no longer available in that link and I lost it, I downloaded it from the link that appears and I put it locally in my project and linked it with the relative path.
I have no idea if it was because the files I downloaded didn't work or any other reason, but the fact is that from this link and using only the one in woff2 format, it works both in Chrome and Safari.
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
src: url(../fonts/roboto/roboto.woff2) format('woff2');
}
I hope this may be of help to someone in the future. Many thanks to all of you who have responded.
I installed the "Recoleta" and "HK Grotesk" fonts on my website but both fonts are not loading on all devices and all browsers (specially Safari, as some people said it often loads on Chrome/Firefox).
I don't understand as the relative URLs are pointing well when I try them.
I'm using Gulp & Scss to compile my css (my fonts are in an original fonts.scss file compiled in a final app.css file).
I tried changing the position of fonts.scss (beginning/middle/end of app.scss) but doesn't change anything.
#font-face {
font-family: 'Recoleta', serif;
src: url('../fonts/recoleta/Recoleta-Medium.woff') format('woff');
src: url('../fonts/recoleta/Recoleta-Medium.eot?#iefix') format('embedded-opentype'),
url('../fonts/recoleta/Recoleta-Medium.eot') format('embedded-opentype'),
url('../fonts/recoleta/Recoleta-Medium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
font-display: swap;
}
#font-face {
font-family: 'HK Grotesk', sans-serif;
src: url('../fonts/hk-grotesk/HKGrotesk-Bold.woff2') format('woff2');
src: url('../fonts/hk-grotesk/HKGrotesk-Bold.eot') format('embedded-opentype'),
url('../fonts/hk-grotesk/HKGrotesk-Bold.woff') format('woff'),
url('../fonts/hk-grotesk/HKGrotesk-Bold.ttf') format('truetype');
font-weight: bold;
font-style: 400;
font-display: swap;
}
This is the expected result : https://ibb.co/MRMk1jM
I just needed to remove the 'serif' or 'sans-serif' in the font-family.
#font-face {
font-family: 'Recoleta';
}
#font-face {
font-family: 'HK Grotesk';
}
#vbernet Kindly, try to genrate the fonts files from this website: (https://www.fontsquirrel.com/tools/webfont-generator) and then implement it. I think one of the font file type is missing which support to safari browser.
I wanna make a website with a font named SutonnyMJ.TTF (in Bangla). I tried many resources, but i failed to do this.
i use #font-face { font-family: SutonnyMJ; src: url('../fonts/SutonnyMJ.TTF'); }
#font-face {
font-family: 'SutonnyMJ';
src: url('../fonts/SutonnyMJ-webfont.eot');
src: url('../fonts/SutonnyMJ-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/SutonnyMJ-webfont.woff') format('woff'),
url('../fonts/SutonnyMJ-webfont.ttf') format('truetype'),
url('../fonts/SutonnyMJ-webfont.svg#BebasNeueRegular') format('svg');
font-weight: normal;
font-style: normal;
}
but they does not work that i want.
Is there anyone to help me please, How can i solve this?
you can probably remove a couplke lines from there and remove legacy support your site will probably work fine with just this
#font-face {
font-family: 'SutonnyMJ';
src: url('../fonts/SutonnyMJ-webfont.woff') format('woff'),
url('../fonts/SutonnyMJ-webfont.ttf') format('truetype');
}
With #font-face you loaded in a custom font but you aren't using it yet
You still have to apply it to your website
body {
font-family: 'SutonnyMJ', sans-serif;
}
I coded a website on my mac, and i used a custom font. I defined the custom font with this font-face rule:
#font-face
{
font-family: gnuolane;
src: url('../fonts/gnuolane.otf'),
}
The problem is that the font is not loaded on any windows version of any browser. On my mac, on Safari/Chrome/FF is working perfect.
This is the website.
And this is how it is supposed to look like, when font-face is working correctly:
Thanks
LE:
I generated this code and all those files from fontsquirrel.com. Still not working. I tried with both '../fonts/gnuolane....' and '/fonts/gnuolane....'
#font-face {
font-family: 'gnuolane';
src: url('../fonts/gnuolane_rg-webfont.eot');
src: url('../fonts/gnuolane_rg-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/gnuolane_rg-webfont.woff') format('woff'),
url('../fonts/gnuolane_rg-webfont.ttf') format('truetype'),
url('../fonts/gnuolane_rg-webfont.svg#gnuolane_rgregular') format('svg');
font-weight: normal;
font-style: normal;
}
Still not working tho'..
Move all your font files (the actual fonts I mean) to the same folder as your CSS file...
Then use this block of CSS. Tell me if it works. I sense it's a path issue...
#font-face {
font-family: 'gnuolane';
src: url('gnuolane_rg-webfont.eot');
src: url('gnuolane_rg-webfont.eot?#iefix') format('embedded-opentype'),
url('gnuolane_rg-webfont.woff') format('woff'),
url('gnuolane_rg-webfont.ttf') format('truetype'),
url('gnuolane_rg-webfont.svg#gnuolane_rgregular') format('svg');
font-weight: normal;
font-style: normal;
}
try this
#font-face {
src: local('gnuolane'), url('/path_to/gnuolane.otf') format('truetype');
}
#font-face {
font-family: "England Hand";
src: url("fonts/englandhand.eot?#iefix") format("embedded-opentype"),url("fonts/englandhand.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
I have the above as the font style. Its included in the body of the page. I have not added the font family to a div and it renders there ohk. When I create a clone of this div and assign it another position and id, the font stops rendering.
There is also no error in the console. This error only occurs on IE 8 and works fine on IE 9 .
SOLUTION
Look out for js errors. Surely there will be one in there leading to the issue
I think your missing some prefixes for the ie8/ie9 support. Your code needs to look something like:
#font-face {
font-family: 'deutsch_gothicnormal';
src: url('deutsch-webfont.eot');
src: url('deutsch-webfont.eot?#iefix') format('embedded-opentype'),
url('deutsch-webfont.woff') format('woff'),
url('deutsch-webfont.ttf') format('truetype'),
url('deutsch-webfont.svg#deutsch_gothicnormal') format('svg');
font-weight: normal;
font-style: normal;
}