Responsive Ad Slot

Enjoy The Results
Showing posts with label web-development. Show all posts

Responsive Bottom Sticky Footer Ads For Blogger or WordPress

No comments

Thursday, July 14, 2022

How To Create Responsive Bottom Sticky Footer Ads For Blogger or WordPress ? Responsive Bottom Sticky Footer Ads CSS
<!-- Responsive Bottom Sticky Footer Ads CSS -->
<style>
.fxdfooter-ads {
position: fixed;
bottom: 5px;
left: 0;
width: 100%;
max-height: 70px !important;
display: flex;
justify-content: center;
z-index: 20;
}
@media (max-width: 868px) {
.fxdfooter-ads {
    display:none;
  }
}
.fxdfooter-ads-close {
position: fixed;
z-index: 111111;
cursor: pointer;
bottom: -4px;
color: white;
background: blue;
width: 100px;
border-radius: 5px 5px 0px 0px;
font-size: 10px;
}

.fxdfooter-ads .fxdfooter-ads-close svg {
width: 22px;
height: 22px;
fill: #000;
}

.fxdfooter-ads .fxdfooter-ads-content {
overflow: hidden;
display: block;
position: relative;
text-align: center;
max-height: 70px !important;
width: 100%;
z-index: 99999;
}
.fxdfooter-ads{
     animation:animatebottom 5.4s;
}
@keyframes animatebottom{
    from{bottom:-300px;opacity:0} 
    to{bottom:0;opacity:1}
}
</style>
<!-- Responsive Bottom Sticky Footer Ads For Blogger or WordPress -->
<div class='fxdfooter-ads' id='fxdfooter-ads'>
<span class='fxdfooter-ads-close' onclick='document.getElementById("fxdfooter-ads").style.display="none"'>skip</span>
<div class='fxdfooter-ads-content'>

 ----- Add Code Here ---- 
 
</div></div>

Preview:



How to Change the Color of Address Bar in Mobile Browser Blogger Or WordPress

No comments

Thursday, May 5, 2022

Change the Color of Address Bar in Mobile Browser Blogger Or WordPress


WordPress - Address Bar in Mobile Browser
Match Address Bar Color on Mobile Browser to Your WordPress Theme

Simply add this code in your theme or child theme‘s header.php file just before the closing </head> tag.

<meta name="theme-color" content="#ff6600" />

Blogger - Address Bar in Mobile Browser

This line is a HTML meta tag used by Google Chrome on Android to change color of address bar in mobile browser. The content field has the hex code for the color you want to use as theme color. 

       <meta expr:content='#053f9d' name='theme-color'/>

      <meta expr:content='#053f9d' name='msapplication-navbutton-color'/>

Frontier Theme Read More Button Customization丨Without Plugin

No comments

Friday, February 25, 2022

How to change Blog Post Read More button name of wordpress frontier theme ?

Very simple process just in one step. 

Go To Appearance >  Theme File Editor > Theme Functions > loop-blog.php

Find Out and change it -

Finally Press the Update File Button.


loop-blog.php Full Customization Code
<?php
$blog_defaults = array(
'thumbnail' => '1',
'author' => '1',
'published' => '1',
'categories' => '1',
'comment_info' => '1',
'continue_btn' => '1',
'updated' => '0',
'tags' => '0',
);

$blog_elements = frontier_option( 'blog_elements', array() );
$blog_elements = wp_parse_args( $blog_elements, $blog_defaults );
?>

<article id="post-<?php the_ID(); ?>" <?php post_class( 'blog-view' ); ?>>
<?php do_action( 'frontier_before_blog_article' ); ?>

<header class="entry-header cf">
<?php do_action( 'frontier_before_blog_post_header' ); ?>
<h2 class="entry-title" <?php frontier_schema( 'entry-title' ); ?>><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<?php do_action( 'frontier_after_blog_post_header' ); ?>
</header>

<div class="entry-byline cf">
<?php do_action( 'frontier_before_blog_post_byline' ); ?>

<?php if ( $blog_elements['author'] == 1 ) : ?>
<div class="entry-author author vcard" <?php frontier_schema( 'entry-author' ); ?>>
<i class="fa fa-eye" style="font-size: 15px;color: #0980c8;padding-right: 5px;"></i><span class='the_views'><?php if(function_exists('the_views')) { the_views(); } ?></span>
<?php $frontier_post_author_url = get_the_author_meta( 'user_url' ) != '' ? get_the_author_meta( 'user_url' ) : get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>
<i class="genericon genericon-user"></i><a class="url fn" href="<?php echo esc_url( $frontier_post_author_url ); ?>" <?php frontier_schema( 'author-name' ); ?>><?php the_author(); ?></a>
</div>
<?php endif; ?>

<?php if ( $blog_elements['published'] == 1 ) : ?>
<div class="entry-date" <?php frontier_schema( 'entry-date' ); ?>>
<i class="genericon genericon-day"></i><a class="updated" href="<?php the_permalink(); ?>"><?php the_time(get_option( 'date_format' )); ?></a>
</div>
<?php endif; ?>

<?php if ( get_post_type() == 'post' && $blog_elements['categories'] == 1 ) : ?>
<div class="entry-categories">
<i class="genericon genericon-category"></i><?php the_category( ', ' ); ?>
</div>
<?php endif; ?>

<?php if ( $blog_elements['comment_info'] == 1 ) : ?>
<div class="entry-comment-info">
<i class="genericon genericon-comment"></i><a href="<?php the_permalink(); ?>#comment-area"><?php comments_number( __( 'Comments', 'frontier' ), __( '1 Comment', 'frontier' ), __( '% Comments', 'frontier' ) ); ?></a>

</div>
<?php endif; ?>

