Long loadtimes with MyFontsWebfontsKit.css - html

Has anyone used MyFonts.com to use webfonts?
I bought one to use on a new site and the css file they ask me to include seems to add massive wait times on pageload.
/* #import must be at top of file, otherwise CSS will not work */
#import url("//hello.myfonts.net/count/*");
#font-face {font-family: 'Trenda-Black';src:
url('webfonts/*.eot');src: url('webfonts/*.eot?#iefix')
format('embedded-opentype'),url('webfonts/*.woff2')
format('woff2'),url('webfonts/*.woff')
format('woff'),url('webfonts/*.ttf') format('truetype');}
That is the css file they tell me to attach to my html's head, which I did here:
<head>
<link rel="stylesheet" href="MyFontsWebfontsKit.css">
</head>
I'm having to wait 16 seconds for the page to load where it normally takes less than one (site is on my hard drive only atm). The fonts do work though.
Does anyone know a solution?
I heard #import is not good to use, is that why? The css comment instructs me not to remove it.

Related

My CSS file errors out no matter what I try

My CSS file will not work and I have tried everything. They are both in the same "templates" directory in the app titled "bake".
Using a simple example that doesn't work, here's my HTML head and the code I'm trying to change:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="./style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<meta charset="UTF-8">
<title>DataBake</title>
</head>
<body>
<th style="text-align:right"> <h5 id="green">Username:</h5></th>
<p id="test">If you're new to DataBake please register here.</p>
</body>
Here is my CSS file:
#charset "UTF-8";
#green{
color: green;
}
h5{
color: green;
}
#test{
color: red;
}
The CSS works when neither the HTML nor the CSS are in directories and they are the only two files I'm working with. But other than that, I have putting the css file in a separate directory. I have tried changing the link to the 'style.css' to using relative and absolute paths.
When I follow the link from the HTML , it takes me right to the CSS file. When I load the css file independently, it loads fine.
Both files are encoded to UTF-8.
I have cleared my cache and history and reloaded countless times.
I have moved the order between it and my bootstrap link around.
I have used different browsers.
I have checked for typos or little mistakes.
My coding teacher couldn't figure it out either.
Can someone help me figure out why it is not working?
UPDATE
When I put the absolute path into my browser, it works perfectly, but the relative path through my localhost turns up a 404 error for the css stylesheet.
FOUND THE ANSWER
I needed to incorporate {% load static %} into the header, and turn the href of the stylesheet link to "{% static 'css/style.css' %}". Couldn't be happier to finally have this solved.
First of all: There are many things that in my opinion could have been written better when drafting this question.
It's very difficult to help you with your problem when there's so little shared. You should at least share some code where you're actually using the styling. Time to time there's just some typos you end up missing and extra pair of eyes might pick them up.
The one thing that comes to mind that you could try is adding space between the css selector and the bracket. So not #green{ but rather #green {.
I'm suggesting this just because few months ago I agonized with some styles that did not show up in my React project where I was using css-modules. It took embarrassingly long time until I noticed that the class giving me grief was written without the space before bracket and it just didn't compile correctly.
try and remove bootstrap (or add it before you include your file). What kind of server are you using ? maybe it is serving your css file as TXT/html (look at it on the server response, which would mean your browser may not accept it as a stylesheet)
You have to put 1 more dot before ./
I hope it would work.
<link rel="stylesheet" type="text/css" href="../style.css">
EDIT: I never said that the problem was the dot anyway. The OP should share the entire CSS file together with more information so we could help find the answer.
I've never seen a reference to a path using a dot like:
<link rel="stylesheet" type="text/css" href="./style.css">
You should ask yourself if the file is in the same directory as the file referencing it? above? below?
Starting with “/” returns to the root directory and starts there
Starting with “../” moves one directory backwards and starts there
Starting with “../../” moves two directories backwards and starts there
Other than that, is difficult to understand the issue without more details, many things can cause this problem.

Where should css go in .html page?

