I'm trying to add google fonts to my Rails 5.2 application and I can't figure out why it doesn't work/what is missing:
i added the following lines in application.scss file :
#import url('://fonts.googleapis.com/css?family=Lato:400,700,900&display=swap');
body {
padding-top: 70px;
font-family: 'Lato', sans-serif;
}
Before using #import in application.scss i tried to add in application.html.erb the following line in the head
<link href="https://fonts.googleapis.com/css?family=Lato:400,700,900&display=swap" rel="stylesheet">
Thanks for any help!
It seems the first line in the application.scss, there's a colon ( before //fonts, after url(' ) that causes error. Removing this fixes it:
#import url('//fonts.googleapis.com/css?family=Lato:400,700,900&display=swap');
body {
padding-top: 70px;
font-family: 'Lato', sans-serif;
}
No need to add additional line into your application since it'll be compiled in your scss file.
Alternative way is to host font(s) within the app for an extra tiny bit of performance enhancement. I have tried the steps below on a Rails 6 app:
Find open source font from: https://fontsource.org/fonts
for this example lets use roboto: https://fontsource.org/fonts/roboto
Depending on which package manager you are using, do either:
yarn add #fontsource/roboto or npm install #fontsource/roboto
In app/javascript/packs/application.js add this internal import:
import "#fontsource/roboto";
You should now be able to use the font in your stylesheets. Repeat the same steps for any other additional open source font.
Related
I am attempting to use a custom font using #font-face to my CSS file in Visual Studio. Note I am brand new to web development.
In Visual Studio, functions are color coded, and the url() part of my code below is not colored in like I see in other posts on StackOverflow and in YouTube tutorials.
The .ttf file is located in the same folder as my CSS file.
I am wondering if there is something I need to install to get the url() function to call properly.
#font-face {
font-family: 'example_font';
src: url(example.ttf) format(truetype);
}
body {
font-family: 'example_font', 'Arial';
text-align: center;
background-color: wheat;
}
I have tried moving the ttf file and updating the path location as well as opening my html file in separate browsers. I have also edited the backup font 'Arial' to other fonts and have found they changed the font in my browser when calling my HTML file. \
[image of the lack of url() coloring] (https://i.stack.imgur.com/QxVTJ.png)
I have created a kotlin react app using kotlin-react and I'm using kotlin-styled for CSS styling.
I want to change the font of a custom text component with a custom font from Google Fonts. With .css files I would have done the following:
#import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
.text {
font-family: 'Nunito', sans-serif;
}
How can I achieve something similar with kotlin-styled. I have looked for a import or url function but It doesn't exist. Also, they do not have any documentation on external fonts. Any help is appreciated.
There is CSSBuilder#import available since pre.210, so what you can do is:
CSSBuilder().apply {
import("url('https://fonts.googleapis.com/css2?family=Nunito&display=swap')")
fontFamily = "'Nunito', sans-serif"
}
I'm working on an ".scss" file for a Laravel website. I'm trying to use a locally stored ".otf" font file in a CSS #font-face tag.
The problem is that Laravel / web pack doesn't seem to be able to cope with relative paths for CSS src: properties. However, I need it to because the directory structure is going to change from the current development environment to when it's deployed, so I'm avoiding hard coding the full path.
The SCSS code:
#font-face {
font-family: LucyScript;
src: url('../fonts/LucyScript.otf');
}
Error message (npm run watch):
Update:
I've managed to put in a "workaround" by adding the following to my "app.blade.php" file:
<style type="text/css">
#font-face {
font-family: LucyScript;
src: url('./fonts/LucyScript.otf');
}
</style>
However, this isn't ideal as it's now mixing the CSS and HTML, if anyone knows how to resolve this just from within the ".scss" please enlighten me.
Thank you!
I'm trying to use Google Font on a page. In my html I used:
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
And in my CSS:
#import url('http://fonts.googleapis.com/css?family=Open+Sans');
Still whenI use "Open Sans" with the font-family attribute it stays on Arial.
body
{
background-color: #F1F1F2;
font-family: "Open Sans", Arial;
}
Using google font on any webpage is very easy and you can load the fonts asynchronously.
If you don't use the direct code that Google font delivers and you simply load the following url:
http://fonts.googleapis.com/css?family=Open+Sans:400,600
You'd be represented the source code (CSS).
Now, copy and paste the displayed code in the CSS source of your website.
You can then use your selected google font(s) on your webpages using the following:
body
{
background-color: #F1F1F2;
font-family: 'Open Sans', Arial;
}
That's enough and it will work.
I have a hunch that your bootstrap is being loaded after the CSS for your Google font. Find the point that you are importing this CSS:
#import "bootstrap-sprockets";
#import "bootstrap";
Then add your Google code AFTER that to make sure that it is not being overwritten by the bootstrap.
Good Luck!
First of all, you dont need to do it twice! any one kind of FONT ASSOCIATION is enough !!
Warning that overuse of #import may cause a overhead!
Bootstrap(if you have used it) usually overrides the font with -> font-family:"Helvetica Neue",Helvetica,Arial,sans-serif
Working Demo -> Click here
Note : I have added the font as external resources. It seems to be working properly !
just do !important after the font style you want to use
I'm trying to add a custom font to my wordpress website, but i'm not sure of what I'm doing here so if you can help me !
For the moment in my theme directory I have a font directory in which I've put my font.otf
My style.css is in the theme directory :
Theme
------style.css
------font
----------Museo300-Regular.otf
I'm using the compass to generate font face like this :
#include font-face("Museo300", font-files("font/Museo300-Regular.otf"));
which output me this :
#font-face {
font-family: "Museo300";
src: url('fonts/font/Museo300-Regular.otf') format('opentype'); }
And when I try to use it :
#headerContainer header #menu li {
float: left;
font-family: "Museo300";
color: #FFF; }
But I the font doesn't get used !
So if someone know where I'm wront !
Thanks
You need to do it like this, depending on your server setup. Also, never used font-files before, or compass. I use src but I'm guessing its your server path. I.e. It thinks your font is elsewhere.
#include font-face("Museo300", src("../font/Museo300-Regular.otf"));
or
#font-face {
font-family: 'Museo300';
src: url('../font/Museo-Regular.otf');
font-weight: normal;
font-style: normal;
}
Your path is wrong - it is simply a case of correctly showing the "path" to the directory.
This is what to do: in your fonts directory I would put a new file fonts.css
Then in your style.css put a CSS #import (font/fonts.css) statement
to include that file. It helps keep things tidy and you can move your font file between sites easily Font Squirrel generator for your custom fonts like this - free site and very useful making the CSS !