<?php edit_post_link( __( 'Edit', 'frontier' ), '<i class="genericon genericon-edit"></i>' ); ?>

<?php do_action( 'frontier_after_blog_post_byline' ); ?>

</div>
<div class="entry-content cf" <?php frontier_schema( 'entry-content' ); ?>>
<?php do_action( 'frontier_before_blog_post_content' ); ?>

<?php if ( frontier_option( 'blog_display', 'excerpt' ) == 'excerpt' ) : ?>

<div class="entry-excerpt"><?php the_excerpt(); ?></div>

<?php else : ?>

<?php the_content(); ?>

<?php endif; ?>

<?php wp_link_pages( array(
'before'           => '<div class="page-nav">' . __( '<span>Pages</span>', 'frontier' ),
'after'            => '</div>',
'link_before'      => '<span>',
'link_after'       => '</span>',
'next_or_number'   => 'number',
'nextpagelink'     => __( 'Next page', 'frontier' ),
'previouspagelink' => __( 'Previous page', 'frontier' ),
'pagelink'         => '%',
'echo'             => 1 ) );
?>

<?php do_action( 'frontier_after_blog_post_content' ); ?>
</div>

<footer class="entry-footer cf">
<?php do_action( 'frontier_before_blog_post_footer' ); ?>

<?php if ( frontier_option( 'blog_display', 'excerpt' ) == 'excerpt' ) : ?>

<?php if ( $blog_elements['continue_btn'] == 1 ) : ?>
<a href="<?php the_permalink(); ?>" class="continue-reading">
<?php $frontier_continue_reading_text = ( get_post_type() == 'page' ) ? __( 'Read Page', 'frontier' ) : __( 'Read More', 'frontier' ); ?>
<?php echo apply_filters( 'frontier_continue_reading_text', $frontier_continue_reading_text ); ?>
</a>
<?php endif; ?>

<?php endif; ?>

<?php if ( $blog_elements['updated'] == 1 ) : ?>
<div class="entry-updated updated">
<?php printf( __( 'Updated: %1$s &mdash; %2$s', 'frontier' ), get_the_modified_date(), get_the_modified_time() ); ?>
</div>
<?php endif; ?>

<?php if ( get_post_type() == 'post' && $blog_elements['tags'] == 1 ) : ?>
<div class="entry-tags"><?php the_tags(); ?></div>
<?php endif; ?>

<?php do_action( 'frontier_after_blog_post_footer' ); ?>
</footer>

<?php do_action( 'frontier_after_blog_article' ); ?>
</article>

Frontier Wordpress Theme Customized Menu Setup Process丨Without Plugin

No comments

Thursday, February 24, 2022

Go To > Theme Function  > Theme Header


<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<?php do_action( 'frontier_before_body' ); ?>

<?php if ( is_active_sidebar( 'widgets_body' ) ) dynamic_sidebar( 'widgets_body' ); ?>

<div id="container" class="cf" <?php frontier_schema( 'container' ); ?>>
<?php do_action( 'frontier_before_container' ); ?>

<?php if ( frontier_option( 'top_bar_enable', 1) == 1 ) : ?>
<?php $bar_elements = frontier_option( 'top_bar_elements' ); ?>

<div id="top-bar" class="cf">
<?php do_action( 'frontier_before_top_bar' ); ?>

<div id="top-bar-info">
<?php if ( !isset($bar_elements['title']) || $bar_elements['title'] == 1 ) : ?>
<?php $htag = ( is_singular() && !is_home() ) ? 'h2' : 'h1'; ?>
<?php echo '<' . $htag . ' id="site-title">'; ?><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php echo apply_filters( 'frontier_top_bar_title', get_bloginfo( 'name' ) ); ?></a><?php echo '</' . $htag . '>'; ?>
<?php endif; ?>

<?php if ( !isset($bar_elements['description']) || $bar_elements['description'] == 1 ) : ?>
<h4 id="site-description"><?php echo apply_filters( 'frontier_top_bar_description', get_bloginfo( 'description' ) ); ?></h4>
<?php endif; ?>
</div>
<header class="header">
  <input class="menu-btn" type="checkbox" id="menu-btn" />
  <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
  <ul class="menu">
    <li><a href="#work">Home</a></li>
    <li><a href="#about">Recent Update</a></li>
<li><a href="#careers">E-Books</a></li>
    <li><a href="#careers">About us</a></li>
<li><a href="#careers">Privacy Policy</a></li>
    <li><a href="#contact">Contact us</a></li>
  </ul>
</header>
<?php if ( isset( $bar_elements['top_menu'] ) && $bar_elements['top_menu'] == 1 ) : ?>
<nav id="nav-top">
<?php wp_nav_menu( array(
'theme_location' => 'frontier-menu-top',
'container' => false,
'menu_class' => 'nav-top',
'depth'  => 1,
'fallback_cb' => false ) );
?>
</nav>
<?php endif; ?>

<?php do_action( 'frontier_after_top_bar' ); ?>
</div>
<?php endif; ?>

<?php if ( frontier_option( 'header_enable', 1) == 1 ) : ?>
<div id="header" class="cf" <?php frontier_schema( 'header' ); ?>>
<?php do_action( 'frontier_before_header' ); ?>

<?php if ( frontier_option( 'header_logo', get_template_directory_uri() . '/images/logo.png' ) ) : ?>
<div id="header-logo">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo frontier_option( 'header_logo', get_template_directory_uri() . '/images/logo.png' ); ?>" alt="<?php echo get_bloginfo( 'name' ); ?>" /></a>
</div>
<?php endif; ?>

<?php if ( is_active_sidebar( 'widgets_header' ) ) dynamic_sidebar( 'widgets_header' ); ?>

<?php do_action( 'frontier_after_header' ); ?>
</div>
<?php endif; ?>

