I'm trying to import a font to website I'm making using #font-face. But it won't work on Chrome what so ever, and sometimes it works on Firefox and sometimes not.
So I have no idea what is going on.
This is what I've tried so far:
#font-face {
font-family: "Proxima Nova";
src: url('fonts/Proxima Nova.otf') format('opentype');
}
That almost worked in Firefox but Chrome didn't even want to display it, instead it showed some weird font with completely random size that had nothing to do with the css entered.
Then I tried this:
#media screen and (-webkit-min-device-pixel-ratio:0) {
#font-face {
font-family: 'proxnova';
src: url('fonts/ProximaNovaSemibold.otf') format('opentype');
font-weight: normal;
font-style: normal;
}
}
This fixed sizing issues but now it doesn't show proper font anywhere. Please help.
You have to use different font formats for different browsers. Sorry about that... :(
Source: http://css-tricks.com/snippets/css/using-font-face/
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
You can use a website like http://www.fontsquirrel.com/ to automatically generate everything you need.
Related
I tried to get the font "Merriweather" to work in different ways:
Connection via
<link href="https://fonts.googleapis.com/css2?family=Merriweather:ital#1&display=swap" rel="stylesheet">
doesn't work;
Took the font here with the required parameters
#font-face {
font-family: 'Merriweather';
font-style: italic;
font-weight: 400;
src: url('../fonts/merriweather-v22-latin_cyrillic-regular.eot'); /* IE9 Compat Modes */
src: local('Merriweather Regular'), local('Merriweather-Regular'),
url('../fonts/merriweather-v22-latin_cyrillic-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/merriweather-v22-latin_cyrillic-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/merriweather-v22-latin_cyrillic-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/merriweather-v22-latin_cyrillic-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/merriweather-v22-latin_cyrillic-regular.svg#Merriweather') format('svg'); /* Legacy iOS */
}
doesn't work.
Generated .woff, .woff2, .svg and .ttf in Font Squirrel - doesn't work.
I specify the font for the tag as follows:
font-family: 'Merriweather', serif;
What could be the problem? This is the only font that does not work on iOS (Chrome, Safari) and works on Android, the other two are in order, connected in the above ways.
Found a solution, very simple, but not immediately obvious to me. Third option with Font Squirrel works if you select Custom Subsetting and check Language when creating in Expert mode.
My fonts are working on the desktop version of my website, however they don't seem to work on a mobile device.
I've tried adding some global css code but it doesn't seem to make a difference. Not sure whether there are faults in the code or not.
#font-face {
font-family: ‘Rajdhani-Medium’;
src:
url('https://donneverzekeringen.be/wp-content/uploads/2019/05/Rajdhani-Medium.eot'); /* IE9 Compat Modes */
src:
url('https://donneverzekeringen.be/wp-content/uploads/2019/05/Rajdhani-Medium.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('https://donneverzekeringen.be/wp-content/uploads/2019/05/Rajdhani-Medium.woff') format('woff'), /* Pretty Modern Browsers */
url('https://donneverzekeringen.be/wp-content/uploads/2019/05/Rajdhani-Medium.ttf') format('truetype'), /* Safari, Android, iOS */
url('https://donneverzekeringen.be/wp-content/uploads/2019/05/Rajdhani-Medium.svg#svgRajdhani-SMedium') format('svg'); /* Legacy iOS */
font-weight: normal;
font-style: normal;
}
Does somebody notice an error in the code above or knows a reason why it isn't working on mobile? Thanks in advance!
Your first line font-family: ‘Rajdhani-Medium’; doesn't use the normal single quotes.
Replace ‘’ with ''.
This question already has answers here:
How to add some non-standard font to a website?
(21 answers)
Closed 5 years ago.
I found the most beautiful font here. I want to use it. I tried following:
#font-face {
font-family: myFirstFont;
src: url(http://fontsforweb.com/font/show/?id=78041);
}
div {
font-family: myFirstFont;
}
(Source: https://www.w3schools.com/css/css3_fonts.asp)
That is not source for font its just website where you can download it. Download font and place in folder fonts then change your code src to that path.
Download the full zip file, Extract it then put it in your project then use this code:
#font-face {
font-family: myFirstFont;
src: url(MonsieurPomme.woff);
}
div {
font-family: myFirstFont;
}
You need to download the font files and add links to the various formats, depending on which browsers you want to support:
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
See https://css-tricks.com/snippets/css/using-font-face/ for more info.
Using font-face.
#font-face{
font-family: ((fontName));
src: url(fontname.woff);
}
Then you can call it just as how you call other fonts.
You need to directly link to the font file instead of just the webpage.
#font-face {
font-family: myFont;
src: url('font.eot'); /* IE9 Compatible Modes */
src: url('font.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('font.woff2') format('woff2'), /* Super Modern Browsers */
url('font.woff') format('woff'), /* Pretty Modern Browsers */
url('font.ttf') format('truetype'), /* Safari, Android, iOS */
url('font.svg#svgFontName') format('svg'); /* Legacy iOS */
}
div {
font-family: 'myFont', serif;
}
I'm having trouble getting a font to display in Google Chrome (Version 51.0.2704.106 (64-bit))
Safari and Firefox work fine.
Here is the code I am using as an example.
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
font-weight: normal;
font-style: normal;
}
I have converted the font to woff2 on multiple sites. What might the problem be?
I recently had browser issues implementing #font-face on a website. Here were some of the solutions that worked:
Try using "" instead of '' for the url and format
Try not calling .svg last
Try specifying font-weight and font-style for each #font-face reference
Did you correctly reference the font-family later in the CSS?
With all the above changes, your code might look like this:
#font-face {
font-family: "MyWebFont";
src: url("webfont.eot"); /* IE9 Compat Modes */
src: url("webfont.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
url("webfont.svg#svgFontName") format("svg"); /* Legacy iOS */
url("webfont.woff2") format("woff2"), /* Super Modern Browsers */
url("webfont.woff") format("woff"), /* Pretty Modern Browsers */
url("webfont.ttf") format("truetype") /* Safari, Android, iOS */
font-weight: normal;
font-style: normal;
}
Later on in the stylesheet:
body {
font-family: "MyWebFont";
}
I'm trying this code For the #fontface for an arabic font :
#font-face {
font-family: 'MothnnaFont';
src: url('fonts/mothnna.eot'); /* IE9 Compat Modes */
src: url('fonts/mothnna.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/mothnna.woff') format('woff'), /* Modern Browsers */
url('fonts/mothnna.ttf') format('truetype'), /* Safari, Android, iOS */
url('fonts/mothnna.svg#svgMothnnaFont') format('svg'); /* Legacy iOS */
}
I'm using the font in a class named demo :
.demo
{
font-family:'MothnnaFont',Sans-Serif;
width:800px;
margin:10px auto;
text-align:center;
border:1px solid #666;
padding:10px;
direction: rtl;
}
This code is working on ie but it's not working on firefox 10 or chrome 17
Here is a demo http://tmr.hyperphp.com/font/demo.html
Here is how the font should look like
So anybody can help me to make this font appear a cross all browsers ?
Solved: just downloaded the font and converted it again and it's all working now
thank you all for helping
This syntax of embedding web-fonts is not bulletproof anymore.
Try using the Fontspring syntax instead:
#font-face {
font-family: 'MothnnaFont';
src: url('fonts/mothnna.eot?#iefix') format('embedded-opentype'),
url('fonts/mothnna.woff') format('woff'),
url('fonts/mothnna.ttf') format('truetype'),
url('fonts/mothnna.svg#svgMothnnaFont') format('svg');
}
It's just the first double appearance of the "src"-attribute you have to fix.
This will solve your problem.
For more information about the syntax, take a look at this source. And by the way, fontsquirrel is also using this syntax as its default.