I used Google web font "Droid Arabic Kufi" in my web application, the font works on Google Chrome, Mozilla Firefox and Microsoft Edge, But it does not work on the Apple Safari .. What I'm doing is:
1- Import the font in the top of the CSS file:
#import url(http://fonts.googleapis.com/earlyaccess/droidarabickufi.css);
2- Used it, For Example:
body {
font-family: 'Droid Arabic Kufi', sans-serif;
background-color: #f8fafb;}
Why Safari browser does not recognize the font like the other browsers does?
I solved the issue by using the following steps:
1- Download .ttf format file and include it to my project files.
2- Use the #Font-face attribute property to manually define font name and giving source file.
#font-face {
font-family: Droid Arabic Kufi;
src: url(../../fonts/Droid.Arabic.Kufi.ttf);}
3- Access the defined font in any element required with Font-family property.
body {
font-family: 'Droid Arabic Kufi', sans-serif;
background-color: #f8fafb;}
Using this way the font work perfect on the following browser:
Apple Safari
Google Chrome
Microsoft Edge
Mozila Firefox
Opera
Related
I'm making a portfolio with Vue. I would like the global font style to be Montserrat, but Chrome is the only browser that's reflecting the CSS. Both Safari and Firefox are throwing errors in the inspector saying that they can't reach Google Fonts url.
I've tried using #import syntax, font-face syntax, and href links in the HTML. I also tried downloading the fonts and hosting them in my Vue app, but I can't seem to get it to work -- I'm still new with Vue.
Currently:
<link href="https://fonts.googleapis.com/css? family=Montserrat:400&display=swap" rel="stylesheet">
This can get Chrome to show the correct font. If I pull the URL and paste it into either Firefox or Safari, both will be unable to load the page. When opening the inspector, both show that they can't load the resource from fonts.google.
In App.vue style section:
#app {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
font-family:'Montserrat', Arial, sans-serif;
font-style: normal;
font-weight: normal;
}
I have also tried to swap the HTML with:
#font-face {
font-family: 'Montserrat';
src: url('/assets/fonts/Montserrat-Regular.woff2') format('woff2'),
url('/assets/fonts/Montserrat-Regular.woff') format('woff'),
url('/assets/fonts/Montserrat-Regular.ttf') format('truetype');
}
and I have also tried the basic:
#import url('https://fonts.googleapis.com/css?family=Montserrat:400&display=swap');
Nothing has worked. You can literally paste
https://fonts.googleapis.com/css?family=Montserrat:400&display=swap
into Chrome & you can see the font selectors, but in Firefox & Safari you can't even load the page.
I expected the Montserrat font in Safari, Firefox, and Chrome, but I only see it rendering in Chrome.
Solved: Conflicts in the host file prevent Google fonts from loading in non-Chrome browsers, or from relaying fonts to other devices when acting as local host.
I try to install Roboto on my website, using Google Fonts, and I feel desperate to see that Roboto is bolder (much bolder) in Firefox than in Google Chrome.
Here are my codes :
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700" rel="stylesheet">
And
p
{
font-size: 1.4rem;
line-height: 1.5;
font-family: "Roboto", sans-serif;
letter-spacing: 0;
color: #313131;
}
And here are two preview of Roboto Font, first with Firefox, second with Chrome:
As you can see, the Chrome Roboto is much lighter.
I don't know why it happen, but I've find something on Google Font. Using Firebug on their own code, I discover that the Roboto Font used on their website has attributes :
element.style {
font-family: "Roboto script=all rev=1";
}
And when you remove the "Script=all rev=1", Roboto become much bolder in Firefox and in Chrome (but so much in Firefox). Just like on my Work in progress.
Does somebody have an answer, a solution, or something? I feel lonely to see that not even Google can inform me about what is script=all rev=1 and why it makes Roboto much lighter on Google Font.
The reason it is lighter is because Chrome is using a locally installed Roboto Font which does not have the bold version, and it is thus falling back to the thin version (rather than switching to the web font.) This is arguably a Chrome bug but I don't know of any existing report.
According to Force Chrome to use external font in CSS the special font name works because the Google Web Font stylesheet gives an alternate name for the font "Roboto script=all rev=1", which obviously doesn't exist on the user's local system and thus gets served by web font.
I've imported the (in)famous open sans to my CSS. Everything was fine at first.
However, today I noticed that some of the characters (şğü) are not being displayed properly in Firefox. They work fine in Internet Explorer and Chrome, but they're being replaced by the default font in Firefox.
I was thinking, this should be a quick-to-solve issue. Any ideas?
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic);
p {
font-family: "Open Sans";
font-size: 4em;
}
<p>Example şğü.</p>
By default, many Google fonts support Basic Latin repertoire only (effectively Windows Latin 1 set); this covers e.g. ü but not the Turkish letters you are using. The repertoire can be selected with checkboxes in the UI of Google Fonts, but this is rather unnoticeable. In this case, you need to add the parameter subset=latin,latin-ext:
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic&subset=latin,latin-ext);
p {
font-family: "Open Sans";
font-size: 4em;
}
<p>Example şğü.</p>
I have some web applications that follow metro style of the Microsoft (ie.: new outlook).
But I'm having troubles with the fonts that I used.
The default font is "Segoe" family, when an user enter in the application in a system that have the desktop font Segoe UI, everything is alright. But in some cases users are using Mac or Ubuntu that don't come with the "Segoe UI" and the navigator uses the secundary font (in my case, Tahoma).
In the new Outlook don't matter what OS you are using, it always uses Segoe UI family (I think that they are using web fonts)
Some people spoke to me use web fonts, but I didn't find in nowhere (I searched in alot of web fonts sites) web fonts of Segoe family.
Does someone have any idea how I solve this situation?
First of all there are difrent types of fonts for every browser. To make sure that it will work in every browser You need to put at least 3 types: eot, ttf, woff (and svg). The best way to get those is to use one of the links: http://www.fontsquirrel.com/fontface/generator, http://fontface.codeandmore.com/
It's very simple and You will get a set of ready to use fonts. After downloading Your set You will find the example file where You will see how to use Your new fonts.
In Your case it can be like:
#font-face {
font-family: 'Segoe';
src: url('/font_path/Segoe.eot');
src: url('/font_path/Segoe.eot?#iefix') format('embedded-opentype'),
url('/font_path/Segoe.woff') format('woff'),
url('/font_path/Segoe.ttf') format('truetype'),
url('/font_path/Segoe.svg#Segoe') format('svg');
font-weight: normal;
font-style: normal;
}
/font_path/ is the relative path to your fonts according to this css file. Usually it's ../fonts/.
Why You need all those?
ttf, otf - for: FireFox, Chrome < 6, Safari and Opera
oet - for: Internet Explorer < 9
svg - for: Safari Mobile (iPhone, iPad for iOS < 4.2), Android browser
woff - for: Internet Explorer >= 9, FireFox >= 3.6, Chrome >= 6
Segoe.eot - and others are links (relative in this case) to those font files.
EDIT
Because fontsquirrel.com don't render some fonts, andfontface.codeandmore.com have changed to commercial sometimes You will have to google for some other online font generator.
EDIT
If fontsquirrel.com won't help You try to use: http://www.font2web.com/
Use CSS to specify a location where the font can be downloaded if it is not available in the OS. Add this to the start of your CSS file:
#font-face {
font-family: Segoe;
src: url('/fonts/segoe.ttf');
}
The ttf format works for most browsers. For IE, add the location of an eot version to your conditional IE stylesheet:
#font-face {
font-family: Segoe;
src: url('/fonts/segoe.eot');
}
Our users facing the same issue with Segoe. Solution is to remove the font foreign language in TTF Names using Fontforge
http://fontface.codeandmore.com/blog/ie-7-8-error-with-eot-css3111/
What do the numbers mean?
The reason for asking is that the fonts are not rendering correctly using the following CSS:
#font-face {
font-family: 'letter';
src: url('../fonts/letter-bold.otf') format('opentype');
font-weight: bold;
}
.title {
font-size: 22pt;
font-family: letter,Arial,Helvetica,sans-serif;
font-weight: bold;
}
Not the question here, but you could answer in a comment - is '../fonts/' correct for #font-face to load from a path relative to the css file?
It means that there was an error. In Firefox/Firebug, there is no resources tab, but in the network tab it will show 304 Error not found for the same font files.
And the fonts were not downloadable due to MIME settings. #font-face not working on windows server?
The correct MIME type is provided in this SO answer: Proper MIME type for fonts
Can Chrome render OTF font files? I believe Chrome uses the .woff font type for font embed. If you don't have a woff file type use font squirrel to generate new font sources. EOT is for IE, Woff is for Safari/Chrome, it will also output TTF and SVG for you.
I think that will fix the issue.
Here is a link to the generator: http://www.fontsquirrel.com/fontface/generator