I have a index.html page and a style.css file.
I have a style class called .slider and a style class called .logo. Should I put both .slider and .logo inside the style.css page or should i put .slider in index.html and .logo inside .css?
im asking this because i dont know if I should put styles only related to one page inside a global style.css or should i just put it inline in the page it applies to?
Typically you embed css that is page specific. Here is how I do my css:
Global css (seperate file(s)):
<link type="text/css" rel="stylesheet" href="css/style.css" media="all" />
NOTE: In today's web world we use a ton of plugins/themes and these plugins/themes tend to roll out newer versions so when you override these plugins/themes make sure you create a css file specific to that theme.
For instance,
Bootstrap 3.1
<link href="/css/bootstrap.3.1.css" rel="stylesheet" type="text/css">
Create this for all your bootstrap overrides so you can use the latest version when it comes out.
<link href="/css/bootstrap.overrides.css" rel="stylesheet" type="text/css">
Page specific css(embedded):
<head>
<!-- last element in head //-->
<style type="text/css">
.pageSpecific
{
color: red;
}
</style>
</head>
When I am in development stages or the html element does not require css classification.
Simple style format (inline):
<th style="min-width: 65px;">Column Header</th>
You may have print specific css as well:
<link href="/css/print.css" rel="stylesheet" type="text/css">
and inside this file wrap your css as such:
#media print{
<!-- print specific css here//-->
}
Keep in mind that you may want to use a css classifcation at a later date when at the time it may seem page specific. Always code for reusability!
Finally:
I like to use css minifier when I put my file(s) into production. I do the same with my javascript files using UglyJs. There is also LESS css that you can use but for now I would stick to these simple conventions or something similar.
Styles can go in one of three places.
Inline on the element itself
In the html page
In a separate file
I would suggest either putting it in a <style> tag in the <head> of your html or putting it in a separate file, either will work just as well. Obviously having the styles in a separate file means you could reuse those styles on another page if needed.
Either way, it won't make a difference. Personally, I like to have all of my CSS in one place, but you can do whatever you want. If you do put all of your CSS in one document, use comments to separate it into groups, so everything will be easy to find.
You should NEVER have inline or on-page CSS. It should all go in the stylesheet (of which you should only have one per media-type) - why? Because stylesheets are cached, and the cache is way better to hold it than the HTML-files (which may also be cached, by all means, but with dynamic content, they often load quite more often than CSS).
Second, it's a nightmare to update and change, if not everything is in one file.

How do I link all pages to the same css external file?

I am doing a project which is building a website for my CS 205 class. I have made it using notepad++ for the html files and notepad for the css files. My site has a home/index.html page as well as 5 other content pages. What I did was created each each page in notepad++, with each page having its own css file.
What I'm having trouble with is it must have 1 css file that maintains a consistent look across your site / or link all pages to the same css external file. I'm not totally sure if those two mean the same thing that's why I list both of them.
I already have a style sheet in each html page that links to its css file. But I must have one css file for the entire site. Could I just copy and past each css file into one without it changing how each page looks? I would really appreciate it if someone could explain how I do this without it messing up the setup I have for each page.
Having all of your styles be consistent across the website is ideal. To achieve this, you have a single stylesheet and link all your pages to it using the <link> tag in the <head>.
It's a good practice to reuse as much CSS as you can, it'll save you time in the future and that's kinda the goal of a stylesheet versus inline styles.
To answer your question, yes you can combine all of our stylesheets together into a single stylesheet provided you do not have any duplicate class names. Notice in my example how I have a .class-for-index that is used in index.html but not in page.html and similarly for .class-for-page.
styles.css (your single stylesheet with all your classes)
body {
background-color: cyan;
}
.class-for-index {
color: red;
}
.class-for-page {
color: blue;
}
index.html (link to the single stylesheet)
<html>
<head>
<link href="styles.css" rel="stylesheet">
</head>
<body class="class-for-index">
Page 1
</body>
</html>
page.html (link to the single stylesheet)
<html>
<head>
<link href="styles.css" rel="stylesheet">
</head>
<body class="class-for-page">
Page 2
</body>
</html>
You've learnt an important lesson of the DRY principle - Don't Repeat Yourself. Maintaining many CSS files creates overhead - how many places do you want to define/change the styling for H1 for example? This is why you've been asked to have a single file.
I'd recommend taking the largest of your css files and making it the master. For each of the other files, add those elements that are missing from the master. It's tedious, but that's the problem you created ;)
You could just copy and paste each file into a single master file and it would work (this is css and the last definition will win), but it's poor practice and you'll just have problems editing it when you have to find the actual definition you are using.
Others have already explained how to link to a single css file from many pages.
I am assuming you aren't using PHP at all.
Maintaining consistent look across all your webpages is quite easy if done correctly.
basically you have two options:
1. Put all CSS blocks into a single file and link it to all pages
For example: add this to all HTML pages, this single style.css file has rules for all the HTML pages as well as the overall layout.
<head>
<link href="style.css" rel="stylesheet">
</head>
This style.css file can get messy and large if you have a lot of HTML pages.
2. Put CSS blocks that are related to overall design in one file; add individual page-specific CSS rules into new files and link these to their respective pages
For example: add this to a login page, the main.css file will give the overall layout like body background-color, font-family, font-size etc. etc. while the login.css is specifically tailored to the login.html page.
<head>
<link href="css/main.css" rel="stylesheet">
<link href="css/login.css" rel="stylesheet">
</head>
I personally prefer the 2nd approach because it's more easy to maintain and I have more control over my CSS without breaking other styles.
However if you decide to follow the 1st technique, it is advisable to separate strictly page specific CSS (styles that are being only used by as single page) by comment lines. This makes the file more readable.
I think a single css file to be created and linked to all pages. You can create multiple css files too but one css file would be easy to maintain and once your index.html loads the css file would get cached in the browser.
Each file within your solution just needs to link to that one unified external stylesheet via a link tag in the head of the document:
<link rel="stylesheet" type="text/css" href="/path-to-mystyle.css">
Google "create external stylesheet" for many resources on this!
You can create a separate CSS file and put all of your "common" CSS into that, call it main.css for example. This is CSS for tags such as p, h1, h2, ul, li etc to set fonts and margins etc across the whole site since these should not really change between different pages.
You can include that file on all of your pages.
Then beneath that file you can include a page specific CSS file with CSS for that page only. That will have CSS which is for the layout of that specific page like background-images etc.
This is creating external css file:
In Index.html:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Other pages,
Page-1.html:
Put the same css file,
<link rel="stylesheet" type="text/css" href="mystyle.css">
Same as put css file for page-2.html and likewise..
Note: Latest of html, no need to put type="text/css" for create external css file.
It isn't fantastic practice to have 1 CSS file for all pages in a site, especially if you are styling selectors like h1, a, p etc... very differently per page.
But allejo has a great, simple approach to it.
Since the project calls for 1, just make sure you don't override the styles of elements on pages you want styled differently. If it means adding some additional divs to encompass tags on multiple pages to not lose points then go for that.
IE:
.about_page h1{
...}
.home_page p{
...}
etc...