<?php if ( frontier_option( 'main_menu_enable', 1) == 1 ) : ?>
<?php $menu_style = frontier_option( 'main_menu_style', 'drop' ); ?>

<nav id="nav-main" class="cf <?php echo $menu_style; ?>" <?php frontier_schema( 'nav-main' ); ?>>
<?php do_action( 'frontier_before_menu' ); ?>
<?php if ( $menu_style == 'drop' ) : ?>
<a href="#" class="drop-toggle"><span class="genericon genericon-menu"></span></a>
<?php endif; ?>
<?php wp_nav_menu( array(
'theme_location' => 'frontier-menu-primary',
'container' => false,
'menu_class' => 'nav-main',
'fallback_cb' => 'wp_page_menu' ) );
?>

<?php do_action( 'frontier_after_menu' ); ?>
</nav>
<?php endif; ?>

<?php if ( is_active_sidebar( 'widgets_below_menu' ) ) : ?>
<div id="below-menu" class="cf">
<div id="widgets-wrap-below-menu" class="cf"><?php dynamic_sidebar( 'widgets_below_menu' ); ?></div>
</div>
<?php endif; ?>

<div id="main" class="<?php echo frontier_option( 'column_layout', 'col-cs' ); ?> cf">
<?php do_action( 'frontier_before_main' ); ?>

CSS Setup:

Go To > Frontier Option > Custom CSS


/* top customized nav */
.header ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}

.header li a {
  padding: 20px 20px;
  text-decoration: none;
  color:#fff;
  font-weight: 600;
}

.header li a:hover,
.header .menu-btn:hover {
  color: #50ff00;
}

/* menu */

.header .menu {
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
}

/* menu icon */

.header .menu-icon {
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 28px 20px;
  position: relative;
  user-select: none;
}

.header .menu-icon .navicon {
  background: #fff;
  display: block;
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
  width: 18px;
}

.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
  background: #fff;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

.header .menu-icon .navicon:before {
  top: 5px;
}

.header .menu-icon .navicon:after {
  top: -5px;
}

/* menu btn */

.header .menu-btn {
  display: none;
}

.header .menu-btn:checked ~ .menu {
  max-height: 240px;
}

.header .menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}

.header .menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
}

.header .menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}

.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  top: 0;
}

/* 48em = 768px */

@media (min-width: 48em) {
  .header li {
    float: left;
  }
  .header li a {
    padding: 20px 30px;
  }
  .header .menu {
    clear: none;
    float: left;
    max-height: none;
  }
  .header .menu-icon {
    display: none;
  }
}
/* theme top nav */
#nav-top .nav-top a{
padding: 0 3px;
}

Pure CSS Responsive Menu

No comments

Friday, February 18, 2022


<style>
body {
  margin: 0;
  font-family: Helvetica, sans-serif;
  background-color: #f4f4f4;
}

a {
  color: #000;
}

/* header */

.header {
  background-color: #fff;
  box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
  position: fixed;
  width: 100%;
  z-index: 3;
}

.header ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  background-color: #fff;
}

.header li a {
  display: block;
  padding: 20px 20px;
  border-right: 1px solid #f4f4f4;
  text-decoration: none;
}

.header li a:hover,
.header .menu-btn:hover {
  background-color: #f4f4f4;
}

.header .logo {
  display: block;
  float: left;
  font-size: 2em;
  padding: 10px 20px;
  text-decoration: none;
}

/* menu */

.header .menu {
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
}

/* menu icon */

.header .menu-icon {
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 28px 20px;
  position: relative;
  user-select: none;
}

.header .menu-icon .navicon {
  background: #333;
  display: block;
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
  width: 18px;
}

.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
  background: #333;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

.header .menu-icon .navicon:before {
  top: 5px;
}

.header .menu-icon .navicon:after {
  top: -5px;
}

/* menu btn */

.header .menu-btn {
  display: none;
}

.header .menu-btn:checked ~ .menu {
  max-height: 240px;
}

.header .menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}

.header .menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
}

.header .menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}

.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  top: 0;
}

/* 48em = 768px */

@media (min-width: 48em) {
  .header li {
    float: left;
  }
  .header li a {
    padding: 20px 30px;
  }
  .header .menu {
    clear: none;
    float: right;
    max-height: none;
  }
  .header .menu-icon {
    display: none;
  }
}
</style>

<header class="header">
  <a href="" class="logo">CSS Nav</a>
  <input class="menu-btn" type="checkbox" id="menu-btn" />
  <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
  <ul class="menu">
    <li><a href="#work">Our Work</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#careers">Careers</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</header>



CSS box-shadow Responsive Profile Card - Pure CSS Box

No comments

Wednesday, February 16, 2022

CSS Section:

 <style>
.card {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: 100%;
}
.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
</style>

HTML Section:

<div class="card">
  <img src="https://blogger.googleusercontent.com/img/a/AVvXsEhBWplK6xenUfr2YC9NmhSTZyd01xUjlidCd8Y2hrCRnHgq-3H26JN8dUq-lLG63QV7A4RYXeOMKY-V0GzY_qjN3Lw9Z5WhO7469W7S1nKESZ4hq29Qo72qYLMKQsr-TbnDTupPQRGTLM1jzut39qPsgAYglYmg8ezMmHnoi8AHNemHUKn587eke8q9=s400" alt="Avatar" style="width:100%;" />
  <div style="background:linear-gradient(to right, #00ccff 0%, #99ff99 100%);color: #fff;text-align: center;padding: 5px;font-weight: 600;"><a href="#">Sign up !</a></div> 
</div>







8 Best Wordpress plugins

1 comment

Tuesday, February 15, 2022

