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%;
}
Related
I am trying to customize AntD using css-in-js. I am able to customize the component very successfully but run into an issue during instantiation. The props for the original AntD component are no longer available. This is a big issue. Does anyone have any work arounds to maintain the full props of the original AntD component.
I have used styled-components to style the AntD button , but am not able to retain the props.
const StyledButtonPrimary = styled(Button)
.ant-click-animating-node {
display: none;
}
&& {
border-width: 1px;
border-style: solid;
border-color: ${red500};
margin: 0;
background-color: ${red500};
border-radius: 4px;
color: ${white};
font-family: inherit;
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: 20px;
text-align: center;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
white-space: nowrap;
&:hover {
border-color: ${red700};
background-color: ${red700};
color: ${white};
}
&:active{
border-color: ${red700};
background-color: ${red500};
box-shadow: inset 0 0 0 1px ${red700};
animation-duration: 0s;
animation: none;
animation-fill-mode: none;
}
};
The code below is the styled button but I no longer have access to any of the original AntD Button props.
<StyledButtonPrimary >
Primary Button
</StyledButtonPrimary>
I spent more than 8 hours, but could not able to fix my issue.
My code as below:
let sampleHTML = "<p><span style=\"background-color: rgb(255, 255, 255);\"><font color=\"#000000\" style=\"\" size=\"1\"><b style=\"\">1. GPS must be turned on<\/b> to locate panel GP clinics within 1 km from your location.<\/font><\/span><\/p><p class=\"p1\" style=\"margin-right: 0px; margin-left: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; line-height: normal; font-family: Menlo;\"><span style=\"background-color: rgb(255, 255, 255);\"><font color=\"#000000\" size=\"1\">2. You can do a wildcard search based on “Clinic Name” or “Road Name”.<\/font><\/span><\/p><p class=\"p1\" style=\"margin-right: 0px; margin-left: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; line-height: normal; font-family: Menlo;\"><span style=\"background-color: rgb(255, 255, 255);\"><font color=\"#000000\" size=\"1\">3. The top right corner shows the tip of a highlighter which is a <b>Filter<\/b> to find another Panel type eg. TCM or Specialist Panel (where applicable).<\/font><\/span><\/p><p class=\"p1\" style=\"margin-right: 0px; margin-left: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; line-height: normal; font-family: Menlo;\"><span style=\"background-color: rgb(255, 255, 255);\"><font color=\"#000000\" size=\"1\">4. When the search is done, click on your desired panel clinic and you can<\/font><\/span><\/p><blockquote style=\"margin: 0 0 0 40px; border: none; padding: 0px;\"><p class=\"p2\" style=\"margin-right: 0px; margin-left: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; line-height: normal; font-family: Menlo;\"><span style=\"background-color: rgb(255, 255, 255);\"><b><font color=\"#000000\" size=\"1\">(a) View Clinic Operating hours<\/font><\/b><\/span><\/p><\/blockquote><blockquote style=\"margin: 0 0 0 40px; border: none; padding: 0px;\"><p class=\"p1\" style=\"margin-right: 0px; margin-left: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; line-height: normal; font-family: Menlo;\"><b style=\"background-color: rgb(255, 255, 255);\"><font color=\"#000000\" size=\"1\">(b) Call the clinic<\/font><\/b><\/p><\/blockquote><blockquote style=\"margin: 0 0 0 40px; border: none; padding: 0px;\"><p class=\"p1\" style=\"margin-right: 0px; margin-left: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; line-height: normal; font-family: Menlo;\"><b style=\"background-color: rgb(255, 255, 255);\"><font color=\"#000000\" size=\"1\">(c) Get Direction to the panel clinic (GPS must be turned on)<\/font><\/b><\/p><\/blockquote><p class=\"p1\" style=\"margin-right: 0px; margin-left: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; line-height: normal; font-family: Menlo;\"><span style=\"background-color: rgb(255, 255, 255);\"><font color=\"#000000\" size=\"1\">5.If <b>GPS is not turned on<\/b>, you can still access to 4a and 4b for your selected panel clinic.<\/font><\/span><\/p><p class=\"p1\" style=\"margin-right: 0px; margin-left: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; line-height: normal; font-family: Menlo;\"><b><i style=\"background-color: rgb(255, 255, 255);\"><font color=\"#000000\" size=\"1\">Important Notice<\/font><\/i><\/b><\/p><p class=\"p1\" style=\"margin-right: 0px; margin-left: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; line-height: normal; font-family: Menlo;\"><span style=\"background-color: rgb(255, 255, 255);\"><font color=\"#000000\" size=\"1\">(1) <i>*Last Clinic Registration is<\/i> <b>30 Minutes before closing time or earlier<\/b> if the number of patients’ registration exceeded the capacity that the attending doctor and clinic staff can handle that goes beyond the clinic normal operating hours.<\/font><\/span><\/p><p class=\"p1\" style=\"margin-right: 0px; margin-left: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; line-height: normal; font-family: Menlo;\"><span style=\"background-color: rgb(255, 255, 255);\"><font color=\"#000000\" size=\"1\">(2) <b>Surcharge<\/b> will be imposed on members for visit <i>on or after *Last Clinic Registration<\/i>.<\/font><\/span><\/p><p class=\"p1\" style=\"margin-right: 0px; margin-left: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; line-height: normal; font-family: Menlo;\"><span style=\"background-color: rgb(255, 255, 255);\"><font color=\"#000000\" size=\"1\">(3) <b>Operating hours<\/b> are indicative. Please call the clinic before visiting as clinics’ operating hours may change without prior notice.<\/font><\/span><\/p><div><font color=\"rgba(255, 255, 255, 0.850980392156863)\" face=\"Menlo\" size=\"1\"><br><\/font><\/div><div><font size=\"1\"><img src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAABAAAAAQACAIAAADwf7zUAAAKMWlDQ1BJQ0MgUHIAQAAAAAICAEAAAAACAgBAAAAAAgIAQAAAAAICD\/H8\/yGKggh8zsAAAAAElFTkSuQmCC\"><\/font><font color=\"rgba(255, 255, 255, 0.850980392156863)\" face=\"Menlo\"><span style=\"font-size: 1px;\"><br><\/span><\/font><\/div>"
Converting html to attributed string extension as below:
extension String {
var htmlToAttributedString: NSAttributedString? {
guard let data = data(using: .utf8) else { return NSAttributedString() }
do {
return try NSAttributedString(data: data, options: [.documentType: NSAttributedString.DocumentType.html, .characterEncoding:String.Encoding.utf8.rawValue], documentAttributes: nil)
//[.documentType: NSAttributedString.DocumentType.html, .characterEncoding:String.Encoding.utf8.rawValue]
} catch {
return NSAttributedString()
}
}
var htmlToString: String {
return htmlToAttributedString?.string ?? ""
}
}
Loading attributed text to textview as below:
cell.txtViewHTML.attributedText = sampleHTML.htmlToAttributedString
The output screenshot as below:
I believe something wrong in my code, can anyone please help.
Thanks in advance.
I have made some modifications in your HTML code:
let sampleHTML = "<p><b>1. GPS must be turned on</b> to locate panel GP clinics within 1 km from your location.</p><p><b>2.</b> You can do a wildcard search based on “Clinic Name” or “Road Name”.</p><p><b>3. The top right corner</b> shows the tip of a highlighter which is a <b>Filter</b> to find another Panel type eg. TCM or Specialist Panel (where applicable).</p><p>4. When the search is done, click on your desired panel clinic and you can<ol type=\"a\"><li><b>View Clinic Operating hours</b></li><li><b>Call the clinic</b></li><li><b>Get Direction to the panel clinic (GPS must be turned on).</b></li></ol></p><p><b>5.</b> If <b>GPS is not turned on</b>, you can still access to S/no 4a and 4b for your selected panel clinic.</p><h1><p><i><font size=\"3\">Important Notice</font></i></h1><ol type=\"a\"><li><i>*Last Clinic Registration is </i><b>30 Minutes before closing time or earlier</b>if the number of patients’ registration exceeded the capacity that the attending doctor and clinic staff can handle that goes beyond the clinic normal operating hours.</li><li><b>Surcharge </b>will be imposed on members for visit <i>on or after *Last Clinic Registration.</i></li><li><b>Operating hours </b>are indicative. Please call the clinic before visiting as clinics’ operating hours may change without prior notice.</li></ol></p>"
.
Sample Output from StackOverflow "Blockquotes"
1. GPS must be turned on to locate
panel GP clinics within 1 km from your
location.2. You can do a wildcard search based on
“Clinic Name” or “Road Name”.3. The
top right corner shows the tip of a highlighter which is
a Filter to find another Panel type eg. TCM or
Specialist Panel (where applicable).4. When the search is done,
click on your desired panel clinic and you canView Clinic Operating hoursCall the
clinicGet Direction to the panel clinic (GPS must be
turned on).5. If GPS is not
turned on, you can still access to S/no 4a and 4b for your
selected panel clinic.Important
Notice*Last Clinic Registration
is 30 Minutes before closing time or earlierif the
number of patients’ registration exceeded the capacity that the
attending doctor and clinic staff can handle that goes beyond the
clinic normal operating hours.Surcharge will be
imposed on members for visit on or after *Last Clinic
Registration.Operating hours are indicative.
Please call the clinic before visiting as clinics’ operating
hours may change without prior notice.
Sample output in Simulator: (Please ignore the screenshot background)
Let me know if you need any help on the HTML part.
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 used custom CSS to install an #font-face webfont from MyFonts on my new Squarespace site. The site is completely responsive by default, and the font adjusts perfectly on everything but some iPhone/iPad browsers (it appears to be an issue with ios 10 and earlier). For some reason when the webfont loads, the div size and default positioning are out of whack. The letters are correct, but in the case of the home index menu, the items overlap:
Like this when they should look like this
and on other pages the headline just runs straight off the screen:
Like this when they should look like this.
Android appears to be loading normally, and it adjusts fine on my Macbook. My iPad (ios 11) also looks good, but my client's (ios 10) has the problem, as does my iPhone (ios 10). How do I make sure it loads consistently?
Here's my CSS. Thanks in advance!
#import url("//hello.myfonts.net/count/350e6f.css");
#font-face {
font-family:'SackersGothicMedium';
src: url('//static1.squarespace.com/static/54206d9ae4b0423f148f0d6c/t/59fbca489140b7d05d1be44c/1509673545091/350E6F_0_0.eot');
src: url('//static1.squarespace.com/static/54206d9ae4b0423f148f0d6c/t/59fbca489140b7d05d1be44c/1509673545091/350E6F_0_0.eot?#iefix')
format('embedded-opentype'),url('//static1.squarespace.com/static/54206d9ae4b0423f148f0d6c/t/59fbca5e9140b7d05d1be6b9/1509673566929/350E6F_0_0.woff2')
format('woff2'),url('//static1.squarespace.com/static/54206d9ae4b0423f148f0d6c/t/59fbca57f9619ab843b69aba/1509673560243/350E6F_0_0.woff')
format('woff'),url('//static1.squarespace.com/static/54206d9ae4b0423f148f0d6c/t/59fbca50e2c483cd2608015b/1509673553520/350E6F_0_0.ttf')
format('truetype');
}
#font-face {
font-family: 'SackersGothicMediumAlt';src: url('//static1.squarespace.com/static/54206d9ae4b0423f148f0d6c/t/59fbca6471c10bfd21731909/1509673572949/350E6F_1_0.eot');src: url('//static1.squarespace.com/static/54206d9ae4b0423f148f0d6c/t/59fbca6471c10bfd21731909/1509673572949/350E6F_1_0.eot?#iefix') format('embedded-opentype'),url('//static1.squarespace.com/static/54206d9ae4b0423f148f0d6c/t/59fbca7ae4966baa783e612d/1509673594306/350E6F_1_0.woff2') format('woff2'),url('//static1.squarespace.com/static/54206d9ae4b0423f148f0d6c/t/59fbca75085229ec684a6add/1509673589300/350E6F_1_0.woff') format('woff'),url('//static1.squarespace.com/static/54206d9ae4b0423f148f0d6c/t/59fbca6d8165f5e83ce3e406/1509673582003/350E6F_1_0.ttf') format('truetype');}
span.collection-nav-item-span{
font-family: 'SackersGothicMedium' !important;
}
h2.site-tagline{
font-family: 'SackersGothicMedium' !important;
}
h2{
font-family: 'SackersGothicMedium' !important;
text-transform: lowercase;
}
h1{
font-family: 'SackersGothicMedium' !important;
text-transform: lowercase;
}
blockquote{
font-family: 'SackersGothicMedium' !important;
text-align: center;
}
figcaption{
font-family: 'Raleway';
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase;
text-align: center !important;
}
#media only screen and (min-width: 1040px) {
span.collection-nav-item-span{
font-size: 3.7vw;
}
}
.site-branding h1 {
background-image:url(https://static1.squarespace.com/static/54206d9ae4b0423f148f0d6c/t/59fcef98e31d1945635645b1/1509748633336/FIG_17_WEB_Logo_1_dark.png);
background-repeat: no-repeat;
background-size: contain;
}
.has-index-nav.swap-header-color:not(.view-item) .site-branding h1 {
background-image:url(https://static1.squarespace.com/static/54206d9ae4b0423f148f0d6c/t/59fcede408522952619026f3/1509748197382/FIG_17_WEB_Logo_1.png);
background-repeat: no-repeat;
background-size: contain;
}
I can't edit HTML because it's a Squarespace site, but in case it helps here are some screenshots of HTML for the problematic areas. Home Page Page Header
If you want to inspect the site itself, it's figcookingschool.com
I am using a web font in an :after pseudo class. It shows fine on Desktop Chrome and Android Chrome but on iOS Chrome and Safari (iOS 7.1.2, 9.2.1 and 9.3.1) it disappears unless I comment out both display:inline-block and position:absolute where it then shows the icon immediately to the right with no width.
#font-face {
font-family: 'myFont';
src: url('/channels/myFontFolder/fonts/myFont.eot');
src: url('/channels/myFontFolder/fonts/myFont.eot?#iefix') format('embedded-opentype'),
url('/channels/myFontFolder/fonts/myFont.woff2') format('woff2'),
url('/channels/myFontFolder/fonts/myFont.woff') format('woff'),
url('/channels/myFontFolder/fonts/myFont.ttf') format('truetype'),
url('/channels/myFontFolder/fonts/myFont.svg#my_Font') format('svg');
font-weight: normal;
font-style: normal;
text-rendering: optimizeLegibility;
}
h2 {
padding: 10px;
cursor: pointer;
margin: 0;
border: none;
border-top: 1px solid $table-row-border-colour;
background: none;
font-size: $body-fontSize;
position: relative;
}
h2:after {
content: "\e101";
font-family: myFont;
display: inline-block;
position: absolute;
background: none;
color: green;
font-size: 20px;
width: 20px;
height: 20px;
border: 1px solid red;
right: 0;
top: 0;
}
It's working fine on another element with, as far as I can tell, the same styling applied.
Any help would be appreciated!
Fixed it, needed to add font-weight: bold