So I'm facing an odd case. So i have uploaded Fonts in Public/fonts directory (
this is where i have uploaded
screenshot attached). Then when i use it in blade for example it does not show on live website. My website is on shared hosting.
#extends('layouts.app')
#section('title', 'Dashboard 1')
#section('contents')
{{--<dashboard></dashboard>--}}
Murshalin
<style type="text/css">
#font-face {
font-family: Lestudio;
src: url('{{ public_path('fonts/bpg-le-studio-02-webfont.tff') }}');
}
</style>
#endsection
Like here for example it does not affect anything I also have it in core.scss file imported but nothing changes. am I missing something?
It does not show in source too : Source image
Ok so in core.css file i imported web font using cdn
#import url("//cdn.web-fonts.ge/fonts/etc");
and just used font-family
This worked for me.
Related
I'm new to Laravel Breeze and tailwind.
After successfully installed Laravel Breeze and looking at /login page source, I couldn't match the source code and actual page source and would like to know what's going on.
In app.blade.php or guest.blade.app there are the following lines.
<!-- Styles -->
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
But when viewing login page source, it has
<!-- Styles -->
<style>
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}a{background-color:transparent} ...
</style>
<style>
body {
font-family: 'Nunito';
}
</style>
And no javascript is loaded.
I'm expecting to see just the link to public/css/app.css and public/js/app.js but no such thing here.
So if anyone can explain how Laravel Breeze works regarding to including css and js
and how I can extend tailwind css to other pages and use js in other pages, I'd really appreciate.
You need to compile the assets installed with Breeze. To do so, just run the following commands on your project directory:
npm install
npm run dev
If you check the Public folder on your Laravel app, you should see the CSS and JS compiled. Refresh the page, and the style should look OK.
Documentation reference:
https://laravel.com/docs/8.x/starter-kits#laravel-breeze-installation
I'm trying to load the Roboto google font in a PhalconPHP application. I've installed roboto-fontface using bower and I'm trying to load it's fonts locally using #font-face in my _fonts.scss file.
This is my font loading "code":
$roboto-font-path: '../../bower_components/roboto-fontface/fonts/roboto/';
#font-face {
font-family: "Roboto";
src: //local(Roboto Thin),
url("#{$roboto-font-path}Roboto-Thin.woff2") format("woff2"),
url("#{$roboto-font-path}Roboto-Thin.woff") format("woff");
font-weight: 100;
}
The url that I'm using seemed to work, but when inspecting what actually happens in Firefox I get the following (which is the contents of my index.volt):
Screenshot of Firefox.
Of course I can load this font using <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> but that compromises loading time when using multiple fonts in the future.
Any help?
The .htacces in the root of each PhalconPHP application redirects all incoming requests to the public directory. My bower_components was outside of this directory. Moved bower_components inside of the public directory using a .bowerrc file and modified some paths. Works like a charm now ¯_(ツ)_/¯.
Im trying to use Skeleton Boilerplate. I downloaded the basic zip, comes with images folder only holding a favicon, normalize.css, skeleton.css, and a very basic index.html. When I try styling the index with my own linked css, just a basic thing like a background color on the single div, or changing the text or title, it takes FOREVER to refresh the page. Its supposed to be super lightweight and looks to be, idk whats going on
Remove the 'Font' link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css" from index.html Skeleton and it should work at correct speed. It was what was slowing it down on my comp. Hope it helps.
Actually you just have to add the "https:" to the link.
Thats it!
Loading jQuery remotely is probably why you are having loading issues. In particular, if you download jQuery and replace <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> inside index.html to point to your locally downloaded version of jQuery, things should be as fast as expected.
As Thinnling said, you should remove or edit the Google Font link.
index.html:
Old:
<link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
New:
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
skeleton.css:
(line 123)
body{ font-family: 'Raleway', sans-serif; }
I implemented a webfont on our website. The website is available through two domains:
http://blog.von-der-see.de / http://www.vds-blog.de
The webfont is implemented this way:
#font-face {
font-family: Quattrocento-Sans;
src: url('./style/Quattrocento Sans.woff');
}
#font-face {
font-family: Quattrocento-Sans-Bold;
src: url('./style/Quattrocento Sans Bold.woff');
}
If you view the website in firefox through both domains, you will see that the font is not working on one of two domains.
The website is a wordpress and if i switch the home-url to the other domain, its not working on the on, but then on the other domain.
Whats the problem?
Have you tried adding font mime types in your htaccess?
Just out of interest why are you only using woff? No true type etc?
http://www.vds-blog.de/ doesn't load webfonts.
By changing style.css url in theme's header page
from
<link href="http://blog.von-der-see.de/wp-content/themes/vondersee/style.css" rel="stylesheet">
to
<link rel="stylesheet" href="http://www.vds-blog.de//wp-content/themes/vondersee/style.css">
may solve your problem.
I'm trying to create an offline HTML5 test application, and am playing with the new google fonts api at the same time. Does anyone have any ideas how to cache the remote fonts? Simply putting the api call in the cache manifest doesn't work, I assume this is because the api actually loads other files (ttf, eot, etc).
Any ideas if using the font api offline would be possible?
For reference this is the call I am making:
http://fonts.googleapis.com/css?family=IM+Fell+English|Molengo|Reenie+Beanie
If you paste that URL into the browser address bar you'll see the files the CSS links to:
http://themes.googleusercontent.com/font?kit=txVk61PTIsDrQQj2fK-76Q
http://themes.googleusercontent.com/font?kit=ljpKc6CdXusL1cnGUSamX_cCQibwlboQP4eCflnqtq0
http://themes.googleusercontent.com/font?kit=xwIisCqGFi8pff-oa9uSVOj-KzHqS7w8OFmqoAXdQwE
Robertc's approach is the solution...
I.e., Paste the google-provided link into your browser, and then add any files that are referenced into your manifest.
In my case I referenced
<link href='http://fonts.googleapis.com/css?family=Patua+One' rel='stylesheet' type='text/css'>
which just consists of the following style definition
#font-face {
font-family: 'Patua One';
font-style: normal;
font-weight: 400;
src: local('Patua One'), local('PatuaOne-Regular'), url('http://themes.googleusercontent.com/static/fonts/patuaone/v3/yAXhog6uK3bd3OwBILv_SD8E0i7KZn-EPnyo3HZu7kw.woff') format('woff');
}
So to get the font to work when cached (off-line or not), you have to add the URL referenced in the 'src' to your manifest.