Only those who are connected to the WordPress platform know how important it is to use the plugin in WordPress because here you have to use different types of plugins to perform tasks according to your weight. So today's post with several necessary plugins.
 

AccessPress Anonymous Post

This is very effective if the members of your website want to post articles on their own. This plugin allows you to submit content written by others to your web site.

Classic Editor

As the latest version of WordPress has been updated, a new editor has been added, namely the block editor. For those who are new to WordPress, it may be a little difficult to use the block editor so they can go back to the old classic editor.

Classic Widgets

By using this plugin you will be able to manage the same process as the WordPress widget will fix the process that was previously managed. Basically for those new users this plugin will make the task easier. But it will not be a problem if you do not have this plugin when you get old using WordPress.

Elementor

This is a great plugin. Using it you can change any page style of your website. Only using drag-and-drop method can make your web page more beautiful. It is possible to rearrange any page very easily and very quickly using Element.

UpdraftPlus - Backup/Restore

Constantly using WordPress and building your own WordPress website. It can take a long time to create a full backup site but short time is enough for the website to crash or crash. So it is your responsibility to protect the website created with your long time and long labor. This plugin allows you to have a full backup of your website so that in case of any future damage to your WordPress site you can restore it to its previous state.

WP Blog Post Layouts

WP Magazine Modules Lite

WP-Members

Remove m=1 from blogger URL

1 comment

Friday, February 11, 2022


JavaScript Text Typing Animations

No comments

Tuesday, February 8, 2022

 <style>

.text-typ{
color:red;
}
</style>

<script>
var TxtRotate = function(el, toRotate, period) {
  this.toRotate = toRotate;
  this.el = el;
  this.loopNum = 0;
  this.period = parseInt(period, 5) || 500;
  this.txt = '';
  this.tick();
  this.isDeleting = false;
};

TxtRotate.prototype.tick = function() {
  var i = this.loopNum % this.toRotate.length;
  var fullTxt = this.toRotate[i];

  if (this.isDeleting) {
    this.txt = fullTxt.substring(0, this.txt.length - 1);
  } else {
    this.txt = fullTxt.substring(0, this.txt.length + 1);
  }

  this.el.innerHTML = '<span class="wrap">'+this.txt+'</span>';

  var that = this;
  var delta = 110 - Math.random() * 100;

  if (this.isDeleting) { delta /= 2; }

  if (!this.isDeleting && this.txt === fullTxt) {
    delta = this.period;
    this.isDeleting = true;
  } else if (this.isDeleting && this.txt === '') {
    this.isDeleting = false;
    this.loopNum++;
    delta = 100;
  }

  setTimeout(function() {
    that.tick();
  }, delta);
};

window.onload = function() {
  var elements = document.getElementsByClassName('txt-rotate');
  for (var i=0; i<elements.length; i++) {
    var toRotate = elements[i].getAttribute('data-rotate');
    var period = elements[i].getAttribute('data-period');
    if (toRotate) {
      new TxtRotate(elements[i], JSON.parse(toRotate), period);
    }
  }
  // INJECT CSS
  var css = document.createElement("style");
  css.type = "text/css";
  css.innerHTML = ".txt-rotate > .wrap { border-right: 0.08em solid #666 }";
  document.body.appendChild(css);
};
</script>


<div class="text-typ">
  <span
     class="txt-rotate"
     data-period="2000"
     data-rotate='[ "A Very Easy And Fast Way To Learn Something !", "simple.", "fast.", "created by www.learnvaly.org.", "Have fun!" ]'>
</span
></div>

Preview:

CSS Best Stylish Box - Pure CSS

No comments

Sunday, February 6, 2022

This is pure css and the box is made with css. You can use it any where of your website or webpages. Really this are looking dynamic and professional. Just copy this code and simply paste in your website html section where you want to appear this box. 

CSS Stylish Box - 1

