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 ''.
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.
I am developing an Angular application that shows content from a certain custom font file if the user goes offline at any point. The font file is referenced in a CSS file.
The trouble is that the custom font file is not downloaded till it comes time to display the content about the fact that the user is offline, but at that point the user is already offline and the font file obviously cannot be downloaded. The relevant CSS section is below.
Any hints on if there is a way to download the font files before hand?
#font-face {
font-family: 'someFamily';
src: url('fonts/someFamilyIcons.eot'),
url('fonts/someFamily.ttf') format('truetype'),
url('fonts/someFamily.woff') format('woff'),
url('fonts/someFamily.svg') format('svg');
font-weight: normal;
font-style: normal;
}
You can use a file to base64 encoder and load your font that way.
This could potentially help.
Once you have a base64 string, you can load it onto your site like so:
#font-face {
font-family: 'someFamily';
src: url('fonts/someFamilyIcons.eot'),
src: url(data:application/x-font-woff;charset=utf-8;base64,THE_BASE64_STRING) format('woff');
font-weight: normal;
font-style: normal;
}
#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 */ }`
I would also suggest this line of code for further support with different browser because some browsers may not support your fonts or if the font site is down you won't have to worry about the change of fonts later
body { font-family: 'MyWebFont', Fallback, sans-serif; }
Here is a link for reference:
CSS tricks font reference
The following CSS works for me to make FontAwesome visible in all browsers, except it doesn't work for IE7. Struggling to work out how to fix it.
#font-face {
font-family: 'FontAwesome';
src: url('fontawesome-webfont.eot'); /* IE9 Compat Modes */
src: url('fontawesome-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fontawesome-webfont.woff') format('woff'), /* Modern Browsers */
url('fontawesome-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('fontawesome-webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
Im not using any advanced CSS like the :before selector, Even this doesn't work:
<span style="font-family:FontAwesome;"></span>
The FontAwesome download on the GitHub site has a specific IE7 stylesheet with worked for me.
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.
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.