I'm developing a webpage and I use Bootswatch for styling. Sometimes I have to work offline, and host locally. Unfortunately Bootswatch can't be used offline since it uses a version of Bootstrap css with an extra font at the begining:
#import url("https://fonts.googleapis.com/css?family=Lato:300,400,700");
This means build fails every time, and I can't deploy. I've seen the question:
Bootstrap CSS without Google Fonts
But it doesn't have a satisfactory answer. They suggest just deleting that line, but I still need it when deploying, and because of version updates it would get overwritten very fast anyway at the next update. I'm looking for a solution which either:
ignores the import, when offline
overwrites the import, when offline (ex. import manually the font, and then change the import for a local one), I'd very much like this version
And all this as a final solution, I don't want to change the code after every npm/bower update...
The latest Bootswatch versions (> 3.3.6.1) introduce a SASS variable $web-font-path that you can override and set to an empty value:
// use google fonts api offline
$web-font-path: '';
#import "fonts.yeti.offline";
#import "yeti/variables";
#import "yeti/bootswatch";
To serve the required fonts offline, I used https://google-webfonts-helper.herokuapp.com to generate the fonts.yeti.offline.scss file and to download the required font files. To switch between online and offline mode, you can toggle the first two lines in your code.
According to this and this discussions I found good and simple way to disable font loading in Bootswatch scss:
$web-font-path: false;
Related
I'm on a Mac, macOS High Sierra 10.13.6
Since i updated Chrome a week or two ago, changes i make to CSS files (or SCSS for what its worth) will be saved correctly always, but Chrome will only refresh the styles in my page once. Local Overrides are disabled, Workspaces set up correctly, Source Maps are and have always been proper and in place. Nothing actually changed in my environment, other than updating Chrome.
I tried resetting all the caches, tried hard reloads, removing cache internals even. I tried anything i could think of. I researched online but was not able to find answers to this particular problem.
So to sum it up:
I open Chrome
I load my page locally (a localhost environment)
I open Developer Tools
I pick an element on my page
I click on the name of the resource on the right (a CSS or SCSS file)
I make changes to the source of the CSS/SCSS file file via the sources tab
I hit save. Changes are saved. Netbeans if open will immediately show the changes. If it was a SASS file, NetBeans triggers the compile on change
Chrome updates the styles in the page as it should
I make another change in Sources panel
I save the changes
Changes are saved – if NetBeans is open it will show the changes immediately and if it is a SASS file it will compile it
Chrome does not update the styles in the page. Never again until i reload.
I even reinstalled Chrome. Removed ~/Library/Application Support/Google/Chrome entirely and restarted the browser after, starting off with a completely fresh profile. Still no jazz.
Can someone point me in the right direction here?
After my frustration went through the roof, i decided to meticulously cut down content from my rather large primary SCSS file for the page, reloading the page each time, trying and testing out making changes. Turns out the problem went away as soon as i removed a certain #import on top of the file. But other imports worked.
Why?
The imported file was for fonts. It contained various #font-face definitions. And on the bottom i had two `#import' statements referring to external resources via http.
I removed those and bingo – now Chrome was updating the styles properly with every change i made. Problem solved. Is this a bug? I don't know.
I then tried to place the imports directly in the main SCSS file on top, and even then they will cause the problem to occur.
The SASS documentation has this to say:
Plain CSS #imports
Because #import is also defined in CSS, Sass needs a way of compiling plain CSS
#imports without trying to import the files at compile time. To accomplish this, and to ensure SCSS is as much of a superset of CSS as possible, Sass will compile any #imports with the following characteristics to plain CSS imports:
Imports where the URL ends with .css.
Imports where the URL begins http:// or https://.
Imports where the URL is written as a url().
Imports that have media queries.
In other words, i basically wrote a normal CSS #import and while i have not tested this in other environments or systems, any such statements seem to break Chrome's ability to automatically update styles for a page after it was done once.
So to save others time who might stumble upon this: Get rid of your #imports and you'll be good.
The accepted answer of this question contains a good explanation.
Somewhere in my site I have there folders:
(...)/font-awesome/5.0.6/css/
(...)/font-awesome/5.0.6/webfonts/
(...)/font-awesome/5.8.1/css/
(...)/font-awesome/5.8.1/webfonts/
If I include file font-awesome/5.0.6/css/fontawesome-all.min.css, Font Awesome works.
If I include file font-awesome/5.8.1/css/fontawesome.min.css, Font Awesome shows blank squares instead of icons.
It is most likely not due to cache as I've cleared the browser cache and .css cache files.
I remember that in the past, when integrating Font Awesome into a website, I was required to manually change some relative URLs inside the library, but that, if I remember well, was with Font Awesome 4.
I feel however like I'm missing some installation step. I just can't remember since it was "so long ago".
Do you download the .zip file instead of a single all.min.css file?
If not, then download the .zip file, unzip it, and link the main CSS file inside the header.
On the other hand, you can use the CDN link they provide:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
Both work perfectly.
Considering the last release note there are some big changes done from 5.0 to 5.8:
Heads Up! This Release Has Breaking Changes
In a recent version, we fixed some issues with using our OTF and TTF font files on mobile projects. The naming, font weight, and version have been modified to be more compatible and stable going forward.
After upgrading your copies of our desktop files, you may need to set the typeface of your text layers again. After doing that, we also recommend double-checking that icons are showing up as expected in your documents. Running into trouble? Get in touch with us and we'll help you out.
You probably need to follow the links there in order to fix your issues:
Install the Ligature-based Font Files
I also advise you to upgrade slowly to a lower version because actually you are moving by the 7 version and it will difficult to know the real issue. So start moving to 5.1 then 5.2 and so on until you find which version is the culprit.
Releases · FortAwesome/Font-Awesome
Follow Upgrading Guide for more details about the upgrade between versions.
I found what the issue was. It's something that is specific to my site/application.
I minify most of my .css files using a PHP library then merge them using a homemade library (only the second library is homemade).
Then because, the resulting .css file isn't in the same locations. Links to webfonts get broken. That was the step I was forgetting: making all the relative ../webfont links semi-relative instead.
Everything works perfectly now.
I'm using webpack to generate the appropriate files for a npm package which will host a few react components. They have some CSS attached, which references some fonts and icons.
When using the file loader, these assets are mis-referenced using their absolute paths (i.e. fonts/my-font.woff) in the main app which are missing.
Is there a way to fix this and make my main app look for the right files? I'd rather fix the package itself than doing things like copying the assets like someone has mentioned as I may not have full control of the main app.
Well, I'm going to preface this by saying that including fonts in a component is usually a bad idea since the main app likely has its own style/branding/etc that you'll be fighting with.
That said, if the fonts are something like icons you could base64 encode them and inline that in the CSS. There are several Webpack encoder plugins to do that.
You also mentioned icons, I would try to convert these to SVG and serve them up inside the code. You could also base64 encode the PNGs into your CSS as a fallback.
The benefits, to this approach:
Eliminating HTTP requests in the parent app
Parent app always has the latest (non-cached) icons/fonts when you update your package
You don't have to worry about paths, packaging external files, etc
Cons I can think of:
You're increasing script sizes significantly
You lose some caching benefits
If you're not the copyright owner of the icons/fonts, this may violate TOS
I'm a beginner coder and am trying to integrate my css into my app. Using Rails 4 + Bootstrap 3.
I wrote out the html + css for the front-end of my app prior and it all worked fabulously. I moved everything to my folder and edited my V + C accordingly.
I have installed the bootstrap-sass gem successfully. Have updated my assets application and js. I have a .scss file importing bootstrap and my Google fonts.
Bootstrap, Bootstrap js, and Google fonts are working selectively/randomly on certain pages, but not fully on a page or they just don't work at all or they are there but all messed up now. (ex. modal not working on one page, but js element on another page works) I am trying to call the css files from where they are locally stored.
My questions:
1. Is there something I would need to edit to integrate the two in addition to the above?
2. Do I have to transition my css into another file?
3. If there is no easy way to fix this, should I just start over with my css?
Would appreciate any tips. Thanks!
A good starting point would be to check your sources under the inspector, to make the that the css and javascript are both being required. Also check the console for whether there are any javascript errors.
Assuming you are on google chrome, and on a mac, that would be cmd+alt+i, and ctrl+alt+i on windows.
You can also check which files are being included through checking page source by right clicking most parts of the page.
If they are being required and styles are not being applied then something else is probably getting in the way( i.e. bootstrap javascript files are being required twice, css is being overwritten because of load order, etc)
So Bootswatch.com has some awesome themes for twitter bootstrap. Unfortunately as soon as I swapped out the CSS scripts for Bootswatch.com the webpage loads super super slow. On my computer when i click preview or double click the .html file.
What is causing this to happen? its not even uploaded to the internet, this is all local. I cant understand why changing the CSS would make a difference. Not to mention the new CSS has fewer lines of code.
I had exactly the same problem.
The issue the the first line of the CSS where it tries to load from google fonts:
#import url("//fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700");
Simply delete or comment out this line so the file starts like this:
* Bootswatch v3.1.0
* Homepage: http://bootswatch.com
* Copyright 2012-2014 Thomas Park
* Licensed under MIT
* Based on Bootstrap
Late to the party but the URL is broken, put "http:" in front of the URL:
#import url("http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700");
Did you download any image with the theme?
Maybe the CSS has external references for images.
If you didn't, try to load again your site with your firebug open in 'Network', so you can see whats making the load slow.
Some themes from any source often use code which is easy to customise but may not be the most efficient. Out of the box Bootstrap 2 has a max of 2 css files and 1 JS file (if you go with the combined file)
If I check the source code for the Bootswatch Amelia theme I see an extra 2 CSS files, an extra 2 JS files plus at least 2 Google fonts.
This maybe doesn't explain everything, though it wouldn't help for sure.
Good luck!
If a Bootswatch theme is loading slowly and you find the reason to be the referenced Google fonts, you can try to embed them into your application to make them available offline.
The latest Bootswatch versions (> 3.3.6.1) introduce a SASS variable $web-font-path that you can override and set to an empty value:
// use google fonts api offline
$web-font-path: '';
#import "fonts.yeti.offline";
#import "yeti/variables";
#import "yeti/bootswatch";
To serve the required fonts offline, I used https://google-webfonts-helper.herokuapp.com to generate the fonts.yeti.offline.scss file and to download the required font files. To switch between online and offline mode, you can toggle the first two lines in your code.