CSS Section:
<style>
.box-title-1{
background: linear-gradient(to right, #fd3102 0%, #fdfdfd0f 100%);
position: relative;
color: #fff;
padding: 5px;
border-radius: 5px;
display: block;
  }
.box-post-1{
background: linear-gradient(to right, #ff600040 0%, #fdfdfd 100%);
color: #0078bf;
padding: 5px;
margin-bottom: 5px;
border-radius: 5px;
  }
  </style>
HTML Section:
<div class="box-post-1">
<span class="box-title-1">Post Title</span> 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
Preview:
Post Title Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

CSS Stylish Box - 2

CSS Section:
<style>
.box-title-2{
background: linear-gradient(to right, #6302fd 0%, #fdfdfd0f 100%);
position: relative;
color: #fff;
padding: 5px;
border-radius: 5px;
display: block;
  }
.box-post-2{
background: linear-gradient(to right, #00ff8938 0%, #fdfdfd 100%);
color: #0078bf;
padding: 5px;
margin-bottom: 5px;
border-radius: 5px;
  }
  </style>
HTML Section:
<div class="box-post-2">
<span class="box-title-2">Post Title</span> 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
Preview:
Post Title Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

CSS Stylish Box - 3

CSS Section:

HTML Section:
<style>
.box-title-3{
background: linear-gradient(to right, #6302fd 0%, #fdfdfd0f 100%);
position: relative;
color: #fff;
padding: 5px;
border-radius: 5px;
display: block;
  }
.box-post-3{
background: linear-gradient(to right, #00ff8938 0%, #fdfdfd 100%);
color: #0078bf;
padding: 5px;
margin-bottom: 5px;
border-radius: 5px;
  }
  </style>

<div class="box-post-3">
<span class="box-title-3">Post Title</span> 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
Preview:

Post Title Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

CSS Stylish Box - 4

CSS Section:

HTML Section:
<style>
.box-title-4{
background: linear-gradient(to right, #6302fd 0%, #fdfdfd0f 100%);
position: relative;
color: #fff;
padding: 5px;
border-radius: 5px;
display: block;
  }
.box-post-4{
background: linear-gradient(to right, #00ff8938 0%, #fdfdfd 100%);
color: #0078bf;
padding: 5px;
margin-bottom: 5px;
border-radius: 5px;
  }
  </style>

<div class="box-post-4">
<span class="box-title-4">Post Title</span> 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
Preview:

CSS Stylish Box - 5

CSS Section:

HTML Section:
<style>
.box-title-5{
background: linear-gradient(to right, #6302fd 0%, #fdfdfd0f 100%);
position: relative;
color: #fff;
padding: 5px;
border-radius: 5px;
display: block;
  }
.box-post-5{
background: linear-gradient(to right, #00ff8938 0%, #fdfdfd 100%);
color: #0078bf;
padding: 5px;
margin-bottom: 5px;
border-radius: 5px;
  }
  </style>

<div class="box-post-5">
<span class="box-title-5">Post Title</span> 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
Preview:


CSS Stylish Box - 6

CSS Section:

HTML Section:
<style>
.box-title-6{
background: linear-gradient(to right, #6302fd 0%, #fdfdfd0f 100%);
position: relative;
color: #fff;
padding: 5px;
border-radius: 5px;
display: block;
  }
.box-post-6{
background: linear-gradient(to right, #00ff8938 0%, #fdfdfd 100%);
color: #0078bf;
padding: 5px;
margin-bottom: 5px;
border-radius: 5px;
  }
  </style>

<div class="box-post-6">
<span class="box-title-6">Post Title</span> 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
Preview:


CSS Stylish Box - 7

CSS Section:

HTML Section:
<style>
.box-title-7{
background: linear-gradient(to right, #6302fd 0%, #fdfdfd0f 100%);
position: relative;
color: #fff;
padding: 5px;
border-radius: 5px;
display: block;
  }
.box-post-7{
background: linear-gradient(to right, #00ff8938 0%, #fdfdfd 100%);
color: #0078bf;
padding: 5px;
margin-bottom: 5px;
border-radius: 5px;
  }
  </style>

<div class="box-post-7">
<span class="box-title-7">Post Title</span> 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
Preview:


CSS Stylish Box - 8

CSS Section:

HTML Section:
<style>
.box-title-8{
background: linear-gradient(to right, #6302fd 0%, #fdfdfd0f 100%);
position: relative;
color: #fff;
padding: 5px;
border-radius: 5px;
display: block;
  }
.box-post-8{
background: linear-gradient(to right, #00ff8938 0%, #fdfdfd 100%);
color: #0078bf;
padding: 5px;
margin-bottom: 5px;
border-radius: 5px;
  }
  </style>

<div class="box-post-8">
<span class="box-title-8">Post Title</span> 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
Preview:


CSS Stylish Box - 9

CSS Section:

HTML Section:
<style>
.box-title-9{
background: linear-gradient(to right, #6302fd 0%, #fdfdfd0f 100%);
position: relative;
color: #fff;
padding: 5px;
border-radius: 5px;
display: block;
  }
.box-post-9{
background: linear-gradient(to right, #00ff8938 0%, #fdfdfd 100%);
color: #0078bf;
padding: 5px;
margin-bottom: 5px;
border-radius: 5px;
  }
  </style>

<div class="box-post-9">
<span class="box-title-9">Post Title</span> 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
Preview:


CSS Stylish Box - 10

CSS Section:

HTML Section:
<style>
.box-title-10{
background: linear-gradient(to right, #6302fd 0%, #fdfdfd0f 100%);
position: relative;
color: #fff;
padding: 5px;
border-radius: 5px;
display: block;
  }
.box-post-10{
background: linear-gradient(to right, #00ff8938 0%, #fdfdfd 100%);
color: #0078bf;
padding: 5px;
margin-bottom: 5px;
border-radius: 5px;
  }
  </style>

<div class="box-post-10">
<span class="box-title-10">Post Title</span> 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
Preview:


CSS Stylish Box - 11

CSS Section:

HTML Section:
<style>
.box-title-11{
background: linear-gradient(to right, #6302fd 0%, #fdfdfd0f 100%);
position: relative;
color: #fff;
padding: 5px;
border-radius: 5px;
display: block;
  }
.box-post-11{
background: linear-gradient(to right, #00ff8938 0%, #fdfdfd 100%);
color: #0078bf;
padding: 5px;
margin-bottom: 5px;
border-radius: 5px;
  }
  </style>

<div class="box-post-11">
<span class="box-title-11">Post Title</span> 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
Preview:


CSS Stylish Box - 12

CSS Section:

HTML Section:
<style>
.box-title-12{
background: linear-gradient(to right, #6302fd 0%, #fdfdfd0f 100%);
position: relative;
color: #fff;
padding: 5px;
border-radius: 5px;
display: block;
  }
.box-post-12{
background: linear-gradient(to right, #00ff8938 0%, #fdfdfd 100%);
color: #0078bf;
padding: 5px;
margin-bottom: 5px;
border-radius: 5px;
  }
  </style>

<div class="box-post-12">
<span class="box-title-12">Post Title</span> 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
Preview:


CSS Stylish Box - 13

CSS Section:

HTML Section:
<style>
.box-title-13{
background: linear-gradient(to right, #6302fd 0%, #fdfdfd0f 100%);
position: relative;
color: #fff;
padding: 5px;
border-radius: 5px;
display: block;
  }
.box-post-13{
background: linear-gradient(to right, #00ff8938 0%, #fdfdfd 100%);
color: #0078bf;
padding: 5px;
margin-bottom: 5px;
border-radius: 5px;
  }
  </style>

<div class="box-post-13">
<span class="box-title-13">Post Title</span> 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
Preview:


CSS Stylish Box - 14

CSS Section:

HTML Section:
<style>
.box-title-14{
background: linear-gradient(to right, #6302fd 0%, #fdfdfd0f 100%);
position: relative;
color: #fff;
padding: 5px;
border-radius: 5px;
display: block;
  }
.box-post-14{
background: linear-gradient(to right, #00ff8938 0%, #fdfdfd 100%);
color: #0078bf;
padding: 5px;
margin-bottom: 5px;
border-radius: 5px;
  }
  </style>

<div class="box-post-14">
<span class="box-title-14">Post Title</span> 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
Preview:


CSS Stylish Box - 15

CSS Section:

HTML Section:
<style>
.box-title-15{
background: linear-gradient(to right, #6302fd 0%, #fdfdfd0f 100%);
position: relative;
color: #fff;
padding: 5px;
border-radius: 5px;
display: block;
  }
.box-post-15{
background: linear-gradient(to right, #00ff8938 0%, #fdfdfd 100%);
color: #0078bf;
padding: 5px;
margin-bottom: 5px;
border-radius: 5px;
  }
  </style>

<div class="box-post-15">
<span class="box-title-15">Post Title</span> 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
Preview:


CSS Stylish Box - 16

CSS Section:

HTML Section:
<style>
.box-title-16{
background: linear-gradient(to right, #6302fd 0%, #fdfdfd0f 100%);
position: relative;
color: #fff;
padding: 5px;
border-radius: 5px;
display: block;
  }
.box-post-16{
background: linear-gradient(to right, #00ff8938 0%, #fdfdfd 100%);
color: #0078bf;
padding: 5px;
margin-bottom: 5px;
border-radius: 5px;
  }
  </style>

<div class="box-post-16">
<span class="box-title-16">Post Title</span> 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
Preview:


CSS Stylish Box - 17

CSS Section:

HTML Section:
<style>
.box-title-17{
background: linear-gradient(to right, #6302fd 0%, #fdfdfd0f 100%);
position: relative;
color: #fff;
padding: 5px;
border-radius: 5px;
display: block;
  }
.box-post-17{
background: linear-gradient(to right, #00ff8938 0%, #fdfdfd 100%);
color: #0078bf;
padding: 5px;
margin-bottom: 5px;
border-radius: 5px;
  }
  </style>

<div class="box-post-17">
<span class="box-title-17">Post Title</span> 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
Preview:


CSS Stylish Box - 18

CSS Section:

HTML Section:
<style>
.box-title-18{
background: linear-gradient(to right, #6302fd 0%, #fdfdfd0f 100%);
position: relative;
color: #fff;
padding: 5px;
border-radius: 5px;
display: block;
  }
.box-post-18{
background: linear-gradient(to right, #00ff8938 0%, #fdfdfd 100%);
color: #0078bf;
padding: 5px;
margin-bottom: 5px;
border-radius: 5px;
  }
  </style>

<div class="box-post-18">
<span class="box-title-18">Post Title</span> 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
Preview:

Which is the best, Blogger or WordPress ?

No comments

Thursday, February 3, 2022

Blogger and Wordpress are both very popular CMS platforms. Blogger is powered by Google and is completely free. There is no need to create a website here. Even if you don't want to buy a domain, you will get the benefit of a website full of Google subdomains. On the other hand, to create a blog or website in WordPress, you must purchase a top level domain and hosting.

Which of the following is more useful than Blogger and Wordpress ?

Since Blogger is a product of Google, it is secure in terms of security. It is also a free CMS platform. Here you can use different gadget widgets. You can use all types of Javascript, CSS, HTML in the Blogger theme or anywhere on the website as needed. However, not much advanced work can be expected from here. Since it is a completely free platform, you can use Tuktuk to work with it. But yes, news websites, blogging, educational websites, pdf downloads, and many more can be done with the blogger website. So the question is, if everything can be done with a blogger website, then why do people build a website in WordPress by spending only money. I said a while ago that Blogger is a free platform so don't get too many advanced features here. For example: If you want to create a membership website, you must have a WordPress platform. This will never be possible with Blogger. You will also find many types of plugins in WordPress that can be used to do many complex tasks and very easily, but such plugins can not be used in the Blogger system. Most of the work here you have to do manually.

For those who like Blogger -

  • Those who only want to publish writing, photo sharing, video sharing, and their own content can use it safely.
  • You can use it only if you want to write on news, reading related topics etc.
  • You can use it if you want to write about written biographies, biographical statements etc.
  • Bloggers can use different types of photographs if you want to work on photo type topics.

For those who find Wordpress useful -

  • E-Commerce WordPress works very well for any site. So those who are interested in creating e-commerce websites must use WordPress.
  • You need to use WordPress to create any type of membership website.
  • If you want to create a job recruitment and application website, you need to use WordPress.
  • If you want to create any website related to social community and communication, you have to use WordPress.
  • Public Information Collection Data is used to create a website.
  • Since you will get many advanced features in WordPress, you will use WordPress to create any advanced website starting from extra advanced level.

Which is better in terms of Blogger and Wordpress security

It depends entirely on the admin of the website. However, since Blogger is Google's product, Google will give you 80 percent security here. All you have to do is keep your Gmail ID secure. But in the case of WordPress, you have to take care of your own security in several places. As well as securing your own postings at your own risk, keep your domain panel secure.

In my opinion there is no end to the good, Blogger or WordPress can be selected based on who will create what kind of website. However, if you want to create a website just for writing and tuk-tuk work, then you must use Blogger. Many news websites are being created by Blogger and its websites are providing very good quality services and also a good amount of money is being earned from here. Uses only Blogger. If you get a response in the comments, I will post about hosting later, I am thinking, if you buy hosting from any site, you will get the most security. The best hosting available on the site at a low price will be posted.

You can tell in the comments what you need to know. The article will be published according to your needs.

CSS Font Family List With Preview

No comments

Wednesday, February 2, 2022

How To Use CSS Font Style ?

tag name
font-family: Comic Sans MS; 
}
For Example:
body
font-family: Comic Sans MS; 
}
.class-name
font-family: Comic Sans MS; 
}
#id-name
font-family: Comic Sans MS; 
}

CSS Font Poperty Name


CSS Font Family Preview
Comic Sans

Comic Sans

Comic Sans MS

Comic Sans MS

Apple Chancery

Apple Chancery

Zapf Chancery

Zapf Chancery

Bradley Hand

Bradley Hand

Brush Script MT

Brush Script MT

Brush Script Std

Brush Script Std

Snell Roundhan

Snell Roundhan

URW Chancery

URW Chancery

Coronet script

Coronet script

Florence

Florence

Parkavenue

Parkavenue

CSS Font Poperty Name

CSS Font Family Preview
Impact

Impact

Brushstroke

Brushstroke

Luminari

Luminari

Chalkduster

Chalkduster

Jazz LET

Jazz LET

Blippo

Blippo

Stencil Std

Stencil Std

Marker Felt

Marker Felt

Trattatello

Trattatello

Arnoldboecklin

Arnoldboecklin

Oldtown

Oldtown

Copperplate

Copperplate

papyrus

papyrus

CSS Font Poperty Name


CSS Font Family Preview
Abadi MT Condensed Light

Abadi MT Condensed Light

Aharoni

Aharoni

Aharoni Bold

Aharoni Bold

Aldhabi

Aldhabi

AlternateGothic2 BT

AlternateGothic2 BT

Andale Mono

Andale Mono

Andalus

Andalus

Angsana New

Angsana New

AngsanaUPC

AngsanaUPC

Aparajita

Aparajita

Apple Chancery

Apple Chancery

Arabic Typesetting

Arabic Typesetting

Arial

Arial

Arial Black

Arial Black

Arial narrow

Arial narrow

Arial Nova

Arial Nova

Arial Rounded MT Bold

Arial Rounded MT Bold

Arnoldboecklin

Arnoldboecklin

Avanta Garde

Avanta Garde

Bahnschrift

Bahnschrift

Bahnschrift Light

Bahnschrift Light

Bahnschrift SemiBold

Bahnschrift SemiBold

Bahnschrift SemiLight

Bahnschrift SemiLight

Baskerville

Baskerville

Batang

Batang

BatangChe

BatangChe

Big Caslon

Big Caslon

BIZ UDGothic

BIZ UDGothic

BIZ UDMincho Medium

BIZ UDMincho Medium

Blippo

Blippo

Bodoni MT

Bodoni MT

Book Antiqua

Book Antiqua

Book Antiqua

Book Antiqua

Bookman

Bookman

Bradley Hand

Bradley Hand

Browallia New

Browallia New

BrowalliaUPC

BrowalliaUPC

Brush Script MT

Brush Script MT

Brush Script Std

Brush Script Std

Brushstroke

Brushstroke

Calibri

Calibri

Calibri Light

Calibri Light

Calisto MT

Calisto MT

Cambodian

Cambodian

Cambria

Cambria

Cambria Math

Cambria Math

Candara

Candara

Century Gothic

Century Gothic

Chalkduster

Chalkduster

Cherokee

Cherokee

Comic Sans

Comic Sans

Comic Sans MS

Comic Sans MS

Consolas

Consolas

Constantia

Constantia

Copperplate

Copperplate

Copperplate Gothic Light

Copperplate Gothic Light

Copperplate Gothic Bold

Copperplate Gothic Bold

Corbel

Corbel

Cordia New

Cordia New

CordiaUPC

CordiaUPC

Coronetscript

Coronetscript

Courier

Courier

Courier New

Courier New

DaunPenh

DaunPenh

David

David

DengXian

DengXian

DFKai-SB

DFKai-SB

Didot

Didot

DilleniaUPC

DilleniaUPC

DokChampa

DokChampa

Dotum

Dotum

DotumChe

DotumChe

Ebrima

Ebrima

Estrangelo Edessa

Estrangelo Edessa

EucrosiaUPC

EucrosiaUPC

Euphemia

Euphemia

FangSong

FangSong

Florence

Florence

Franklin Gothic Medium

Franklin Gothic Medium

FrankRuehl

FrankRuehl

FreesiaUPC

FreesiaUPC

Futara

Futara

Gabriola

Gabriola

Gadugi

Gadugi

Garamond

Garamond

Gautami

Gautami

Geneva

Geneva

Georgia

Georgia

Georgia Pro

Georgia Pro

Gill Sans

Gill Sans

Gill Sans Nova

Gill Sans Nova

Gisha

Gisha

Goudy Old Style

Goudy Old Style

Gulim

Gulim

GulimChe

GulimChe

Gungsuh

Gungsuh

GungsuhChe

GungsuhChe

Hebrew

Hebrew

Hoefler Text

Hoefler Text

HoloLens MDL2 Assets

HoloLens MDL2 Assets

Impact

Impact

Ink Free

Ink Free

IrisUPC

IrisUPC

Iskoola Pota

Iskoola Pota

Japanese

Japanese

JasmineUPC

JasmineUPC

Javanese Text

Javanese Text

Jazz LET

Jazz LET

KaiTi

KaiTi

Kalinga

Kalinga

Kartika

Kartika

Khmer UI

Khmer UI

KodchiangUPC

KodchiangUPC

Kokila

Kokila

Korean

Korean

Lao

Lao

Lao UI

Lao UI

Latha

Latha

Leelawadee

Leelawadee

Leelawadee UI

Leelawadee UI

Leelawadee UI Semilight

Leelawadee UI Semilight

Levenim MT

Levenim MT

LilyUPC

LilyUPC

Lucida Bright

Lucida Bright

Lucida Console

Lucida Console

Lucida Handwriting

Lucida Handwriting

Lucida Sans

Lucida Sans

Lucida Sans Typewriter

Lucida Sans Typewriter

Lucida Sans Unicode

Lucida Sans Unicode

Lucidatypewriter

Lucidatypewriter

Luminari

Luminari

Malgun Gothic

Malgun Gothic

Malgun Gothic Semilight

Malgun Gothic Semilight

Mangal

Mangal

Marker Felt

Marker Felt

Marlett

Marlett

Meiryo

Meiryo

Meiryo UI

Meiryo UI

Microsoft Himalaya

Microsoft Himalaya

Microsoft JhengHei

Microsoft JhengHei

Microsoft JhengHei UI

Microsoft JhengHei UI

Microsoft New Tai Lue

Microsoft New Tai Lue

Microsoft PhagsPa

Microsoft PhagsPa

Microsoft Sans Serif

Microsoft Sans Serif

Microsoft Tai Le

Microsoft Tai Le

Microsoft Uighur

Microsoft Uighur

Microsoft YaHei

Microsoft YaHei

Microsoft YaHei UI

Microsoft YaHei UI

Microsoft Yi Baiti

Microsoft Yi Baiti

MingLiU

MingLiU

MingLiU_HKSCS

MingLiU_HKSCS

MingLiU_HKSCS-ExtB

MingLiU_HKSCS-ExtB

MingLiU-ExtB

MingLiU-ExtB

Miriam

Miriam

Monaco

Monaco

Mongolian Baiti

Mongolian Baiti

MoolBoran

MoolBoran

MS Gothic

MS Gothic

MS Mincho

MS Mincho

MS PGothic

MS PGothic

MS PMincho

MS PMincho

MS UI Gothic

MS UI Gothic

MV Boli

MV Boli

Myanmar Text

Myanmar Text

Narkisim

Narkisim

Neue Haas Grotesk Text Pro

Neue Haas Grotesk Text Pro

New Century Schoolbook

New Century Schoolbook

News Gothic MT

News Gothic MT

Nirmala UI

Nirmala UI

No automatic language associations

No automatic language associations

Noto

Noto

NSimSun

NSimSun

Nyala

Nyala

Oldtown

Oldtown

Optima

Optima

Palatino

Palatino

Palatino Linotype

Palatino Linotype

papyrus

papyrus

Parkavenue

Parkavenue

Perpetua

Perpetua

Plantagenet Cherokee

Plantagenet Cherokee

PMingLiU

PMingLiU

Raavi

Raavi

Rockwell

Rockwell

Rockwell Extra Bold

Rockwell Extra Bold

Rockwell Nova

Rockwell Nova

Rockwell Nova Cond

Rockwell Nova Cond

Rockwell Nova Extra Bold

Rockwell Nova Extra Bold

Rod

Rod

Sakkal Majalla

Sakkal Majalla

Sanskrit Text

Sanskrit Text

Segoe MDL2 Assets

Segoe MDL2 Assets

Segoe Print

Segoe Print

Segoe Script

Segoe Script

Segoe UI

Segoe UI

Segoe UI Emoji

Segoe UI Emoji

Segoe UI Historic

Segoe UI Historic

Segoe UI Symbol

Segoe UI Symbol

Shonar Bangla

Shonar Bangla

Shruti

Shruti

SimHei

SimHei

SimKai

SimKai

Simplified Arabic

Simplified Arabic

Simplified Chinese

Simplified Chinese

SimSun

SimSun

SimSun-ExtB

SimSun-ExtB

Sitka

Sitka

Snell Roundhan

Snell Roundhan

Stencil Std

Stencil Std

Sylfaen

Sylfaen

Symbol

Symbol

Tahoma

Tahoma

Thai

Thai

Times New Roman

Times New Roman

Traditional Arabic

Traditional Arabic

Traditional Chinese

Traditional Chinese

Trattatello

Trattatello

Trebuchet MS

Trebuchet MS

Tunga

Tunga

UD Digi Kyokasho

UD Digi Kyokasho

UD Digi KyoKasho NK-R

UD Digi KyoKasho NK-R

UD Digi KyoKasho NP-R

UD Digi KyoKasho NP-R

UD Digi KyoKasho N-R

UD Digi KyoKasho N-R

Urdu Typesetting

Urdu Typesetting

URW Chancery

URW Chancery

Utsaah

Utsaah

Vani

Vani

Verdana

Verdana

Verdana Pro

Verdana Pro

Vijaya

Vijaya

Vrinda

Vrinda

Webdings

Webdings

Westminster

Westminster

Wingdings

Wingdings

Yu Gothic

Yu Gothic

Yu Gothic UI

Yu Gothic UI

Yu Mincho

Yu Mincho

Zapf Chancery

Zapf Chancery

CSS Font Poperty Name


CSS Font Family Preview
Arial

Arial

Arial Black

Arial narrow

Arial Rounded MT Bold

Helvetica

Helvetica

Verdana

Verdana

Calibri

Calibri

Noto

Noto

Lucida Sans

Lucida Sans

Gill Sans

Gill Sans

Century Gothic

Century Gothic

Candara

Candara

Futara

Futara

Franklin Gothic Medium

Franklin Gothic Medium

Trebuchet MS

Trebuchet MS

Geneva

Geneva

Segoe UI

Segoe UI

Optima

Optima

Avanta Garde

Avanta Garde

Don't Miss
© all rights reserved
made with by templateszoo