How can I load a custom font with CSS in Safari? - html

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.

Related

Fonts are not loading but URL is pointing well

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.

Does certain fonts can't be used for embedding in css?

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.

Rails/Heroku - font incorrect yet included in fingerprinted assets and not overridden, works fine in dev

In my css:
#font-face {
font-family: 'Montserrat Reg';
src: asset-url('montserrat-reg.eot');
src: asset-url('montserrat-reg.eot?#iefix') format('embedded-opentype'),
asset-url('montserrat-reg.woff2') format('woff2'),
asset-url('montserrat-reg.woff') format('woff'),
asset-url('montserrat-reg.ttf') format('truetype'),
asset-url('montserrat-reg.svg#montserratregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'Montserrat Bold';
src: asset-url('montserrat-bold.eot');
src: asset-url('montserrat-bold.eot?#iefix') format('embedded-opentype'),
asset-url('montserrat-bold.woff2') format('woff2'),
asset-url('montserrat-bold.woff') format('woff'),
asset-url('montserrat-bold.ttf') format('truetype'),
asset-url('montserrat-bold.svg#montserratbold') format('svg');
font-weight: normal;
font-style: normal;
}
This appears to compile properly in my fingerprinted assets but the page actually displays the default font despite the developer console in production showing:
body {
margin: 0px;
padding: 0px;
font-family: 'Montserrat Reg'; }
The above shows exactly the same in development as well. The sources tab shows that the files referenced in the css are being included when I hit Ctrl + F5 in production, however, in development mode, the sources tab does not list the font files which indicates the fonts are coming from somewhere else. This is the opposite of what I would expect. Any ideas what might prevent the browser from displaying properly?
Tested in Chrome and IE. For what it's worth I am also using font-awesome for the icons.
Rails 4.1.6 and 4.2.0

How to install font in a website in html css?

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;
}

font-face not working in firefox

I am having a hard time of why my font-face is not working in firefox, it worked perfectly fine in chrome, here's the css that I have:
#font-face {
font-family: 'ArvoRegular';
src: url('http://cf.shopious.com/fonts/arvo-fontfacekit/arvo-regular-webfont.eot');
src: url('http://cf.shopious.com/fonts/arvo-fontfacekit/arvo-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('http://cf.shopious.com/fonts/arvo-fontfacekit/arvo-regular-webfont.woff') format('woff'),
url('http://cf.shopious.com/fonts/arvo-fontfacekit/arvo-regular-webfont.ttf') format('truetype'),
url('http://cf.shopious.com/fonts/arvo-fontfacekit/arvo-regular-webfont.svg#arvoregular') format('svg');
font-weight: normal;
font-style: normal;
}
.arvo-regular {
font-family: 'ArvoRegular', Arial, sans-serif;
}
Here's the site. Based on my understanding that this is the correct way to do it
There's nothing I see wrong with your CSS. I'm betting it's a cross-domain issue (I've run into that in the past). Take a look at this article: http://davidwalsh.name/cdn-fonts.