I tried every trick on the book I know. But When I jump to quickly from one webview to another the custom font get lost and does not render anymore.
I have a font inside the native code and a #font-face fallback on the css part:
Logging from XCode:
Nea: (
"Nea-Bold",
"Nea-Regular"
)
From the css file:
$PLANET-FONT-FAMILY-BLACK: "Nea-Bold", "Nea Bold", "neaboldwebfont", "Avenir LT Std 85 Heavy", "Arial";
$PLANET-FONT-FAMILY-BOOK: "Nea-Regular", "Nea Regular", "nearegularwebfont", "Avenir LT Std 85 Roman", "Arial";
/* Fonts */
#font-face {
font-family: 'Nea Bold';
font-style: normal;
font-weight: normal;
src: url("../../../../../assets/fonts/nea/nea-bold-webfont.svg#neabold") format("svg"),
url("../../../../../assets/fonts/nea/nea-bold-webfont.ttf") format("truetype"),
url("../../../../../assets/fonts/nea/nea-bold-webfont.eot") format("opentype"),
url("../../../../../assets/fonts/nea/nea-bold-webfont.woff") format("woff");
}
#font-face {
font-family: 'Nea Regular';
font-style: normal;
font-weight: normal;
src: url("../../../../../assets/fonts/nea/nea-regular-webfont.svg#nearegular") format("svg"),
url("../../../../../assets/fonts/nea/nea-regular-webfont.ttf") format("truetype"),
url("../../../../../assets/fonts/nea/nea-regular-webfont.eot") format("opentype"),
url("../../../../../assets/fonts/nea/nea-regular-webfont.woff") format("woff");
}
It works most of the time unless, I reload the webview too fast. What I am doing wrong ?
Related
I'm using the Roboto font on my site and it's not rendering properly on Safari for iOS (i.e. it's not using the Roboto font)
I already tried adding the following to my css:
#import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
as well as adding the following:
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'),
local('Roboto-Regular'),
url('fonts/Roboto-Regular.ttf') format('truetype');
}
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'),
local('Roboto-Medium'),
url('fonts/Roboto-Medium.ttf') format('truetype');
}
to no avail.
I would greatly appreciate some help solving this. Has anyone solved this?
I have a problem.
I have this stylesheet source
#font-face {
font-family: 'proxima-nova';
src: font-url(/assets/proxima_nova_reg-webfont.woff) format('woff');
font-weight: 400;
font-style: normal;
}
The compiled version by sprocket is
#font-face {
font-family: 'proxima-nova';
src: url(/assets/proxima_nova_reg-webfont.woff) format("woff");
font-weight: 400;
font-style: normal
}
The double quote in format are an issue for me because when I use in my rails template
=File.read "#{Rails.root}/public#{stylesheet_path('amp/application', host: nil)}"
The result is
#font-face{
font-family:'proxima-nova';
src:url(/assets/proxima_nova_reg-webfont.woff) format("woff");
font-weight:400;
font-style:normal
}
And the stylesheet looks corrupted
To solve I'm using
=File.read("#{Rails.root}/public#{stylesheet_path('amp/application', host: nil)}").gsub(/[\"]/,"'")
But is not a good solution
So I can see the needed result on GoDaddy and on Gmail but iOS Mail App keeps showing a plain Times New Roman with no margins/align. Just plain text shown on a Times New Roman font.
I can't really understand why that happens since my "fallback" fonts are Helvetica and Arial and I receive dozens of HTML emails daily with different fonts and even images and it all looks cool for them..
<!--[if mso]>
<center>
<table><tr><td width="580">
<![endif]-->
<style type="text/css">
/* cyrillic-ext */
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v15/0eC6fl06luXEYWpBSJvXCBJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
/* cyrillic */
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v15/Fl4y0QdOxyyTHEGMXX8kcRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v15/-L14Jk06m6pUHB-5mXQQnRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v15/I3S1wsgSg9YCurV6PUkTORJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* vietnamese */
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v15/NYDWBdD4gIq26G5XYbHsFBJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v15/Pru33qjShpZSmG3z6VYwnRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v15/Hgo13k-tfSpn0qi1SFdUfVtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
</style>
<div style="max-width:580px; margin:0 auto; font-size: 18.5px;">
<span style="font-family: 'Roboto Light', Helvetica, Arial; font-weight: 300;">Some text
</span>
</div>
<!--[if mso]>
</td></tr></table>
</center>
<![endif]-->
I have a Rails 4 app that I just deployed to ninefold. None of the stylesheets or fonts are rendering.
In my assets folder I have layout/fonts/*all-my-font-files
Then in `social.css.scss' I have:
#import '/layout/fonts';
#font-face {
font-family: 'Mono Social Icons Font';
src: asset_url('MonoSocialIconsFont-1.10.eot');
src: asset_url('MonoSocialIconsFont-1.10.eot?#iefix') format('embedded-opentype'),
asset_url('MonoSocialIconsFont-1.10.woff') format('woff'),
asset_url('MonoSocialIconsFont-1.10.ttf') format('truetype'),
asset_url('MonoSocialIconsFont-1.10.svg#MonoSocialIconsFont') format('svg');
src: asset_url('MonoSocialIconsFont-1.10.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Is this correct?
Rather than asset_url, use font-url
You shouldn't need this: #import '/layout/fonts';
Just something like:
#font-face {
font-family: 'Mono Social Icons Font';
src: font-url('MonoSocialIconsFont-1.10.eot');
src: font-url('MonoSocialIconsFont-1.10.eot?#iefix') format('embedded-opentype'),
font-url('MonoSocialIconsFont-1.10.woff') format('woff'),
font-url('MonoSocialIconsFont-1.10.ttf') format('truetype'),
font-url('MonoSocialIconsFont-1.10.svg#MonoSocialIconsFont') format('svg');
src: font-url('MonoSocialIconsFont-1.10.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
application.rb
config.assets.paths << "#{Rails.root}/app/assets/fonts"
in assets/fonts put your font with the following extensions (font could be converted on http://www.font2web.com/)
.eot
.otf
.svg
.ttf
.woff
assets/stylesheets/application.css.scss
#mixin font-face($family, $url-without-ext, $font-weight: normal, $font-style: normal) {
#font-face {
font-family: "#{$family}";
src: font-url("#{$url-without-ext}.eot");
src: font-url("#{$url-without-ext}.eot?#iefix") format("embedded-opentype"),
font-url("#{$url-without-ext}.woff") format("woff"),
font-url("#{$url-without-ext}.ttf") format("truetype"),
font-url("#{$url-without-ext}.svg##{$family}") format("svg");
font-weight: $font-weight;
font-style: $font-style;
}
}
# then include you fonts (for example)
#include font-face("Arsis", "Arsis");
#include font-face("Georgia", "Georgia");
then it could be used in css
font-family: "Georgia";
(Just a day ago i've tested it on Rails 4.0.3 production, everything works fine!)
I call a mixin less function twice with different parameters but the result is the same and created by first parameters. There is a example:
Input:
.font-face (#fontName, #fontFileName)
{
#font-face {
font-family: #fontName;
src: url("../../fonts/#{fontFileName}.eot");
src: url("../../fonts/#{fontFileName}.eot?#iefix") format("embedded-opentype"),
url("../../fonts/#{fontFileName}.woff") format("woff"),
url("../../fonts/#{fontFileName}.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
}
.font-face ("BMitra", "BMitra");
.font-face ("BMitraBold", "BMitraBold");
Output:
#font-face {
font-family: "BMitra";
src: url("../../fonts/BMitra.eot");
src: url("../../fonts/BMitra.eot?#iefix") format("embedded-opentype"), url("../../fonts/BMitra.woff") format("woff"), url("../../fonts/BMitra.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "BMitra";
src: url("../../fonts/BMitra.eot");
src: url("../../fonts/BMitra.eot?#iefix") format("embedded-opentype"), url("../../fonts/BMitra.woff") format("woff"), url("../../fonts/BMitra.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
What's the problem?
I use dotless in a ASP .Net MVC 3.0 application.
Both #media and #font-face are supported by both less.js and dotless in the current version.
However putting #font-face blocks in through a mixin is relatively new territory - there looks like a bug.
[edit]
There is already a bug for less.js which has a work-around.
[Edit 2]
This is now fixed in dotless main.
Bad news: #media and #font-face support in LessCSS. '#font-face' is not really supported yet with LESS CSS :(