There is an issue OS X where some elements are not displaying the text correctly, even though there are elements alongside it that do show.
Abbreviated example:
Font-face declaration:
#font-face {
font-family: 'FontFamily';
src: src: url(data:application/x-font-woff;...);
font-weight: 700;
font-style: normal;
}
CSS
.navbar-collapse > .nav > li > a {
font-family: "FontFamily", sans-serif;
font-weight: 700;
color: #000;
}
HTML
<div class="navbar-collapse">
<ul class="nav">
<li>Home</li>
<li class="dropdown">
Admin
<ul class="dropdown-menu"></ul>
</li>
</ul>
</div>
Outcome (missing home link above admin):
A second example where a labels height is messed up but the text is visible within the label. Again renders correctly on non-OS X setups.
The link correctly renders in Chrome/Firefox/IE/Chrome Emulator but it does not render in OS X across all browsers (and iOS).
Is it because you've got the link set to be coloured white on a white background?
.navbar-collapse > .nav > li > a {
font-family: "FontFamily", sans-serif;
font-weight: 700;
color: #000000;
}
Try That :)
Or,
.navbar-collapse > .nav > li > a {
font-family: "FontFamily", sans-serif;
font-weight: 700;
color: initial;
}
After researching this I found that it shouldn't be an issue. However, I would suggest adding the full stack of different font file types. Typically, OTF and TTF are iOS friendly. For my sites, I use the following in order:
eot
svg
eot?#iefix
woff
ttf
This is just my preference and has been tested to work in all browsers/devices. I am sure someone can comment to say that other order may work for them.
I use this code for maximum compatibility, but you have to add all format:
#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 */
}
There is a misspelling in your code:
you've typed "src:" twice
src: src: url(data:application/x-font-woff;...);
Maybe this code will work:
src: url(data:application/x-font-woff;...);
This turned out to be an issue with the y-height was being setup in the font when being embedded (or something along those lines) with font squirrel. Changing the settings around on the vertical metrics option fixed it.
Related
Does rails come with custom fonts? If not, where are my fonts coming from?
I see this code in my css:
.hero-unit h1 {
font-size: 54px;
font-family: "museo-slab-1","museo-slab-2";
margin-bottom: 10px;
z-index: 30;
position: relative;
}
But I don't see that font-facedeclaration anywhere nor do I see any app/assets/fonts files. I see this:
and this in main.css
#font-face {
font-family: 'Pictos';
src: url('pictos-web.eot');
src: local('☺'), url('pictos-web.woff') format('woff'), url('pictos-web.ttf') format('truetype'), url('pictos-web.svg#webfontphKv1xv9') format('svg');
font-weight: normal;
font-style: normal;
}
and I see this in app/images/new/home/<project>/d.css:
In short, my font reckless is slow to load and loads after buttons load. This is problem. Why is this so slow? Why does my server on localhost seem to make a GET request to get the font? Is it on another process with a different port?? Also, how is my Future PT font being loaded? I can use it under font-family already. Where is this font being loaded?
Working on this page: https://solderless.github.io
The title looks like this on my phone (using chrome / ios 10):
And like this on my desktop:
As you can see, the iOS version seems stretched horizontally (the 2 bars that make the L do not have the same weight for instance)
This is using Google font for delivering the fonts and the CSS is fairly simple:
h1,h2 {
text-align: center;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
margin-top: 50px;
margin-bottom: 50px;
}
h1 {
font-size: 40px;
}
Any idea what could make the difference disappear?
I'm working on a Ionic project, and for some reason the font we are using is not rendering properly in iOS (in Android it's working well). We used the #font-face rule in order to use the font. It works well if I switch to another font (I've tried with other truetype fonts).
#font-face {
font-family: 'font_title';
src: url('../fonts/font_name.otf') format("opentype");
}
Here's an Example of what happens: The title should say "Notificación", but instead it shows "Notiffjcación". This other image shows how instead of "..." it shows "%.", and you could also see the different color at the accent mark.
¿Can anybody tell me if there's a workaround for this issue or should we just use another font? ¿is this problem caused by the font or by the OS?
Thanks in advance!
You can always convert the font online at:
https://onlinefontconverter.com/
and check if it works. Once done with conversion lets say to true type font. You can use it like this.
#font-face {
font-family: 'Tangerine';
font-style: normal;
font-weight: normal;
src: local('Tangerine'), url('http://example.com/tangerine.ttf') format('truetype');
}
body {
font-family: 'Tangerine', serif;
font-size: 48px;
}
In my jQuery mobile app I want to use a custom font family , I have tired the following code but it didnt work .How can I use a custom font file in jQuery mobile ?
Please help me
CSS
#font-face{
font-family:'Roboto-Light';
src: url("Fonts/Roboto-Light.ttf");
}
font {
text-shadow:0 0 0;
-moz-user-select: none;
-webkit-user-select: none;
font-family: "Roboto-Light" !important;
}
Once you define the Roboto font family, you have to apply it as the default font on the page:
body, .ui-btn {
font-family: Roboto-Light;
}
Make sure your path Fonts/Roboto-Light.ttf is correct.
You can also use google fonts if you will be connected to the internet, put this line in your CSS:
#import url(http://fonts.googleapis.com/css?family=Roboto:400,300,500,700);
Also, for a more cross-browser solution you get eot, woff, and svg versions of the font as well as the ttf, then define the new font-face like this:
#font-face {
font-family: 'roboto';
src: url('fonts/roboto-regular-webfont.eot');
src: url('fonts/roboto-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/roboto-regular-webfont.woff') format('woff'),
url('fonts/roboto-regular-webfont.ttf') format('truetype'),
url('fonts/roboto-regular-webfont.svg#robotoregular') format('svg');
font-weight: 400;
font-style: normal;
}
Here is a DEMO using google fonts
You would do it the same way as you do it in a web page. Just make sure your font directory exists and you are pointing to it correctly.
For a good example of how to do it correct go here:
http://www.fontsquirrel.com/
I have not had any luck changing the line height for sIFR. I have tried changing the sIFR css and config file as well as my general style sheet. Is there a special trick?
GENERAL CSS
h1 {
font-family: Georgia, Times, serif;
font-size: 24px;
font-style: normal;
line-height: 16px; (has had zero impact, even when I go negative)
color: #000000;
text-transform: uppercase;
margin: 0;
padding: 0;
outline: none;
}
CONFIG FILE
sIFR.replace(minionpro, {
selector: 'h1', wmode: 'transparent',
css: '.sIFR-root { color:#000000; text-transform: uppercase; }'
});
Flash uses leading instead of line-height, so simply just use:
sIFR.replace(minionpro, {
selector: 'h1', wmode: 'transparent',
css: '.sIFR-root { color:#000000; text-transform: uppercase; leading: 1.5; }'
});
The leading value must just be a number on its own with no measurement value such as px, em, %, etc.
At first I thought it wasn't working, but I realized that the units for leading are totally different from em. I tried a larger value "leading: -10;" and it worked fine. I'm using sIFR 3 r436.
I'm going to take a wild guess and say that because your font-size > line-height (24px > 16px) sIFR is going to ignore the line-height property and use the font-size to create your flash.
If you're trying to get two lines of overlapping text (24px text on a 16px line will result in 8px of overlap), you're probably stretching the capabilities of sIFR.
EDIT
It looks like sIFR has some strange methods for calculating font size based on different factors...check out the link for the details (without knowing your version of sIFR, I can't comment on your situation).
Novemberborn: Font Sizing with sIFR
Line height inside the Flash movie is controlled using the (custom) leading CSS property for the .sIFR-root class. Flash doesn't have the concept of line-height as you might be familiar with from CSS.