I have just installed a custom WordPress theme (this is my first time working with WordPress, so I'm still learning a lot) and I need to make the font of the blog match the font for the rest of the web site, which is a Google Web Font.
I went to the custom theme's stylesheet editor in the WordPress Dashboard and added the font via #import. So it currently looks like this:
/* Make all custom CSS changes BELOW this line
-----------------------------------------------------------*/
#import url("http://fonts.googleapis.com/css?family=Questrial:700,400");
body { font-family: Questrial, sans-serif; }
But that didn't change the font in the blog. Am I not implementing the web font correctly? Is there some better/other way to do what I'm trying to accomplish?
Thanks for anyone's help!
Well, it looks like you are implementing the font correctly.
Try using a tool like Firebug for Firefox or Google Chrome's built in developer tools to see if the HTTP Request is coming back OK from the Google Fonts server.
If it's properly loading the CSS file, your problem may lie within CSS inheritance. Because of the 'Cascading' part of the Cascading Style Sheets, there may be a rule that is higher on the list of importance. You'll just have to hunt through and find it. Again you can use Firebug or Chrome developer tools for this as well.
The most simple solution may be simply adding an font-family: Questrial, sans-serif !important;
Related
I'm using Chrome's Lighthouse audit to make some performance improvements to a website and there are some styles under the "Remove unused CSS' section that I cannot locate anywhere on the site.
The ones I am questioning are the 2 lines starting html, body etc.
They look a bit like reset styles but aren't the ones I have in the CSS file.
I've tried searching the theme files (this is a shopify site), the page source, turning off javascript and these styles don't show up anywhere.
Has anyone encountered this before?
Since it's a Shopify Site it's using the Shopify style CDN by default. Since it's a CDN the css files are not going to be found in your project directory but rather on Shopify's website. An example of a style CDN can be found here, this one is for bootstrap.It uses a URL to access style options that are stored on their servers so you don't have to download the CSS locally.
Here's more on CDNs.
As for your issue, it looks like your project is referencing these CDNs but you're not using them. If you can find where in your project these CDNs are linked and remove them/comment them out it should resolve the issue.
Here's a similar question about whether or not it's safe to remove unused/deferred styles for Shopify.
I'm trying to find out which one loads faster. Upon checking the audit tab in Chrome both approach result in a slow First meaningful paint. I'm using googleapi font to render fonts in my site. Below are the codes I'm comparing
<link href='https://fonts.googleapis.com/css?family=Montserrat&subset=latin' rel='stylesheet'>
vs
#font-face {
font-family: 'Montserrat';
src: url('../fonts/Montserrat/Montserrat-Regular.ttf') format('truetype');
}
Now it seems that hosting the font on my local directory loads slower. I'm not sure if what I'm doing is correct. Any idea which one is faster and what is the best way to implement this?
I'm just trying to cut down the First meaningful paint down to half. I used the link in to reference the googleapi but upon checking the audit its taking 1,500ms just to load this from googleapi site.
Everything you put inside the <head> tag will be loaded before everything else.
So the <head> first loads the css file, after that it loads the #font-face.
If load the font inside the <head> using <link>, the browser will first load the font, then the css file.
So <link> will be faster in terms of performance. Not that it will be a huge / notable difference.
Also:
In your example there is also a difference with loading it with from google's cdn or serve it from your local server.
Cdn's are meant to serve files really fast. Depending what server you have, Im pretty sure google's servers are way, way fasterf. So google's option loading it with the <link> tag is the recommended way to go.
See also this SO question, its about #import. But its just the same as #font-face { src: ... ; }
Including Google Web Fonts link or import?
Very misleading answer above.
The <link> loads a CSS with #font-face inside. It is verifiably slower.
We should design code so that web pages load fast; however, a user's device can affect slow down the loading of web pages. For this reason, I take into account how slow a web page could load for some users when designing and coding my web pages. Linking to the font in the HTML will quicken the font face being displayed before other styles. However, I would rather styles for images and the like to be displayed as soon as possible. Changes in such elements can be rather jarring, so I use #font-face in my main CSS file instead of linking to font files in the HTML.
I am importing 'Roboto' fonts on my sass file
#import "https://fonts.googleapis.com/css?family=Roboto:400,300";
.email-container {
font-family: 'Roboto';
}
The same email works in my machine in chrome gmail, but it doesn't work in some of my colleagues.
Could it be from some kind of their settings ?
Email clients are very cautious with loading external content. Most clients are outdated and rely on html4.
Css in some clients isn't parsed either. This could be the reason that the font isn't imported.
To fix this you could use inline style attributes but you won't be able to load a custom font. At least you will have a decent looking email.
i recently purchased a plug-in for my wordpress website called "pull out widget"
I don't like the font on the plugin. Is there a way I can change the font on it and use a Google font instead. any help would be appreciated. I tried to edit the plug-in but I don't know PHP that well. And I don't wana mess up the plug-in so I gave up.
You can change the font face via your theme's custom CSS – all pullout widgets are wrapped into a div with ID #pullouts. The custom CSS will overrule the pull-out-widget's css.
So just go into your custom css, and use Firebug or something to determine what class to call if you're unsure .... and of course this is assuming you downloaded the google fonts plugin -- http://wordpress.org/extend/plugins/wp-google-fonts/
I would like to control which parts in Stackoverflow are visible to me by a css file.
There are about ten css -files in Firefox installation folder. I am not sure whether I should edit them or not.
How can I customize Stackoverflow by CSS in Firefox?
You can create a file called "userContent.css" in your profile folder and it will be loaded on each page. Here's more information: http://www.mozilla.org/unix/customizing.html
If you need to make changes which only affect one particular site instead of every site, then you can use this syntax:
#-moz-document domain(stackoverflow.com) {
body {
background-color:#f0f;
}
}
The CSS equivalent of GreaseMonkey is the Stylish extension which allows you to overwrite site CSS without modifying your userChrome.css file.
With Stylish installed, you can simply create a custom user style for stackoverflow containing your css overwrites without risking messing up userChrome.css. You can also disable or enable that particular stylesheet at any time. Also, make sure to use !important in your style declaration as CSS specificity comes into play.
Try using firebug from http://getfirebug.com
You can also use greasemonkey to do further customization.
You can get a very handy addon in Firefox, called GreaseMonkey. It executes a custom javascript after a page loads, and is able to modify the html on the client side. For example people use it to strip out various elements, change color, fonts, rearrange elements etc
There is also a book about it available online for free
You can get the Greasemonkey add-in here.