I've done some research, and it seems that if you're using a different font for the bold and italic variants of your sIFR font (as opposed to letting Flash fake it with the B and I buttons) then you have to include the fonts in your SWF, and then write code like this:
sIFR.replace(sentinel, {
selector: '.intro p',
css: [
'.sIFR-root { font-family: "Sentinel-Medium"; }',
'strong { font-family: "Sentinel-Bold"; }',
'em { font-family: Sentinel-MediumItalic; }',
'a { color: #0000ff; }',
'a:hover { color: #ff0000; }'
]
});
When I do that, the flash movie comes up empty. I'm guessing this is just a syntax problem with my code. Any suggestions?
Update: I managed to get this mostly working (demo page) using the following code, but I can't get the nested styles to work properly. For example, I turned em text red and strong text blue -- but then if I try to set em text inside a strong to purple, it changes ALL ems to purple.
sIFR.replace(sentinel, {
selector: '.sifr-test',
css: [
'.sIFR-root { font-family: "Sentinel Medium"; }',
'strong { font-family: "Sentinel Bold"; font-weight: normal; color: #6666ff; }',
'em { font-family: Sentinel Medium Italic; font-style: normal; color: #ff6666; }',
'strong em { font-family: Sentinel Semibold Italic; font-weight: normal; font-style: normal; color: #ff66ff; }',
'a { color: #0000ff; }',
'a:hover { color: #ff0000; }'
]
});
Not sure if you can do that, the CSS support in Flash isn't very advanced.
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 added fonts in my theme but still getting 404.
import "utils/reset.less";
#apos-ui-font-path: '/modules/theme/public/css/font-awesome/fonts/';
.apos-add-font('roboto', #apos-ui-font-path + 'roboto-regular-webfont');
// Delete the boilerplate CSS below when you are ready to dive in and customize your sites
body { background-color: #apos-white;
}
.main-content {
margin: 200px auto;
padding: 20px;
max-width: 500px;
color: #apos-white;
background-color: #apos-primary;
.apos-drop-shadow;
.login-link {
float: right;
color: #apos-white;
}
// Basic rich-text editor styles:
h3 {
font-size: 24px;
margin-bottom: 12px;
}
h4 {
font-size: 20px;
margin-bottom: 10px;
}
strong { font-weight: bold; }
em { font-style: italic; }
}
Also I have attached my index.js
module.exports = {
construct: function(self, options) {
// loads from public/js/site.js of this module
self.pushAsset('script', 'popper');
self.pushAsset('script', 'bootstrap.min');
self.pushAsset('script', 'particles');
self.pushAsset('script', 'custom');
// loads from public/css/site.less of this module
self.pushAsset('stylesheet', 'jquery-3.2.1.min');
self.pushAsset('stylesheet', 'bootstrap.min');
self.pushAsset('stylesheet', 'font-awesome/font-awesome.min');
self.pushAsset('stylesheet', 'style');
self.pushAsset('stylesheet', 'site');
}
};
Did i miss something because my fonts are not working with apostrophe cms? or path is incorrect? How can i provide the relative path in theme for fonts
Thanks in Advance
Have you tried removing '/public' from the URL to your fonts. See the tutorial page for an example.
This code resolved my Question.
#font-face {
font-family: 'Roboto-Regular';;
src: url('/modules/mytheme/fonts/Roboto-Regular.woff') format('woff');
}
#font-face {
font-family: 'Roboto-Light';;
src: url('/modules/mytheme/fonts/Roboto-Light.woff') format('woff');
}
I've set up my font faces like stated in the answer to this question: font-face not working on mobile
Here is how I have it set up:
#font-face {
font-family: 'SF Distant Galaxy';
src: url('./files/SFDistantGalaxy.eot');
src: url('./files/SFDistantGalaxy.eot?#iefix') format('embedded-opentype'),
url('./files/SFDistantGalaxy.woff2') format('woff2'),
url('./files/SFDistantGalaxy.woff') format('woff'),
url('./files/SFDistantGalaxy.ttf') format('truetype'),
url('./files/SFDistantGalaxy.svg#SFDistantGalaxy') format('svg');
font-weight: normal;
font-style: normal;
}
and here is it being used:
#title {
font-family: 'SFDistantGalaxy';
letter-spacing: 3.3px;
text-align: center;
color: #f8e71c;
font-size: 95px;
}
When I open it on my browser, it loads just fine. But when I open it on my phone, it is showing Times New Roman.
Here is the site:
http://starwarsplanets.com/
I would love any feedback for this! Thanks!
You need to change the css font title to match the font face:
#title {
font-family: 'SF Distant Galaxy';
color: #f8e71c;
font-size: 95px;
margin: 10px 0 10px 0;
display: block;
position: fixed;
left: 0;
top: 0;
width: 100%;
}
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 ?
I am having a headache getting iOS 7/8 to render my fonts properly. It appears iOS does not know how to render the bold variant of Helvetica Neue Light (HelveticaNeue-Light/HelveticaNeue-Bold).
E.g. I have the following CSS selectors:
body {
font-family: "HelveticaNeue-Light";
}
h1 {
font-weight: bold;
}
h2 {
font-weight: 600;
}
And my markup:
<li>
<h1>A. Crimson Tide UK (Enabled Customer - UK Depot)</h1>
<h2>1-14</h2>
<h2>10:00 - 11:00</h2>
<p>0914 Desc</p>
</li>
And whenever I have a h1 tag, iOS seems to render Helvetica Neue Condensed Bold (HelveticaNeue-CondensedBold) - not Helvetica Neue Bold (HelveticaNeue-Bold).
Here is a screenshot of my webpage:
Why is it rendering the Helvetica Neue Condensed Bold and not Helvetica Bold - I have not set Condensed anywhere in my CSS!
If I set the h1 font-weight to 900, it renders in Helvetica Neue, and it is slightly bold, but not the weighting I would like.
If somebody can shed some light on this it would be greatly appreciated.
Thank you in advanced.
I overcame this issue by defining HelveticaNeue font face and then specified weights and pointed them to respective local font files like this:
#font-face {
font-family: "HelveticaNeue";
font-weight: 100;
src: local("Helvetica Neue Thin"),
local("HelveticaNeue-Thin");
}
#font-face {
font-family: "HelveticaNeue";
font-weight: 300;
src: local("Helvetica Neue Light"),
local("HelveticaNeue-Light");
}
#font-face {
font-family: "HelveticaNeue";
font-weight: normal;
src: local("Helvetica Neue"),
local("HelveticaNeue");
}
#font-face {
font-family: "HelveticaNeue";
font-weight: bold;
src: local("Helvetica Neue Bold"),
local("HelveticaNeue-Bold");
}
And then just assigned as the preferred font family and weight for the body:
body {
font-family: HelveticaNeue, Helvetica, Arial, Verdana, sans-serif;
font-weight: 300;
}
This way, all the weights are at my control - the bold never becomes condensed bold, it remains bold.
Coming back to why iOS8 does that... don't know.