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.
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'm building a website with Wordpress and want to use the Montserrat Google Font. I was made aware of the fact that establishing a connection to fonts.google.com could lead to problems regarding the new european General Data Protection Regulation, so i downloaded the font using Google Webfonts Helper.
I tried it locally (on my computer) with a copy of the website and it works perfectly. But when i apply the changes to the actual website the font is not being displayed.
The Firefox Network Analysis Tool shows the font being downloaded correctly.
However it does not appear in the fonts tab.
Any advice on how to debug this one?
EDIT: Heres the css
/* montserrat-regular - latin */
#font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
src: url('../fonts/montserrat-v12-latin-regular.eot'); /* IE9 Compat Modes */
src: local('Montserrat Regular'), local('Montserrat-Regular'),
url('../fonts/montserrat-v12-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/montserrat-v12-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/montserrat-v12-latin-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/montserrat-v12-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/montserrat-v12-latin-regular.svg#Montserrat') format('svg'); /* Legacy iOS */
}
/* montserrat-700 - latin */
#font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 700;
src: url('../fonts/montserrat-v12-latin-700.eot'); /* IE9 Compat Modes */
src: local('Montserrat Bold'), local('Montserrat-Bold'),
url('../fonts/montserrat-v12-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/montserrat-v12-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/montserrat-v12-latin-700.woff') format('woff'), /* Modern Browsers */
url('../fonts/montserrat-v12-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/montserrat-v12-latin-700.svg#Montserrat') format('svg'); /* Legacy iOS */
}
--
h1, h2, h3, .widget-title, h4, h5, h6 {
line-height: normal;
letter-spacing: 0;
margin: 0 0 15px 0;
font-family: "Montserrat", sans-serif;
font-weight: 400;
color: #2d2d2d;
-ms-word-wrap: break-word;
word-wrap: break-word;
}
EDIT 2: When using Chrome and goint to the network tab, the font files are marked as canceled instead of 200 OK. Console sais it has been blocked because "No 'Access-Control-Allow-Origin' header is present on the requested resource."
EDIT 3: I noticed that in the network tab (back in FF) the host for all resources is
url.com
but for the font files it is
www.url.com
Without seeing the CSS-Code it is hard to say what could have gone wrong.
Due to your concerns about the regulation:
What I know about is that using Google Fonts is legal if you inform you pack that information in your declaration of data protection.
Hope that helps
Ok apparently i messed up with the paths. I moved the font files into the wordpress folder, changed the path in the css accordingly and now it works though i don't really know why firefox showed me that the GET request was successful.
url('../fonts/....
is now
url('/fonts/.....
This question already has answers here:
#font-face fonts not working
(2 answers)
Closed 8 years ago.
I need to set a font family in my web page with thte #font-face, but I can't make it work propertly: This is the content of my css file
#font-face {
font-family: knockout;
src: url('../fonts/knockoutHTF27.ttf');
}
body {
font-width: normal;
font-size: 20px;
font-family: knockout !important;
color: #223041;
text-align: center;
}
I've tried the same code in two diferent computers and it works pefercty in one of them but doesn't work in the other. What could be wrong?
You should try with full embedding, with all the quotation marks. It clears possible malfunctions on different browsers/OS.
#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 */
}
Then, use it like this:
body {
font-family: 'MyWebFont', Fallback, sans-serif;
}
As mentioned in a previous answer, if needed, you can use http://www.fontsquirrel.com/ or one of other font-face generator services on the web, to get all needed font formats.
Try after removing ''
src: url(../fonts/knockoutHTF27.ttf);
You must use other font file format for different browesers not only .ttf, .woff, .eot. And check your path
I am trying to use a custom font in CakePHP but it doesn't seem to be working.
I am getting the font from http://www.dafont.com/ssf4-abuket.font (A Street Fighter font!!). And I store the ttf font file to webroot/css.
This is my CSS:
#font-face {
font-family: 'SF';
src: url('StreetFighter.ttf') format('truetype');
}
p {
height: 50%;
margin: 30px 0;
text-align: center;
font-size: 2.2rem;
font-family: 'SF';
color: #000;
}
However, when I use a different font such as the Arkitech from http://www.1001freefonts.com/ with the same code but different filename it works.
As you are only having a .ttf file for your font-face, not all browsers can use .ttf font files. You have to declare alternative font formats in the #font-face css.
You can generate these other font formats with an online converter. (for example: http://freedockstar.com/fontface/).
Then you need to have the following font-face declaration:
#font-face {
font-family: 'SF';
src: url('StreetFighter.eot'); /* IE9 Compat Modes */
src: url('StreetFighter.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('StreetFighter.woff') format('woff'), /* Modern Browsers */
url('StreetFighter.ttf') format('truetype'), /* Safari, Android, iOS */
url('StreetFighter.svg') format('svg'); /* Legacy iOS */
}
I've tried your font with this tool and it generates a working preview of your webfont.
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.