cssfontscarousellaravel-7
Laravel 7 Fonts And Owl Carousel
I wanted to change the font of my Laravel website, so I used @font-face in the style.css file and added the sources to the font; so this is my css code:
@font-face {
font-family: 'Adlanta';
font-style: 'normal';
font-weight: '700';
src: url('../webfonts/Adlanta/regular/Adlanta.eot');
src: url('../webfonts/Adlanta/regular/Adlanta.eot?#iefix') format('embedded-opentype'),
url('../webfonts/Adlanta/regular/Adlanta.woff2') format('woff2'),
url('../webfonts/Adlanta/regular/Adlanta.woff') format('woff'),
url('../webfonts/Adlanta/regular/Adlanta.ttf') format('truetype'),
url('../webfonts/Adlanta/regular/Adlanta.svg#Adlanta') format('svg');
}
body {
color: #666666;
font-size: 15px;
font-family: 'Adlanta', sans-serif;
line-height: 1.80857;
}
Here is the picture of the files Which I converted from .otf file on this site: Converter site: 
Before adding this css code I had this carousel that gets images from instagram: 
<?php
try {
$media = App\Traits\Instagram::feed();
} catch (Exception $e) {
//
}
?>
@isset($media)
@if(count($media) > 0)
<!-- Start Instagram Feed -->
<div class="instagram-box">
<div class="main-instagram owl-carousel owl-theme">
@foreach($media as $post)
<div class="item">
<div class="ins-inner-box">
<img src="{{ $post['imageThumbnailUrl'] }}" alt="" />
<div class="hov-in">
<a href="{{ $post['link'] }}" target="_blank"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div>
@endforeach
</div>
</div>
<!-- End Instagram Feed -->
@endif
@endisset
Here is the code that is added after running the website That is added by JavaScript:
<div class="instagram-box">
<div class="main-instagram owl-carousel owl-theme owl-loaded owl-drag">
<div class="owl-stage-outer"><div class="owl-stage" style="transform: translate3d(-702px, 0px, 0px); transition: all 0.25s ease 0s; width: 1560px;"><div class="owl-item cloned" style="width: 78px;"><div class="item">
<div class="ins-inner-box">
<img src="images/instagram-img-06.jpg" alt="">
<div class="hov-in">
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div></div><div class="owl-item cloned" style="width: 78px;"><div class="item">
<div class="ins-inner-box">
<img src="images/instagram-img-07.jpg" alt="">
<div class="hov-in">
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div></div><div class="owl-item cloned" style="width: 78px;"><div class="item">
<div class="ins-inner-box">
<img src="images/instagram-img-08.jpg" alt="">
<div class="hov-in">
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div></div><div class="owl-item cloned" style="width: 78px;"><div class="item">
<div class="ins-inner-box">
<img src="images/instagram-img-09.jpg" alt="">
<div class="hov-in">
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div></div><div class="owl-item cloned" style="width: 78px;"><div class="item">
<div class="ins-inner-box">
<img src="images/instagram-img-05.jpg" alt="">
<div class="hov-in">
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div></div><div class="owl-item" style="width: 78px;"><div class="item">
<div class="ins-inner-box">
<img src="images/instagram-img-01.jpg" alt="">
<div class="hov-in">
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div></div><div class="owl-item" style="width: 78px;"><div class="item">
<div class="ins-inner-box">
<img src="images/instagram-img-02.jpg" alt="">
<div class="hov-in">
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div></div><div class="owl-item" style="width: 78px;"><div class="item">
<div class="ins-inner-box">
<img src="images/instagram-img-03.jpg" alt="">
<div class="hov-in">
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div></div><div class="owl-item" style="width: 78px;"><div class="item">
<div class="ins-inner-box">
<img src="images/instagram-img-04.jpg" alt="">
<div class="hov-in">
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div></div><div class="owl-item active" style="width: 78px;"><div class="item">
<div class="ins-inner-box">
<img src="images/instagram-img-05.jpg" alt="">
<div class="hov-in">
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div></div><div class="owl-item active" style="width: 78px;"><div class="item">
<div class="ins-inner-box">
<img src="images/instagram-img-06.jpg" alt="">
<div class="hov-in">
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div></div><div class="owl-item active" style="width: 78px;"><div class="item">
<div class="ins-inner-box">
<img src="images/instagram-img-07.jpg" alt="">
<div class="hov-in">
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div></div><div class="owl-item active" style="width: 78px;"><div class="item">
<div class="ins-inner-box">
<img src="images/instagram-img-08.jpg" alt="">
<div class="hov-in">
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div></div><div class="owl-item active" style="width: 78px;"><div class="item">
<div class="ins-inner-box">
<img src="images/instagram-img-09.jpg" alt="">
<div class="hov-in">
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div></div><div class="owl-item" style="width: 78px;"><div class="item">
<div class="ins-inner-box">
<img src="images/instagram-img-05.jpg" alt="">
<div class="hov-in">
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div></div><div class="owl-item cloned" style="width: 78px;"><div class="item">
<div class="ins-inner-box">
<img src="images/instagram-img-01.jpg" alt="">
<div class="hov-in">
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div></div><div class="owl-item cloned" style="width: 78px;"><div class="item">
<div class="ins-inner-box">
<img src="images/instagram-img-02.jpg" alt="">
<div class="hov-in">
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div></div><div class="owl-item cloned" style="width: 78px;"><div class="item">
<div class="ins-inner-box">
<img src="images/instagram-img-03.jpg" alt="">
<div class="hov-in">
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div></div><div class="owl-item cloned" style="width: 78px;"><div class="item">
<div class="ins-inner-box">
<img src="images/instagram-img-04.jpg" alt="">
<div class="hov-in">
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div></div><div class="owl-item cloned" style="width: 78px;"><div class="item">
<div class="ins-inner-box">
<img src="images/instagram-img-05.jpg" alt="">
<div class="hov-in">
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div></div></div></div><div class="owl-nav"><button type="button" role="presentation" class="owl-prev"><i class="fas fa-arrow-left"></i></button><button type="button" role="presentation" class="owl-next"><i class="fas fa-arrow-right"></i></button></div><div class="owl-dots disabled"></div></div>
</div>
HOWEVER After I added the font code, even without referencing any file just calling the function @font-face {} Destroyed the Whole instagram section But worked PERFECTLY on Every things else here is the picture: 
After Inspect element it appears that each item is taking the whole width 100% of the given bootstrap container and it is stacking them vertically without showing the instagram pictures.
PS: Here is the repo of the theme the changes are in css/styles.css please check all repo:
How Can I fix that??
Thank you :)
Much Apprectiated
Solution
Deleting the @font-face from style.css file and moving it to a different file fixed the issue
- CSS Flexbox Gap - gap value affecting width calculation
- How to use "repeat()" css function combined with Angular ngStyle directive?
- CSS Modules and CSS keyframe animations
- Difference between Localhost and opening html file
- Use of display:none but still keep the space used
- Referencing another element in CSS / doing math in CSS
- Issue with animation, skips half of it's way
- Vertically align text within input field of fixed-height without display: table or padding?
- hover over image effect: shadow
- How can I fix nested gird layout?
- How to put some space between elements when bootstrap grid collapse?
- How can I make Bootstrap 4 columns all the same height?
- Javascript live typing animation that handles HTML tags
- applying the same selectors on sibling have a slightly different behaviour
- How to overwrite css style
- How to create checkbox inside dropdown?
- Add image or text onto all JSP pages through Struts or CSS
- Render spans inside pre tag (in the HTML, not displayed as text to the user)
- What to use in place of ::ng-deep
- Select specific element before other element
- How to change font for the CodeMirror editor
- Make circle image according to screen size with CSS
- Div taking all horizontal space
- -webkit-backdrop-filter not working on Safari
- Nested Flexbox for navbar
- How to create a Numbering marker in CSS?
- Put text under drag-n-drop area
- Remove the space between 2 elements under each other using flex
- Bootstrap 5 tooltip placement top issue when page has a scroll
- How to dim an image keeping transparency untouched with CSS or JS?