External CSS not working

I need help again. I'm watching some tutorials, and I have an easy code that works fine with internal CSS, but I doesn't with external CSS. I think I'm doing everything right, since I don't change a single word of the code, excep for the external css reference. Any ideas why is it not working? Thanks for your answers! (By the way, I read all the post relationed with my problem, but nothing work out.) Here's the code:
div.box
{
width:320px;
padding:10px;
border:10px solid green;
margin:0px;
font-family: Arial, Helvetica, Sans-Serif;
font-weight: bold;
font-size: large;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="new 1.css">
</head>
<body>
<div class="box">This text in a box example uses css.<br /><b>Note:</b> there is a
DOCTYPE declaration (above the html element), so it displays correctly in all browsers.
</div>
</body>
</html>
It work out here! It is driving me insane. I tried it in Notepepad++, Brackets, and text editors. I really can't figure out what's happening.
You can't have spaces in a URL, try changing the space to its ASCII character: %20 so it would look like this:
<link rel="stylesheet" type="text/css" href="new%201.css">
Or what I would normally do is use proper file naming conventions, either camel case (every word [ besides the first one] starts with an upper case letter) or use underscores between the names.
I had the exact same problem a few days ago. (And I had no spaces in my file name..)
As soon as I outsourced my CSS code in an external file, the exact same problem came across.
For me the problem was in the encoding.
For those who have this problem too: Just switch the file encoding to UTF-8 . (I used Notepad++)
Maybe you have to add to your html file:
<meta charset="UTF-8">
And then it should finally work.
see more here: http://www.w3schools.com/html/html_charset.asp
Change encoding of the css file to utf-8 using simple notepad.
Open css file by notepad, save as then choose utf-8 from encoding tab then save.
Remember to check that there is no inline style.
So, an inline style has the highest priority, and will override external and internal styles and browser defaults.
I had this problem too. But I understood that my wrong is here: when I was writing HTML file, I changed the direction of this file to a folder and created a CSS file next to it.
So my path for CSS file became wrong. Now I recommend to first close your editor of HTML or CSS, after choosing your direction of these files, then open your editor and write your code.

effective difference between html head for css tags?: #import url vs. link href

Is there a effective difference between
<style type="text/css">#import url(/css/layout.css) all;</style>
and
<link href="/css/layout.css" type="text/css" static="all" rel="stylesheet">
Do browser behave different ?
What is recommended from w3c etc. ?
There are several reasons that you should use <link> instead of #import, 2 of them are:
Using #import may cause unexpected ordering in how they are downloaded.
The #import may cause blank white screen problem.
for more information about performance of websites, pls refer High Performance Web Sites.
I had the same question in mind . I had a clear idea when i went through this blog by Jennifer Kyrnin,
To know more you can have a look here
Begin with two stylesheets: simple.css (only simple rules for early browsers) modern.css (advanced CSS2, rules to override rules in simple.css)
Create a third stylesheet "import.css" containing only:
#import "modern.css";
Link the simple.css and import.css in the HEAD of the document:
<link rel="stylesheet" type="text/css" href="simple.css" />
<link rel="stylesheet" type="text/css" href="import.css" />
All CSS1 browsers will load simple.css and import.css, however, only modern browsers will understand the #import rule and also load modern.css. Since modern.css is linked after simple.css, its rules will override those in simple.css more easily.
Alternate Syntax
Different versions of the import rule have varying levels of support from older browsers.
#import "style.css"; /* hidden from nearly all v4 browsers */
#import url('style.css'); /* IE4 can understand, but not NN4 */
...
We should not put #import at the bottom of simple.css....
According to the CSS specs, #import rules must precede any other CSS rules in a stylesheet, so this creates the need to place it in its own stylesheet for these purposes.