I have a Vue application and I want use a line-awesome font. But in my App.vue that is my component I import css file fonts in this way:
#import 'assets/fonts/line-awesome/css/line-awesome.min.css';
My problem is that no errors are shown, but my fonts are not loaded in my app.
In that css file, it contains this font face:
#font-face {
font-family: "LineAwesome";
src: url("../fonts/line-awesome.eot?v=1.1.");
src: url("../fonts/line-awesome.eot??v=1.1.#iefix") format("embedded-opentype"),
url("../fonts/line-awesome.woff2?v=1.1.") format("woff2"),
url("../fonts/line-awesome.woff?v=1.1.") format("woff"),
url("../fonts/line-awesome.ttf?v=1.1.") format("truetype"),
url("../fonts/line-awesome.svg?v=1.1.#fa") format("svg");
font-weight: normal;
font-style: normal;
}
Now I don't know if my problem is because my path is wrong setted or I need a additional configuration in my app.
Some idea about how I can fix it?
Place your files under static directory and link like
#import '/staic/fonts/line-awesome/css/line-awesome.min.css';
Files in static/ are not processed by Webpack at all: they are directly copied to their final destination as-is, with the same filename.
Some serious issue with line-awesome css and fonts. Even I loaded using normal simple HTML site with source css and fonts (http://maxcdn.icons8.com/fonts/line-awesome/1.1/line-awesome.zip) its giving box symbol as an icon.
Sample code which I used for test source is below
<html>
<head>
<link rel="stylesheet" href="./la/css/line-awesome-font-awesome.css">
</head>
<body>
<i class="fa fa-file-word-o"></i>
</body>
</html>
Output as follows
But if you use cdn like as follows
<link rel="stylesheet" href="https://maxcdn.icons8.com/fonts/line-awesome/1.1/css/line-awesome-font-awesome.min.css">
Related
I am using #font-face to try and get the font 'Archisto' to load on my webpage. I am a newbie on building web pages and using #font-face. I followed all the steps on several tutorials and looked through several threads on here, but I can not get the font to load.
I have the css file uploaded in the folder http://www.unfoldmyworld.com/wp-content/themes/ashe/assets/css/Archistico.css
I have the font file uploaded in the folder http://www.unfoldmyworld.com/wp-content/themes/ashe/assets/fonts/FONT_11.TTF
The #font-face code in the .css file looks like this:
#font-face {
font-family: Archistico;
src: url(http://www.unfoldmyworld.com/wp-content/themes/ashe/assets/fonts/FONT_11.TTF);
}
I am calling the font with custom CSS that looks like this:
.page-content h5{
font-family: 'Archistico' !important;
font-size: 50px !important;
display: inline !important;
color: #231400 !important;
}
The page I am trying to get this to work on is: www.unfoldmyworld.com
I would really appreciate your help!
1- Add to the head section of web page.<link href="//db.onlinewebfonts.com/c/50f290d070f58bdf56e1cc32e5636174?family=Archistico" rel="stylesheet" type="text/css"/>
-2 Using #import CSS directive, put the following line in add to your css file.(http | https)
#import url(//db.onlinewebfonts.com/c/50f290d070f58bdf56e1cc32e5636174?family=Archistico);
-3 Use font-face declaration Fonts.(http | https)
#font-face {font-family: "Archistico"; src: url("//db.onlinewebfonts.com/t/50f290d070f58bdf56e1cc32e5636174.eot"); src: url("//db.onlinewebfonts.com/t/50f290d070f58bdf56e1cc32e5636174.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/50f290d070f58bdf56e1cc32e5636174.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/50f290d070f58bdf56e1cc32e5636174.woff") format("woff"), url("//db.onlinewebfonts.com/t/50f290d070f58bdf56e1cc32e5636174.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/50f290d070f58bdf56e1cc32e5636174.svg#Archistico") format("svg"); }
Let me know if this works for you :) Thanks
Have you tried it with a relative url?
I'm thinking of a CORS (Cross-Origin Resource Sharing) problem.
#font-face {
font-family: Archistico;
src: url('../fonts/FONT_11.TTF');
}
i would like to use two google fonts, but my fear is that adding in this way:
<link href='https://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
could be slower (in performance) than download fonts in collection...
So i download two fonts in collection, but i have doubt how i could to implement in my website...
Maybe i just have to insert the two collections in the css folder and than add in head
<link href='https://path/css/font/ ???????' rel='stylesheet' type='text/css'>
but i don't know what file i have to link in path... For example when i download PT Sans in collection, in this folder i have these files:
I hope you can help me understand more..
Thanks a lot and sorry for my english
Simply call your fonts in css file.
#font-face {
font-family: myFirstFont;
src: url(font1.woff); /* specify the path of your font location*/
}
Repeat this for next fonts.
#font-face {
font-family: myFirstFont;
src: url(font2.woff); /* specify the path of your font location*/
}
You do need even more font files.
If you just open the file from the Google Server...
https://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700,700italic
... you see how it is done.
You link the font files from the CSS file - not from the link element.
Assuming that you want your fonts loaded locally from in internal folder than an external source:
Add the folliowing to your code in a <style> tag:
#font-face {
font-family: 'PT_Sans';
font-style: Regular;
src: url('../fonts/PT_Sans-Web-Bold.ttf'); /* IE9 Compat Modes */
src: local('PT Sans'), local('PT_Sans'),
url('../fonts/PT_Sans-Web-Regular.ttf') format('truetype')
}
Or you can reference it externally in a CSS file.
I have downloaded the font-awesome library and linked it to my HTML. Here is the simplest version of my code:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="font-awesome.min.css">
</head>
<body>
<div id="content">
<i id="search-icon" class="fa fa-search"></i>
</div>
</body>
</html>
But, what is rendered in the browser is:
What am I missing? I need to get this working in Firefox only.
I would try to set encoding of the page first, and then check if all other files are placed in correct directories as "Copy the entire font-awesome directory into your project" in get started page says.
Firstly, when you inspect your page and click on the font-awesome.min.css file, is it linked correctly.
Secondly are the font and supporting files that come with FontAwesome sitting in the correct folder (relative to your font-awesome.min.css file)?
For example, unless you altered the CSS in the files they gave you, you need to place the /font directory that comes with FontAwesome up a directory from your CSS files.
See the following as an example of how the CSS is referencing the font files.
#font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.2.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
Steps: Change your href to point to:
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
Download the assets for FontAwesome: http://fortawesome.github.io/Font-Awesome/assets/font-awesome-4.2.0.zip
Move both the /css and /fonts folders directly next to your HTML file.
I don't know how to use Glypicons Pro in simple Meteor App:
meteor create meteor-intro
cd meteor-intro
meteor (to run the app and it works fine)
meteor add bootstrap-3
copy these folders of files into meteor-intro app folder
Downloads\glyphicons_pro\glyphicons_pro\glyphicons\web\html_css\css
Downloads\glyphicons_pro\glyphicons_pro\glyphicons\web\html_css\fonts
Downloads\glyphicons_pro\glyphicons_pro\glyphicons\web\html_css\images
replace content of meteor-intro.html with the following:
<head>
<title>meteor-intro</title>
<link rel="stylesheet" href="css/style.css?v=2">
<link rel="stylesheet" href="css/glyphicons.css">
</head>
<body>
<h2>Fonts</h2>
<div class="list list-fonts c">
<strong>glass</strong><span>UTF E001</span>
<strong>server_new</strong><span>UTF E470</span>
</div>
</body>
Meteor App runs but glyphicons are not rendered. How can I get them to render??
You should place the fonts and images in your Meteor /public folder, and then change the relative path of the url in the #font-face property of the glyphicons .css file to point to their location.
So if your new relative file path from your main Meteor app folder becomes public/glyphicons_pro/glyphicons/web/html_css/fonts, change the #font-face property to correspond to the location in the public folder:
#font-face {
font-family: 'Glyphicons Regular';
src:
url('/glyphicons_pro/glyphicons/web/html_css/fonts/glyphicons-regular.eot');
src:
url('/glyphicons_pro/glyphicons/web/html_css/fonts/glyphicons-regular.eot?#iefix') format('embedded-opentype'),
url('/glyphicons_pro/glyphicons/web/html_css/fonts/glyphicons-regular.woff') format('woff'),
url('/glyphicons_pro/glyphicons/web/html_css/fonts/glyphicons-regular.ttf') format('truetype'),
url('/glyphicons_pro/glyphicons/web/html_css/fonts/glyphicons-regular.svg#glyphiconsregular') format('svg');
font-weight: normal;
font-style: normal;
}
You should place the .css file in a part of your Meteor directory where it is only served on the client side.
*And also remove the links from your - the files are loaded automatically within your app once they are placed in the appropriate directories.
I've got a couple fonts I'd like to use in my RoR application, but their formats are mainly .ttf and .otf, among others. How would I go about embedding these files in my Rails app? Namely, once I put them in my assets folder, what exactly is the syntax for me to embed them in my CSS and/or LESS files?
EDIT:
Here's the code I have for now:
#font-face {
font-family: Vow;
src: url('/assets/Vow.otf');
}
h1 {
font-family: Vow;
text-align: center;
}
It doesn't seem to be working for me. The output in the Rails console is something along the lines of:
ActionController::RoutingError (No route matches [GET] "/assets/Vow.otf")
And examining the page with Firebug says:
downloadable font: download failed (font-family: "Vow" style:normal weight:normal stretch:normal src index:0): status=2147746065
source: http://localhost:3000/assets/Vow.otf
Checkout http://www.css3.info/preview/web-fonts-with-font-face/
Larger example, assuming they're resolved directly under the assets dir
#font-face {
font-family: 'Nokia Pure Headline';
src: url('/assets/nokiapureheadlinerg-webfont.eot');
src: url('/assets/nokiapureheadlinerg-webfont.eot?iefix') format('eot'),
url('/assets/nokiapureheadlinerg-webfont.woff') format('woff'),
url('/assets/nokiapureheadlinerg-webfont.ttf') format('truetype'),
url('/assets/nokiapureheadlinerg-webfont.svg#webfont3AwWkQXK') format('svg');
font-weight: normal;
font-style: normal;
}
Im sorry I dont know LESS
Also for the config of the assets pipeline to have the contents of assets/fonts available under we use:
# Enable the asset pipeline
config.assets.enabled = true
config.assets.paths << Rails.root.join('/app/assets/fonts')
Adding a custom font to Rails application
Select font type and download
for example
go to http://www.dafont.com
select font and download font
Generate font files
go to http://www.fontsquirrel.com/
select - web font generator - select font u download(unzip file downloaded from http://www.dafont.com).
Retrieve the font files
This site will generate another zip which contain all required for that font style.
From that zip, unzip and open css, copy css into your html or css file of that
Add the font to your rails app
(How to add a custom font to Rails app?)
config/application.rb
config.assets.enabled = true
config.assets.paths << "#{Rails.root}/app/assets/fonts"
Add it to the view:
<html lang="en">
<head>
<style>
#font-face {
font-family: 'a_sensible_armadilloregular';
src: url('/assets/para/a_sensible_armadillo-webfont.eot');
src: url('/assets/para/a_sensible_armadillo-webfont.eot?#iefix') format('embedded-opentype'),
url('/assets/para/a_sensible_armadillo-webfont.woff') format('woff'),
url('/assets/para/a_sensible_armadillo-webfont.ttf') format('truetype'),
url('/assets/para/a_sensible_armadillo-webfont.svg#a_sensible_armadilloregular') format('svg');
font-weight: normal;
font-style: normal;
}
.content p {
font-family: 'a_sensible_armadilloregular';
font-size: 42px;
}
</style>
</head>
<body>
<div class="content">
<p>sample text</p>
</div>
</body>
add a custom font to Rails application by using google fonts
for example i am using Freckle Face
http://www.google.com/fonts#QuickUsePlace:quickUse/Family:
Quick Use: Freckle Face
1. Choose the styles you want:
Impact on page load time
Tip: Using many font styles can slow down your webpage, so only select the font styles that you actually need on your webpage.
2. Choose the character sets you want:
Tip: If you choose only the languages that you need, you'll help prevent slowness on your webpage.
Latin (latin)
Latin Extended (latin-ext)
3. Add this code to your website:
Instructions: To embed your Collection into your web page, copy the code as the first element in the of your HTML document.
<link href='http://fonts.googleapis.com/css?family=Freckle+Face' rel='stylesheet' type='text/css'>
4. Integrate the fonts into your CSS:
The Google Fonts API will generate the necessary browser-specific CSS to use the fonts. All you need to do is add the font name to your CSS styles. For example:
font-family: 'Freckle Face', cursive;
Instructions: Add the font name to your CSS styles just as you'd do normally with any other font.
Example:
h1 { font-family: ‘Metrophobic’, Arial, serif; font-weight: 400; }
<head>
<meta charset='UTF-8' />
<link href='http://fonts.googleapis.com/css?family=Freckle+Face' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="header">
<div id="nav">
Contact <span style="word-spacing:normal; color:white; font-family: 'Freckle Face', cursive;, arial, serif; font-size:20px;"><--Click a link to see this page in action!</span>
</div>
</div>
</body>