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.
Related
i have wordpress site thet build with elementor,
and i have problem with the font family in mac it's change to a default font, and it's not let me override this font.
this the website
https://attenmind.co.il
i have tried to do a specific css rules to mac, and its not work
html[data-useragent*='Mac OS X'] {
font-family: inherit;
}
html[data-useragent*='Mac OS X 10_10'] {
font-family:inherit;
}
#font-face {
font-family: 'verdana';
src: url('https://attenmind.co.il/wp-content/themes/oceanwp/assets/fonts/verdana/Verdana.eot'); /* IE9 Compat Modes */
src: url('https://attenmind.co.il/wp-content/themes/oceanwp/assets/fonts/verdana/Verdana.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('https://attenmind.co.il/wp-content/themes/oceanwp/assets/fonts/verdana/Verdana.woff2') format('woff2'), /* Super Modern Browsers */
url('https://attenmind.co.il/wp-content/themes/oceanwp/assets/fonts/verdana/Verdana.woff') format('woff'), /* Pretty Modern Browsers */
url('https://attenmind.co.il/wp-content/themes/oceanwp/assets/fonts/verdana/Verdana.ttf') format('truetype'), /* Safari, Android, iOS */
url('https://attenmind.co.il/wp-content/themes/oceanwp/assets/fonts/verdana/Verdana.svg#svgFontName') format('svg'); /* Legacy iOS */
}
html,body{
font-family: 'verdana', Helvetica, sans-serif !important;
}
i just want po prevent mac to ovrride the font family..
thankyou all for the help.
Check if the font you are using is available in the target machine or if it is being loaded externally in your CSS in a supported format (Safari works well with format('truetype'), for instance).
If you have the following in CSS:
font-family: Arial, Helvetica, sans-serif;
The browser will first use the font "Arial". If the font is not available, it will fallback to the next ("Helvetica") and so on. If none is available, a default font in the browser will be used.
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 ''.
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
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 have the following lines in my CSS.
#font-face { font-family: Keffeesatz; src: url(/Styles/YanoneKaffeesatz-Light.otf) format("opentype") }
#font-face { font-family: KeffeesatzBold; src: url(/Styles/YanoneKaffeesatz-Bold.otf) format("opentype") }
In IE9, these show up. In IE8, it's using the fallback font, Arial. How do I get this to work in IE8?
You need to supply an EOT version of your font in order for older versions of IE to embed it. They won't recognize any other format, which is why you're observing the fallback to Arial.
Take your font to the Font Squirrel #font-face Generator and it'll prepare everything for you, including a new set of CSS #font-face rules to use over your existing ones.
Internet Explorer does not recognize your .ttf (TrueType) or .otf (OpenType) font faces in CSS3, at least not yet. IE recognizes an .eot (Embeddable Open Type).
#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 */
}
Take a look at here