I have a font face declared like this in .erb file
<style>
#font-face {
font-family: 'robotoslab';
src: url("file://#{Rails.root.join('app', 'tmp', 'fonts', 'RobotoSlab-Thin.ttf')}");
}
</style>
And I am calling it like this
h5 {
text-transform: uppercase;
padding: 10px;
letter-spacing: 0.2px;
margin-top: 50px;
font-family: 'robotoslab';
font-size: 10px;
}
All the other properties are getting applied except font-family. Also I am sure that font file is the path
Rails.root.join('app', 'tmp', 'fonts', 'RobotoSlab-Thin.ttf')
=> #<Pathname:/home/vamsi/code/certificate_generator/app/tmp/fonts/RobotoSlab-Thin.ttf>
I am having this in tmp folder because of pdfkit does not like assest pipeline
You have to encapsulate it in <%= %>.
<style>
#font-face {
font-family: 'robotoslab';
src: url("file://<%= Rails.root.join('app', 'tmp', 'fonts', 'RobotoSlab-Thin.ttf') %>");
}
</style>
But I'm not sure if this works since you load the font via the file:// protocol. You probably want to load it via http. If so simply remove file://.
Related
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 am attempting to use a local font (one installed with the application) in the CSS of some dynamic HTML presented within a WKWebView. I have read numerous Stack Overflow posts and this webpage. To review what I have done:
The font (in this case ImpactLTStd.otf) is part of the iOS application.
It is entered as part of the application plist in the Fonts provided by application section.
Per the referenced webpage, I can confirm that the ImpactLTStd.otf is listed in the Copy Bundle Resources section of Build Phases and leads me to believe that the ImpactLTStd.otf is being bundled with the application correctly.
The font is listed in the CSS as:
<style> #font-face {font-family: 'Impact LT Std'; src: local('Impact LT Std'), local('ImpactLTStd'), url('ImpactLTStd.otf'); format('opentype'); } </style>
I reference the font two different ways in this fashion (one by font family and one by font name in order see which one worked and neither did):
<style> .box_root { overflow: auto; background-color: #000000; padding-top: 1.5em; padding-bottom: 1.5em; padding-left: 1.5em; max-width: 1440px; max-height: 640px; display: table; } .box_title { color: #ffd300; line-height: 1em; font-size: 85pt; font-size: 6vw; font-family: 'Impact LT Std'; text-transform: uppercase; } .box_description { padding-top: .5em; line-height: 1em; color: #ffffff; font-size: 65pt; font-size: 4vw; font-weight: bold; font-family: 'ImpactLTStd'; }
I load the HTML into the WKWebView using loadHTMLString:
webView.loadHTMLString(getHtml(), baseURL: nil)
However, the HTML text that is displayed in the WKWebView using the CSS tags does not use the Impact font but instead some default font that looks like Times New Roman.
Anyone have an idea what step I did incorrectly?
You did not provide a base URL when loading the HTML string, this will cause the font failing to load. Try accessing your bundle's main resource path, like this:
if let resourcePath = Bundle.main.resourcePath {
let url = URL.init(fileURLWithPath: resourcePath)
webView.loadHTMLString(getHtml(), baseURL: url)
}
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
The image I have been trying to put as a logo on the navbar only displays the name. I have the image in the asset pipeline in a folder called images and I am using bootstrap. I currently have this in my code:
`<%= link_to image_tag('WikiLogoFinal.jpg'), getting_started_path, id: "logo" %>`
my CSS as follows:
#logo {
float: left;
margin-right: 10px;
font-size: 1.7em;
color: $niceBlandGreen;
text-transform: uppercase;
letter-spacing: -1px;
padding-top: 9px;
font-weight: bold;
line-height: 1;
&:hover {
font-size: 1.75em;
color: white;
background: $shinyOrange;
text-decoration: none;
}
}
the image is not the problem as I have used a different one.
Based on what you have, your code should work. Make sure that you have your image in the
app/assets/images
directory. Also, check to make sure that you have the asset pipeline enabled. Go to
config/application.rb
and see if you have this line:
# Enable the asset pipeline
config.assets.enabled = true
In order to add logo or image into your navbar. Perform following steps to do so:
Open your navbar.html.erb, generally this files lies under the layout folder in views and then look for navbar-brand class for e.g.,
<a class="navbar-brand" href="/"><img class="img-responsive2" src ="https://www.google.com.mx/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"> BLOG</a>
Add following code into your navbar.scss file under the class .navbar
.img-responsive2 {
display: inline-block;
max-width: 20%;
height: auto;}
I hope by following above steps you can add image or logo into your navbar
Can we use stylesheet classes inside Pdf reports?
i am trying to change the header_color from b7e3fe to .heading oh the stylesheet, inside the table
file:heading.pdf.prawn
texts=[""],[""]
pdf.table texts,
:headers => [" Heading "],
:header_color => 'b7e3fe',
file: public/stylesheets/style.css
.heading
{ font-family: "trebuchet ms", Verdana, Arial, Helvetica, sans-serif; font-size: 11px; background: #E5E5E5; color: #0D0E0E; font-weight: bold; padding-left:10px; line-height: 20px;}
If you want to use HTML/CSS to generate PDFs, you should look at PDFKit instead of Prawn.